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.
Node.js: The Complete Guide to Build Backend Projects [2024]🔥
Link - https://www.dipeshmalvia.com/courses/...
⭐️ Support my channel⭐️
https://www.buymeacoffee.com/dipeshma...
⭐️ GitHub link for Reference ⭐️
https://github.com/dmalvia/Build_Full...
⭐️ Node.js for beginners Playlist ⭐️
• Node.js Tutorial For Beginners
🔥 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 ⭐️
🔗 Nodejs Crash Course - • Learn Node.js & Express with Project ...
🔗 React Crash Course - • Learn React JS with Project in 2 Hour...
🔗 JavaScript Crash Course - • JavaScript Tutorial for Beginners | J...
🔗 HTML5 Crash Course in 1 Hour - • HTML5 Crash Course for Absolute Begin...
🔗 CSS Crash Course in 1 Hour - • CSS Crash Course For Absolute Beginne...
🔗 Social Medias 🔗
Twitter: / imdmalvia
Facebook: / programmingwithdipesh
Instagram: / dipeshmalvia
LinkedIn: / dmalvia
⭐️ 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.
Watch video Learn React, TypeScript & Firebase with project | React Firebase Crash Course in 4 Hours online, duration hours minute second in high quality that is uploaded to the channel Dipesh Malvia 06 June 2024. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 9,471 times and liked it 279 visitors.
