Learn React, TypeScript & Firebase with project | React Firebase Crash Course in 4 Hours

This video is a complete FullStack (React, TypeScript & Firebase) Crash Course for beginners. The video covers different topics like React , Typescript, Firebase Authentication, Firestore Database, Hosting, ShadcnUI and Tailwindcss implementation in one single project. The video showcase the Full Stack concepts and their use in practical project.
The Project also help us to learn how we connect the frontend and backend app. How is the project structure, how to break a large project into smaller chunks and Image Upload and retrieve them via Uploadcare CDN link.
We will build an Social media app to post pictures. Learn Firebase Authentication, Firestore CRUD, Firestore Rules, Firebase Image Upload, Firebase Deploying and Hosting.

⭐️ Support my channel⭐️

⭐️ GitHub link for Reference ⭐️

🔥 Video contents... ENJOY 👇
0:00:00 - Outro
0:00:53 - Demo
0:00:38 - Project Break Down
0:06:18 - Project Setup using VITE
0:09:44 - Firebase Project Setup
0:14:03 - Install Shadcn/ui & Tailwind CSS
0:20:00 - Pages & Routes Setup
0:26:49 - Protecting Private Routes
0:31:28 - User Auth Context Api Setup
0:43:54 - Build User Signup Feature
0:57:18 - Build User Login Feature
1:06:32 - Resolve Firebase Issues
1:09:30 - Resolve Page Refresh Issue (react-firebase-hooks)
1:13:02 - Design App Layout
1:18:48 - Design Sidebar Navigation
1:31:23 - Adding Layout on all Pages
1:32:42 - Create Post Design
1:37:52 - Integrate Uploadcare to Project
1:45:55 - Create Interfaces & Handle Post Form
1:51:43 - Create File Uploader Component
2:04:30 - Uploadcare Image Optimisation & Transformation
2:08:43 - Handle Create Post
2:11:13 - FireStore DB Setup & Post Service
2:16:58 - Complete Create Post Feature
2:19:17 - Build My Photos - Fetch User Photos
2:24:54 - Build My Photos - Display User Photos
2:35:04 - Home Page Design
2:40:56 - Fetch Feeds/Posts
2:48:48 - User Stories Component
2:51:08 - Post Card Component
2:57:49 - Post Like/Dislike Feature
3:08:53 - User Profile Component & Feature
3:23:12 - Edit Profile Component
3:34:01 - User Profile Collection & Service
3:40:28 - FileUploader (Uploadcare) Profile Picture
3:48:30 - Update & Create User Profile in Firestore DB
3:55:51 - Sync User Profile With Firebase User
4:01:15 - Create Post With User Info
4:05:33 - Sync User Post with User Profile
4:13:47 - Fetch Suggested Friends
4:21:49 - Suggested Friends JSX
4:29:29 - Firebase App Deploy
4:36:34 - Outro

⭐️ Crash Courses ⭐️

🔗 Social Medias 🔗

⭐️ Tags ⭐️
- React & Firebase Tutorial: Creating a Social Media App from Scratch
- React & Firebase Crash Course for Beginners
- Building a Modern Full Stack App with React, Firebase, and Tailwind CSS
- Building a Social Media App like Instagram with React, TypeScript, and Firebase

⭐️ Hashtags ⭐️
#react #typescript #firebase #fullstack #projects #beginners

Disclaimer:
It doesn't feel good to have a disclaimer in every video but this is how the world is right now.
All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.

[regilearn]

Wow great, next project please use image upload with AWS S3 and lambda functions and DynamoDB

[jalluchakri]

Thanks for developing the Application of ReactJS With Firebase Auth & Store

[jalluchakri]

Thanks a lot friend i am expecting more videos like this friend

[elusiveadrameleck]

uploadCare has changed, from the time of following this tutorial i cannot tell what is what from uploadcare

[adarshanayak]

I have a suggestion,
instead of using Layout inside each of the pages, we could rather wrap <Outlet/> in protected routes with <Layout> and it should work the same way.

[yogendrarajput-kn]

upload care ui is not visible perfectly all the items inside it will saw extra large how to resolve this

[alexhelm]

the github code for the Build User Signup Feature part is not the same

[jalluchakri]

Please Built more features of react firebase project

[engineer]

video is amazing but how have you create and navigate on folders without using mouse please tell me

[muhammadtayyab]

sir i need this project presentation structure slides kindly give me this link

[kunalsin]

In project which component is used class component or functional component

[umarfarooq]

the upload care part is not explained as the whole project was based upon it

[frankillumate]

But this deployed App doesn't work on my phone. Is it me or i need to try it on a desktop

[awangandas]

Sir, your the app which you have deployed isn't working well

[DevHive-wyin]

bro i have suggesion change the file name idex.ts to index.d.ts. then we do not need to export the interfaces we can only decalre it's imported automatically.

[mohityadav]

The hosted app is failing with TypeError: Cannot read properties of undefined (reading 'cdnUrl')

[shubhamgupta-bltr]

Sir react design patterns ke video please

[ambujtripathi]

Sir, I am getting an additional tsconfig.app.json file when creating the vite project, and when making the components and lib folder, it does not take @ as src folder. it makes a new @ folder in the main project directory. Can you please help with that

[shubhampawar]

Can anyone send me repo of this project,
I am getting error