Realtime Chat - React Native + Django + Channels
Hey guys! welcome to this React Native + Django + Django Channels tutorial. This series will walk you through building a realtime communication app from start to finish. Wether you're a beginner wanting to see how it's done, or a pro and just like to code along, this is the series for you.
Final project repo: https://github.com/nickcercone/realti...
We are going to deal with navigation in React Native, Creating an image picker, storing credentials securely, creating a global state with Zustand, using the Django REST Framework, Django Channels for WebSocket communication, creating a custom authentication handler, and much more.
This is tutorial is no joke, It will require some dedication on your part. You will not be able to complete it in a single sitting (if you do, send me your resume). We will face many issues together that we will work through carefully, which is where most of your time as a software engineer will be spent, but thats the game baby.
Any questions, thoughts, critiques, suggestions for future series or topics you wish me to cover please post them down in the comments. If you like it, like, share, subscribe, you know the drill. Let's DO IT!
Contents
00:00:00 - 01 Preview
00:02:08 - 02 React Native Setup
00:09:54 - 03 Django Setup
00:14:43 - 04 Splash Screen
00:23:53 - 05 Custom Font React Native
00:28:13 - 06 Reusable Title
00:30:25 - 07 Animate Title
00:37:14 - 08 React Navigation
00:59:00 - 09 Tab Navigation
01:04:35 - 10 Fontawesome Icons
01:18:45 - 11 Default profile picture
01:25:09 - 12 SignUp & SignIn Screens
01:51:58 - 13 SignUp & SignIn Error Handling
02:22:01 - 14 Keyboard Aware Views
02:30:42 - 15 Custom Authentication
03:16:32 - 16 Registration
03:30:03 - 17 Global State with Zustand
03:39:52 - 18 Profile Screen
03:47:37 - 19 Storing Credentials Securely
04:06:39 - 20 Image Picker
04:27:06 - 21 Django Channels Setup
05:03:40 - 22 Send Thumbnail Via Websocket
05:37:54 - 23 Searching Users
06:34:17 - 24 Send Friend Requests
07:30:36 - 25 Accept Friend Requests
07:45:38 - 26 Friends Screen
08:14:17 - 27 Sending Messages
09:23:02 - 28 Update Friend List Preview
09:39:13 - 29 Add Friends
09:55:31 - 30 Message Typing Indicator
10:23:03 - 31 Paginate Messages
10:45:56 - 32 Cleaning Up
Resources
React Native - Setting up the development environment
https://reactnative.dev/docs/environm...
How to add custom fonts in React Native
https://blog.logrocket.com/adding-cus...
Leckerli One Font
https://fonts.google.com/specimen/Lec...
React Navigation
https://reactnavigation.org/docs/gett...
Tab Navigation
https://reactnavigation.org/docs/tab-...
Fontawesome Icons
https://fontawesome.com/search
Wikimedia Commons Avatar
https://commons.wikimedia.org/wiki/Fi...
Zustand
https://github.com/pmndrs/zustand
React Native Encrypted Storage
https://github.com/emeraldsanto/react...
React Native Image Picker
https://github.com/react-native-image...
Django Channels
https://channels.readthedocs.io/en/la...
Django Channels JWT Auth Middleware
https://github.com/joshua-hashimoto/d...