Build and Deploy a Full Stack Social Media App (ReactJS + Firebase v9 + Chakra UI)

Build and deploy a React full stack social media app from scratch with Firebase Hooks, React Hook Form, and React Router.

The code used in this video (with the .htaccess snippet):

Firebase Auth Playlist:

Cloud Firestore Playlist:

Flexbox CSS Guide:

Timestamps:
0:00 Introduction and Demo Showcase
3:22 Environment Setup
6:19 React Router Setup
12:45 Authentication
1:37:23 Sidebar Component
1:58:26 Dashboard Page
3:01:11 Comments Page
3:45:42 Profile Page
4:18:13 All Users Page
4:22:26 Delete Post Hook
4:30:32 Deploy
4:32:51 End

[williamhunt]

Great tutorial, really appreciate it. Was able to learn how to build an online marketplace app for a cohort project, which helped me just land my first CS job at a local startup making a mobile marketplace app. Much thanks and wish you all the best!!

[sujit_webdev]

This is hands down - one of the best tutorials on YouTube! Very well explained and easily qualifies for a paid course. Beginners or those with less than 6-8 months of experience can feel a little overwhelmed because of the tooling but nevertheless there are too many tutorials for them already. Thank You very much for this!

[janvier]

I'm currently at the first 30 mins, and I'm already enjoying it! Thank you very much!

[aronferix]

This is an amazing project. Thanks for coming back after long time

[blangly]

Thank you so much, this is by far the best tutorial on React + Firebase! Finally it all starts to make sense! Amazing work!

[cwzmorro]

3:21:30 As a winz, I can verify that nigel and winz are indeed two different people👍👍

[Titan-eywj]

Great video, thank you. After finishing this tutorial, everything works fine. However, I noticed that you forgot something: when clicking on the comment icon and navigating to the post's comments, if you delete the post on that page, it becomes blank because the page depends on the post ID, which has been deleted. Do you have any solutions for this issue?

[zoran]

Thank you, it was vry useful tutorial. A bit long, but in my opinion every minute is worth watching. Thank you. :)

[mahmoudelhassan]

Thanks man for this clean easy to understand tutorial❤❤

[aniket]

firebase part got really complicated, Please explain firebase part a bit more in your upcoming videos. I can understand the frontend part though

[quinzonjohnfrancis]

Hello sir!, I'm having a problem in Login. I'm not redirected to the DASHBOARD when the login succeed. I log the user or authUser after loggin in and it shows undefined thats why Im not redirected to the dashboard page.

[tobiolaleye]

Great tutorial👏🏽…but Lets say u wanted to use a backend language like node js, does host-stinger provide server side hosting?

[WillMarchesi]

I’m having trouble adding email verification and can’t find many good resources that are working. Do you have any tips or resources you think would help? Thanks so much for all your hard work!

[fatkidgamingyt]

Awesome video, how many years have you been coding? how long did this all take for you to figure out and make? just curious

[bruinmedved]

Hello Raven, I noticed whenever you write for example <Box></Box>, it automatically adds itself to the imports. How did you manage to set that up? Thank you for the great video!

[vtddfjv]

For a beginner can I ask what you enjoy using more? Super base or firebase

[spiriteagar]

hello ! can we talk about create a friends sections and see comment and messages when the two friends talk ?

[JJ-otps]

hi great video tuto!!! Just wondering is there any reasons why you did not use context or redux to store user's token ? i see you uses the customer hook to check. Is this safe?

[davidoh]

hey Raven. Ive actually downloaded your code and started modifying it but im having a really hard time trying upload photos like you would in instagram and have them display in like a postlist just like your pastelist section. Could you possibly make a video on that?

[nvm]

can you please help me in resolving this error.
it occurs whenever i click on register.
Firebase: Error