React JS Crash Course for Beginners - Build 4 Apps in 12 Hours (Redux, Firebase, Auth + More) [2021]

57 Views
Neha Sharma
Neha Sharma
16 Jan 2022

Too difficult? 👉 Watch my REACT BASICS 101 class for FREE with 1 month FREE SkillShare access (First 1000 people): https://skl.sh/2Srfwuf

🚨 Join the world’s BEST developer community “Zero to Full Stack Hero” NOW: https://www.papareact.com/course

🖥️ Join me as I clone 4 Apps using ReactJS:

1️⃣ LINKEDIN with Redux & Firebase
2️⃣ GMAIL with React-Router, Redux & Firebase
3️⃣ SLACK with Redux, Styled components & Firebase Hooks
4️⃣ SNAPCHAT with Camera Functionality, Redux & Firebase

📚 We'll be learning the following:
👉 The React fundamentals
👉 Lots of practice with React Hooks!
👉 How to manage data in a react app using Redux
👉 How to integrate a realtime database using Firebase Firestore
👉 How to have dynamic page routing using React Router
👉 Build beautiful apps with incredible UI/UX using Material UI
👉 How to craft responsive websites with Flexbox!
👉 How to upgrade your CSS game with Styled components
👉 + SO MUCH MORE!!!

🖥️ CODE
Get the code for my builds here: https://links.papareact.com/github

📰 NEWSLETTER (Join to get the PAPAFAM Playlist for FREE! 🎵)
https://links.papareact.com/newsletter

🎙️ PODCAST
https://links.papareact.com/podcast

🌍 SOCIALS:
Instagram: https://links.papareact.com/instagram
Facebook: https://links.papareact.com/facebook
LinkedIn: https://links.papareact.com/linkedin
Twitter: https://links.papareact.com/twitter
Discord: https://links.papareact.com/discord

❤️ SUPPORT
PAPA Merch: https://links.papareact.com/merch
Donate: https://links.papareact.com/donate

🕐 TABLE OF CONTENTS:
00:00 Introduction
02:24 LinkedIn | Build Showcase
03:40 LinkedIn | Starting the Build
05:09 LinkedIn | Setting up Firebase
19:59 LinkedIn | Building the Header Section
34:17 LinkedIn | Building the Header Options
50:37 LinkedIn | Building the Sidebar
01:13:48 LinkedIn | Building the Feed Section
01:21:22 LinkedIn | Building the Input Option
01:28:19 LinkedIn | Building the Post Section
01:40:54 LinkedIn | Integrating Firebase
01:59:10 LinkedIn | Integrating Redux
02:10:57 LinkedIn | Building the Login Page and Functionality
02:57:39 LinkedIn | Building the Widgets Section
03:06:35 LinkedIn | Deploying Final Build to Firebase
03:09:57 LinkedIn | Final Build Demo
03:10:54 Intermission 1
03:11:52 Gmail | Build Showcase
03:13:18 Gmail | Starting the Build
03:19:16 Gmail | Building the Header Component
03:35:20 Gmail | Building the Sidebar Component
03:41:15 Gmail | Building the SidebarOption Component
03:59:13 Gmail | Building the EmailList Component
04:07:33 Gmail | Building the Sections Component
04:19:07 Gmail | Building the EmailRow Component
04:33:10 Gmail | Building the Mail Screen
04:45:52 Gmail | Implementing Redux
04:54:32 Gmail | Building the SendMail Component
05:20:05 Gmail | Setting up Firebase Authentication
05:39:09 Gmail | Refining the Build
05:56:34 Gmail | Building the Login Functionality
06:09:02 Gmail | Deploying Final Build to Firebase
06:11:39 Gmail | Final Build Demo
06:12:59 Intermission 2
06:14:22 Slack | Build Overview
06:15:21 Slack | Starting the Build
06:16:54 Slack | Setting up Firebase
06:22:54 Slack | Setting up React Router
06:27:53 Slack | Building the Header Component
06:55:03 Slack | Building the Sidebar Component
07:04:10 Slack | Building the SidebarOption Component
07:33:25 Slack | Using Redux for Sidebar
07:44:22 Slack | Building the Chat Component
07:55:50 Slack | Building the ChatInput Component
08:17:32 Slack | Building the Message Component
08:30:51 Slack | Building the Login Functionality
08:50:58 Slack | Deploying Final Build to Firebase
08:54:12 Slack | Final Build Demo
08:55:34 Intermission 3
08:56:43 Snapchat | Build Overview
08:58:50 Snapchat | Starting the Build
09:00:13 Snapchat | Setting up Firebase
09:14:20 Snapchat | Building the WebcamCapture Component (1/2)
09:39:04 Snapchat | Building the Preview Component (1/2)
09:40:09 Snapchat | Building the WebcamCapture Component (2/2)
09:46:40 Snapchat | Building the Preview Component (2/2)
10:15:24 Snapchat | Building the Chats Component
10:30:20 Snapchat | Building the Chat Component
10:44:54 Snapchat | Building the ChatView Component
10:58:11 Snapchat | Building the Login Functionality
11:15:24 Snapchat | Refining the Build
11:22:15 Snapchat | Deploying Final Build to Firebase
11:25:07 Snapchat | Final Build Demo
11:27:34 Outro

#reactjs #beginner #tutorial

Show more

2 Comments Sort By
Manoj Babu Adhikari
Manoj Babu Adhikari 4 months ago

great

0 0 Reply
desertvillage
desertvillage 4 months ago

Good

0 0 Reply
Show more

Up next