Repository files navigation

Different lessons taught in thisReactive Accelerator: React-Next.js Bangla Course by Learn with Sumit, are organized in separate branches with naming convention - [module number].[lesson number]. For example,Module-1 Lesson-1 source code is shared in1.1 branch. Just switch to a branch and follow the corresponding branch's README file instruction.

Please follow the below instructions to run different branches of this repository in your machine:

1. Login to your GitHub account in your Terminal. If you can't setup and install Git in your machine, kindly followthis tutorial.

2. Clone this repository -

   git clone https://github.com/Learn-with-Sumit/rnext.git

3. Go to the cloned project directory

   cd rnext

4. Checkout/switch to your desired branch. For example, to switch to branch 1.1 -

   git checkout 1.1

5. Follow the corresponding branch's README file instruction to run code.

• 0.1 Reactive Accelerator - Course intro —06:46 minute
• 0.2 How to enroll in Reactive Accelerator course —16:50 minute
• 0.3 How to get the most out of Reactive Accelerator course —15:01 minute
• 0.4 How to submit quizzes in Reactive Accelerator course —05:43 minute
• 0.5 Platform overview —11:24 minute
• 0.6 How to deploy your project to Vercel free —12:26 minute
• 0.7 How to submit Assignments in Reactive Accelerator course —08:40 minute
• 0.8 How to maintain multiple GitHub remote URLs —12:26 minute
• 0.9 How to ask for support —07:30 minute
• 0.10 Git/GitHub Refresher —01:45:48 hours
• 0.11 JavaScript Refresher —01:54:48 hours
• 0.12 Tailwind v4 Note - Things to know at firstnew —24:14 minute
• 0.13 Tailwind CSS Refresher —01:15:50 hours
• 0.14 Sample Video Test —00:13 minute
• 0.15 Troubleshoot protected video playing issues —14:41 minute

                                    Describing the UI 07:35:55

• 1.1 Introduction to React —49:13 minute
• 1.2 React Installation & Development Environment Setup —31:12 minute
• 1.3 How React works: Virtual DOM —29:55 minute
• 1.4 - Basics of React Components: Your first component —28:08 minute
• 1.5 - Basics of React Components: Importing & Exporting Components —11:59 minute
• 1.6 - Basics of JSX: React's Markup - Writing Markup with JSX —18:42 minute
• 1.7 - Basics of JSX: React's Markup - JavaScript in JSX with Curly Braces —21:00 minute
• 1.8 - Understanding Props - Passing Props to a Component —38:18 minute
• 1.9 - Conditional Rendering —29:11 minute
• 1.10 Rendering Lists —21:59 minute
• 1.11 Pure Components: Keeping Components Pure —27:33 minute
• 1.12 Understanding Complex React UI —22:27 minute
• 1.13 Project Tutorial - Tic-Tac-Toe Game —02:06:18 hours

                                    Adding Interactivity 06:03:26

• 2.1 Responding to Events - Adding Event Handlers —22:30 minute
• 2.2 Responding to Events - Event Propagation —26:45 minute
• 2.3 Understanding State: A Component's Memory —26:13 minute
• 2.4 How state works in React - A deep dive —18:25 minute
• 2.5 How Rendering works —14:23 minute
• 2.6 State as a Snapshot —24:42 minute
• 2.7 Queueing a Series of State Updates —17:46 minute
• 2.8 Updating Objects in a State —30:36 minute
• 2.9 Updating Arrays in a State —42:06 minute
• 2.10 Project Tutorial- Tasker: Streamlining Success with React-Powered Task Management —02:20:00 hours

                                    Dive 10:15:43

