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 ...
🔗 React Firebase CRUD App - • Complete React Firebase CRUD Project ...
🔗 React Firebase Auth with Context API - • React Firebase Authentication Crash C...
🔗 React Context API - • React Context API Tutorial For Beginn...
🔗 CSS Crash Course in 1 Hour - • CSS Crash Course For Absolute Beginne...
⭐️ 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
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.
Watch video Build a Full Stack Social Media App | React, Firebase, Uploadcare, Tailwind CSS & Shadcn/UI | Ep.1 online, duration hours minute second in high quality that is uploaded to the channel Dipesh Malvia 27 February 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 4,620 times and liked it 162 visitors.
