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/Nodejs-Zero-to-Hero

⭐️ Support my channel⭐️
https://www.buymeacoffee.com/dipeshmalvia

⭐️ GitHub link for Reference ⭐️
https://github.com/dmalvia/Build_FullStack_Social_Media_App/tree/Episode-1

⭐️ Node.js for beginners Playlist ⭐️
https://youtube.com/playlist?list=PLTP3E5bPW796_icZanMqhdg7i0Cl7Y51F

🔥 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 - https://youtu.be/-fj1loJfSdA
🔗 React Firebase CRUD App - https://youtu.be/cXWDQhzC3do
🔗 React Firebase Auth with Context API - https://youtu.be/6kgitEWTxac
🔗 React Context API - https://youtu.be/zHYkA1AycPs
🔗 CSS Crash Course in 1 Hour - https://youtu.be/nYsk_U_A_lc

⭐️ Crash Courses ⭐️
🔗 Nodejs Crash Course - https://youtu.be/H9M02of22z4
🔗 React Crash Course - https://youtu.be/0riHps91AzE
🔗 JavaScript Crash Course - https://youtu.be/sptS-bgg8Ro
🔗 HTML5 Crash Course in 1 Hour - https://youtu.be/Aj3QFsmsagc
🔗 CSS Crash Course in 1 Hour - https://youtu.be/nYsk_U_A_lc

🔗 Social Medias 🔗
Twitter: https://twitter.com/IMDmalvia
Facebook: https://www.facebook.com/programmingwithdipesh
Instagram: https://www.instagram.com/dipeshmalvia
LinkedIn: https://www.linkedin.com/in/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.

Видео Build a Full Stack Social Media App | React, Firebase, Uploadcare, Tailwind CSS & Shadcn/UI | Ep.1 канала Dipesh Malvia