Build a Full Stack Social Media App | React, Firebase, Uploadcare, Tailwind CSS & Shadcn/UI | Ep.1

Hey what’s going on guys, Welcome back to another exciting project in our Full Stack development series. In this video we will build a Social Media App similar to instagram from scratch using React, Typescript, Firebase and Uploadcare.
For styling our app we will use Tailwind CSS and Shadcn/UI components. We will cover React concepts, Route setup, Project Structure, Firebase Authentication, Firestore DB, File Handling, File Uploads via Uploadcare, CDN delivery and many more concepts.

⭐️ Uploadcare - https://bit.ly/3Pei9d5
Uploadcare makes simple, powerful, developer-friendly building blocks to handle file uploading, storage, processing, and delivery. You get a complete file handling infrastructure.

Node.js: The Complete Guide to Build Backend Projects [2023]🔥
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:30 - Demo
0:04:42 - Project Setup using VITE
0:08:05 - Firebase Project Setup
0:12:26 - Install Shadcn/ui & Tailwind CSS
0:18:24 - Pages & Routes Setup
0:25:11 - Protecting Private Routes
0:29:50 - User Auth Context Api Setup
0:42:36 - Build User Signup Feature
0:55:47 - Build User Login Feature
1:04:42 - Resolve Firebase Issues
1:08:18 - Resolve Page Refresh Issue (react-firebase-hooks)
1:11:25 - Design App Layout
1:17:11 - Design Sidebar Navigation
1:29:46 - Adding Layout on all Pages
1:31:06 - Create Post Design
1:36:11 - Uploadcare Walkthrough
1:38:58 - Integrate Uploadcare to Project
1:44:18 - Create Interfaces & Handle Post Form
1:48:40 - Create File Uploader Component
2:02:53 - Uploadcare Image Optimisation & Transformation
2:06:20 - Handle Create Post
2:09:41 - FireStore DB Setup & Post Service
2:15:22 - Complete Create Post Feature
2:17:40 - Build My Photos - Fetch User Photos
2:23:16 - Build My Photos - Display User Photos
2:33:27 - Outro

⭐️ Related Videos ⭐️
🔗 Learn VITE For Next React -    • Learn Vite For Next React TypeScript Proje...  
🔗 React Firebase CRUD App -    • Complete React Firebase CRUD Project | Fir...  
🔗 React Firebase Auth with Context API -    • React Firebase Authentication Crash Course...  
🔗 React Context API -    • React Context API Tutorial For Beginners |...  
🔗 CSS Crash Course in 1 Hour -    • CSS Crash Course For Absolute Beginners [T...  

⭐️ Crash Courses ⭐️
🔗 Nodejs Crash Course -    • Learn Node.js & Express with Project in 2 ...  
🔗 React Crash Course -    • Learn React JS with Project in 2 Hours  | ...  
🔗 JavaScript Crash Course -    • JavaScript Tutorial for Beginners | JavaSc...  
🔗 HTML5 Crash Course in 1 Hour -    • HTML5 Crash Course for Absolute Beginners ...  
🔗 CSS Crash Course in 1 Hour -    • CSS Crash Course For Absolute Beginners [T...  

🔗 Social Medias 🔗
Twitter:   / imdmalvia  
Facebook:   / programmingwithdipesh  
Instagram:   / dipeshmalvia  
LinkedIn:   / dmalvia  

⭐️ Tags ⭐️
React & Firebase Tutorial: Creating a Social Media App from Scratch
Dive into Full Stack Development: Creating a Social Media App with React and Firebase
Building a Modern Social Media 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.