• 3.1 Declarative vs Imperative UI —16:40 minute
• 3.2 Thinking about UI declaratively in React - Finding Visual States —25:10 minute
• 3.3 Thinking about UI declaratively in React - Finalize React states & Connect Event Handlers —26:50 minute
• 3.4 Choosing the State Structure - Group related state —24:25 minute
• 3.5 Choosing the State Structure - Avoid contradictions in state —10:42 minute
• 3.6 Choosing the State Structure - Avoid redundant state —18:24 minute
• 3.7 Choosing the State Structure - Avoid duplication in state —11:36 minute
• 3.8 Choosing the State Structure - Avoid deeply nested state —40:11 minute
• 3.9 Sharing State Between Components - Lifting state up —30:50 minute
• 3.10 Preserving and Resetting State - Default behavior —32:28 minute
• 3.11 Resetting state at the same position - Changing Default behavior —23:17 minute
• 3.12 Extracting State Logic into a Reducer - Example project —38:35 minute
• 3.13 Three steps to Consolidate state logic with a reducer —26:25 minute
• 3.14 Comparing useState and useReducer - How to write reducers well —18:35 minute
• 3.15 Writing concise reducers with Immer —10:04 minute
• 3.16 Passing Data Deeply with Context - Introduction to Context API —30:40 minute
• 3.17 Using and providing context from the same component —05:09 minute
• 3.18 Context passes through intermediate components —18:32 minute
• 3.19 Some notes and use cases for Context —11:56 minute
• 3.20 Scaling Up with Reducer and Context —35:42 minute
• 3.21 Project Tutorial - CineRental: Your One-Stop React App for Movie Magic and Rentals —02:39:32 hours

                                    Escape Hatches 06:28:06

• 4.1 Referencing Values with Refs —33:54 minute
• 4.2 Manipulating the DOM with Refs - Getting a ref to the node —32:33 minute
• 4.3 Manipulating the DOM with Refs - Accessing another component’s DOM nodes —12:05 minute
• 4.4 Exposing a subset of the API with an imperative handle —09:11 minute
• 4.5 When React attaches the refs & Best practices for DOM manipulation with refs —13:05 minute
• 4.6 Flushing state updates synchronously with flushSync —12:14 minute
• 4.7 Synchronizing with Effects - Overview of Effects vs Events —10:44 minute
• 4.8 Synchronizing with Effects - How to write an Effect —52:12 minute
• 4.9 Synchronizing with Effects - Handling effects firing twice in development —25:29 minute
• 4.10 Synchronizing with Effects - Fetching Data —30:11 minute
• 4.11 Synchronizing with Effects - Putting it all together in one example —14:34 minute
• 4.12 You Might Not Need an Effect - Initial three examples —30:27 minute
• 4.13 You Might Not Need an Effect - Three more examples —37:46 minute
• 4.14 You Might Not Need an Effect - More examples —44:57 minute
• 4.15 You Might Not Need an Effect - Fetching data - Avoid Race Condition —28:44 minute

                                    Escape Hatches 09:12:45

• 4.16 The lifecycle of an Effect —40:49 minute
• 4.17 Effects react to reactive values —29:34 minute
• 4.18 Separating Events from Effects - Part 1 —25:48 minute
• 4.19 Separating Events from Effects - Part 2 —27:36 minute
• 4.20 Separating Events from Effects - Part 3 —19:33 minute
• 4.21 Removing Effect Dependencies - Part 1 —20:29 minute
• 4.22 Removing Effect Dependencies - Part 2 —39:15 minute
• 4.23 Reusing Logic with Custom Hooks - Part 1 —35:13 minute
• 4.24 Reusing Logic with Custom Hooks - Part 2 —19:46 minute
• 4.25 Reusing Logic with Custom Hooks - Part 3 —16:00 minute
• 4.26 Reusing Logic with Custom Hooks - Part 4 —12:38 minute
• 4.27 Reusing Logic with Custom Hooks - Part 5 —29:26 minute
• 4.28 - Performance Optimization —25:48 minute
• 4.29 - Performance Optimization - More Example —13:41 minute
• 4.30 Project Tutorial - Real-time Weather Dashboard —03:17:09 hours

                                    Basics: Ecosystem & Use Cases 11:11:34

