Build a Full Stack Social Media App | React, Firebase, Uploadcare, Tailwind CSS & Shadcn/UI | Ep.1
Vložit
- čas přidán 5. 08. 2024
- 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 - 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 - www.dipeshmalvia.com/courses/...
⭐️ Support my channel⭐️
www.buymeacoffee.com/dipeshma...
⭐️ GitHub link for Reference ⭐️
github.com/dmalvia/Build_Full...
⭐️ Node.js for beginners Playlist ⭐️
• Node.js Tutorial For B...
🔥 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 Re...
🔗 React Firebase CRUD App - • Complete React Firebas...
🔗 React Firebase Auth with Context API - • React Firebase Authent...
🔗 React Context API - • React Context API Tuto...
🔗 CSS Crash Course in 1 Hour - • CSS Crash Course For A...
⭐️ Crash Courses ⭐️
🔗 Nodejs Crash Course - • Learn Node.js & Expres...
🔗 React Crash Course - • Learn React JS with Pr...
🔗 JavaScript Crash Course - • JavaScript Tutorial fo...
🔗 HTML5 Crash Course in 1 Hour - • HTML5 Crash Course for...
🔗 CSS Crash Course in 1 Hour - • CSS Crash Course For A...
🔗 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.
This is a very good project.
Aapke channel ke baare mein abhi pta chla kaafi acha or kaam ka content hai. Keep it Up !!!
Chalo aacha hai…late hi sahi par pata to chala…
Very well explained
Glad it was helpful!
thank you sir for this much knowledge for free
It's my pleasure. Welcome!
Great video sir, when will episode 2 come for the home page implementation?
Will upload soon
React redux with JWT Authentication - Sign up, Login, Logout & Private Route(access and refresh token redux state management ).how to handle token or session(state management redex store) in enterprice level application ....thanks in advance bro ... eagarly waiting bro..create enterprice level small application ( like ecommerce with cover all topics bro)
Thank you sir for the amazing proejct. I do have a request is there a possibility that you add chatting feature in this application.
That will be all together a different project, but I will think about it.
Want a full stack project with relational db
Amazing ❤
I want to try it out
So can you suggest some extra features i can add it on my own so this project will be mine ?
A lot of things you can add, I will publish part 2 where I am adding the home page, profile and edit profile. User preferences storage for like, dislike…bind the post with user photo and user name. You can define work on the stories part and I can add it to my project once you are done share the code.
@@DipeshMalvia sure
why not javascript.....😭😭😭😭😭😭
First I always thought why some tutorials are in typescript not in Javascript but to be honest you can learn typescript in 2 hours.
You just need to learn how to pass props in React typescript .
how we make state in React typescript.
What are type in typescript and you are good to go.
and now industry also wants you know typescript .
That;s true...Most companies use typescript and not JS...
@@DipeshMalvia yes exactly. I am doing everything in typescript now