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.
Смотрите видео Build a Full Stack Social Media App | React, Firebase, Uploadcare, Tailwind CSS & Shadcn/UI | Ep.1 онлайн, длительностью часов минут секунд в хорошем качестве, которое загружено на канал Dipesh Malvia 27 Февраль 2024. Делитесь ссылкой на видео в социальных сетях, чтобы ваши подписчики и друзья так же посмотрели это видео. Данный видеоклип посмотрели 4,620 раз и оно понравилось 162 посетителям.