• 5.1 React Router v6 Crash Course —02:10:44 hours
• 5.2 API Request with Axios in React —01:04:58 hours
• 5.3 React Query Crash Course —01:51:05 hours
• 5.4 React Hook Form Crash Course —01:35:33 hours
• 5.5 React Suspense and Error Boundaries Explained —01:06:55 hours
• 5.6 React Lazy Load explained —21:43 minute
• 5.7 Animation in React with Framer Motion —01:32:43 hours
• 5.8 How to do Authentication in React with Firebase —01:27:53 hours

                                    Basics: Ecosystem & Use Cases 12:17:38

• 5.9 React Infinite Scroll —39:39 minute
• 5.10 Dive into Uncommon React Hooks —01:46:04 hours
• 5.11 Styling with React - React Styled Components & CSS Modules —49:09 minute
• 5.12 React Virtualized —38:12 minute
• 5.13 React Portal —57:50 minute
• 5.14 React-redux crash course —01:37:36 hours
• Project - FaceHook - Part 1 - Project Setup and Routing —24:36 minute
• Project - FaceHook - Part 2 - Header Fake Log in & Log out —35:30 minute
• Project - FaceHook - Part 3 - Auth Context Private Route —23:28 minute
• Project - FaceHook - Part 4 - JWT Implementation —58:09 minute
• Project - FaceHook - Part 5 - Profile Page Bio and Image —01:11:49 hours
• Project - FaceHook - Part 6 - Profile Post —44:22 minute
• Project - FaceHook - Part 7 - Post Feed —13:40 minute
• Project - FaceHook - Part 8 - New User Registration —14:10 minute
• Project - FaceHook - Part 9 - Like and Comment Posts —19:20 minute
• Project - FaceHook - Part 10 - Create, Edit, Delete Posts —44:04 minute

                                    Mistakes You Must Avoid 02:19:18

• 6.1 Props Drilling and Props Plowing —07:44 minute
• 6.2 Component Nesting & Huge Components —05:03 minute
• 6.3 Unwanted parent tags —05:40 minute
• 6.4 Storing everything as the state —04:11 minute
• 6.5 Multiple useState, useReducer instead —05:32 minute
• 6.6 Using the Index as a key in the loop —05:14 minute
• 6.7 Context over Redux (Putting everything in Redux) —05:09 minute
• 6.8 Over optimising Performance —07:11 minute
• 6.9 Introduction to React Anti pattens - the mistakes you must avoid —02:03 minute
• 6.10 React 19 new Features - What's new in React 19 —01:31:31 hours

                                    Next.js: Installation & Basic                                    Routing 06:15:38

• 7.1 Introduction to Next.js —16:57 minute
• 7.2 Next.js installation & Editor Setup with Tailwind CSS —13:24 minute
• 7.3 Project Structure —09:38 minute
• 7.4 Defining Routes —08:16 minute
• 7.5 Pages and Layouts —27:22 minute
• 7.6 Linking and Navigating —44:15 minute
• 7.7 Loading & Streaming —33:35 minute
• 7.8 Error Handling —29:34 minute
• 7.9 Route Groups —12:07 minute
• 7.10 Dynamic Routes —24:18 minute
• 7.11 Project Tutorial - DocuCraft - Part 1 —01:33:40 hours
• 7.12 Project Tutorial - DocuCraft - Part 2 —25:44 minute
• 7.13 Project Tutorial - DocuCraft - Part 3 —28:49 minute
• 7.2-new Next.js 15 installation issues & note —07:59 minute

• 8.1 Project Organization & File colocation —16:23 minute
• 8.2 Parallel Routes —20:12 minute
• 8.3 Unmatched & Intercepting Routes —25:10 minute
• 8.4 Combining Parallel & Intercepting Routes —16:06 minute
• 8.5 Intro to Route Handlers - GET, POST, PATCH, DELETE —38:46 minute
• 8.6 More with Route Handlers - Headers, cookies, caching & redirecting —34:28 minute
• 8.7 Middlewares —34:16 minute
• 8.8 Not found page —12:11 minute
• 8.9 Internationalization —34:50 minute
• Project Tutorial - PhotoFeed - Part 1 —17:00 minute
• Project Tutorial - PhotoFeed - Part 2 —08:23 minute
• Project Tutorial - PhotoFeed - Part 3 —26:47 minute
• Project Tutorial - PhotoFeed - Part 4 —22:46 minute
• Project Tutorial - PhotoFeed - Part 5 —26:31 minute

                                    Revalidation 04:46:14

• 9.1 Data Fetching - on the server with 'fetch' —36:32 minute
• 9.2 Data Fetching - on the server & client with third-party libraries & route handlers —13:18 minute
• 9.3 Server Action - Introduction & Example with MongoDB Database —39:06 minute
• 9.4 More with Server Action - Different Use Cases —33:18 minute
• 9.5 Data Fetching Patterns and Best Practices - Sequential & Parallel Data Fetching —28:16 minute
• 9.6 Caching in Next.js —27:29 minute
• Project - EcoVista - Part 1 - Intro & Project Setup —06:23 minute
• Project - EcoVista - Part 2 - API Development —13:30 minute
• Project - EcoVista - Part 3 - Create Slot Skeletons —19:38 minute
• Project - EcoVista - Part 4 - Detect Geolocation & Reroute —13:46 minute
• Project - EcoVista - Part 5 - Slots ready with APIs —26:30 minute
• Project - EcoVista - Part 6 - Location info switcher —14:47 minute
• Project - EcoVista - Part 7 - Direct Route —13:41 minute

                                    Optimizing 06:49:56

• 10.1 Next.js Rendering explained —29:54 minute
• 10.2 Next.js server vs client component explained —23:05 minute
• 10.3 Composition Patterns —37:35 minute
• 10.4 Image Optimization —45:03 minute
• 10.5 Font Optimization —21:53 minute
• 10.6 Metadata —32:16 minute
• 10.7 Static Assets —04:07 minute
• 10.8 Lazy Loading —13:01 minute
• 10.9 Third-party Libraries —10:52 minute
• 10.10 Project Eventry - Part-1 - Introduction & Project Structure —30:02 minute
• 10.11 Project Eventry - Part-2 - Setting up MongoDB and UI from the data from database —39:26 minute
• 10.12 Project Eventry - Part-3 - Login, Register Functionality, and Auth Context —46:26 minute
• 10.13 Project Eventry - Part-4 - Implementing Interested functionality —21:28 minute
• 10.14 Project Eventry - Part-5 - Implementing Going to event and Send Email functionality —20:23 minute
• 10.15 Project Eventry - Part-6 - How to Setup Google Event Schema for SEO —08:07 minute
• 10.16 Project Eventry - Part-7 - How to set up Dynamic Meta Data —03:38 minute
• 10.17 Project Eventry - Part-8 - How to implement server side search —11:51 minute
• 10.18 Project Eventry - Part-9 - What is the right way to use Suspense and Image optimization —10:49 minute

                                    Ecosystem & Use Cases 11:50:58

• Next-auth crash course —01:02:08 hours
• TypeScript crash course —01:26:25 hours
• Project StaySwift - Part-1 - Introduction and Component Structure —32:15 minute
• Project StaySwift - Part-2 - Database setup, data design, Creating schema, model, testing queries —20:04 minute
• Project StaySwift - Part-3 - Setup Next-Auth Oauth2 with Google. —49:32 minute
• Project StaySwift - Part-4 - Implement User Registration —12:52 minute
• Project StaySwift - Part-5 - Show Authenticated User details in Profile. —05:02 minute
• Project StaySwift - Part-6 - Implement Protected Routes —06:32 minute
• Project StaySwift - Part-7 - Hotel Listing and Hotel Details from DB data —28:30 minute
• Project StaySwift - Part-8 - Implementing Search —47:55 minute
• Project StaySwift - Part-9 - Implement Hotel Booking Functionality —22:14 minute
• Project StaySwift - Part-10 - Implement My Profile Booking List —10:29 minute
• Project StaySwift - Part-11 - Implement Hotel Filter Functionality and End Notes —28:57 minute
• GraphQL - Part 1 - Introduction to GraphQL —49:46 minute
• GraphQL - Part 2 - Setting up Next.js project, GraphQl CLient, Writintg Queries —32:31 minute
• GraphQL - Part 3 - Page Header Footer —09:23 minute
• GraphQL - Part 4 - Post list, latest post, post cards —28:03 minute
• GraphQL - Part 5 - Post details —10:36 minute
• GraphQL - Part 6 - Filter posts by Tags, Home Page, and Refrences —18:36 minute
• Testing and Debugging crash course —01:12:29 hours
• Prisma Crash Course —01:16:39 hours

                                    - Development to Deployment 25:05:31

• Project EduConnect - Part-1 - Introduction and Project Overview, Database Design, Pages and Components, Installation, shadcnUi, folder structure —59:13 minute
• Project EduConnect - Part-2 - Model Creation and Query Testing —30:39 minute
• Project EduConnect - Part-3 - Home Page, Course List, Explore Now —01:02:57 hours
• Project EduConnect - Part-4 - Course Details Page —01:27:36 hours
• Project EduConnect - Part-5 - Register and Become an Instructor, Login —55:36 minute
• Project EduConnect - Part-6 - Protected route —35:21 minute
• Project EduConnect - Part-7 - JWT Refresh Token —52:19 minute
• Project EduConnect - Part-8 - Stripe Integration —43:52 minute
• Project EduConnect - Part-9 - Enrol and Enrolment Success, Send Email —01:08:22 hours
• Project EduConnect - Part-10 - Reset Password and Account Update —59:42 minute
• Project EduConnect - Part-11 - Database Design restructure, Course Details, Calculations —01:02:28 hours
• Project EduConnect - Part-12 - Dashboard - Features, Analytics, Profile pictures, Avatar Logout —01:01:05 hours
• Project EduConnect - Part-13 - Dashboard - Course data, Review, Enrolment —01:06:27 hours
• Project EduConnect - Part-14 - Dashboard - Course create, Meta data updates, Image upload —01:40:56 hours
• Project EduConnect - Part-15 - Dashboard - Module creation, Reordering of modules —29:51 minute
• Project EduConnect - Part-16 - Dashboard - Module page, Title update, Lesson added, Reordered, Course page back link —54:55 minute
• Project EduConnect - Part-17 - Dashboard - Lesson data update, Video, Title, Lesson visibility —51:38 minute
• Project EduConnect - Part-18 - Lesson publish unpublish delete,⁠Module publish,⁠Course publish unpublish delete —01:05:32 hours
• Project EduConnect - Part-19 - Quizset - Add quiz, Add quizset to course, Course progress and Bugfix —01:58:07 hours
• Project EduConnect - Part-20 - Lesson page structures, ⁠Links to lesson, ⁠Lesson authz authn guard —49:45 minute
• Project EduConnect - Part-21 - Lesson side bar actual data, Lesson states maintained, ⁠Lesson unique URL —55:53 minute
• Project EduConnect - Part-22 - Video player for lesson, Update watch history, state changes on ui on lesson completion —01:00:12 hours
• Project EduConnect - Part-23 - Report update on lesson and module completion, Show the course completion progress in realtime —32:56 minute
• Project EduConnect - Part-24 - Certificate Download —49:11 minute
• Project EduConnect - Part-25 - Quiz Submission and End This Project —01:30:58 hours