8000 GitHub - Learn-with-Sumit/rnext: Central Code Repository - Reactive Accelerator React-Next.js course by Learn with Sumit
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Learn-with-Sumit/rnext

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
README.md
README.md
 
 

Repository files navigation

Youtube Facebook


Logo

Reactive Accelerator

Table of Contents

CODE RUN OUTLINE CONTACT
How to run Outline Contact us

How to run

Different lessons taught in this Reactive 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 in 1.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 follow this 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.

Outline

📘 Reactive Accelerator Course Outline

Module 0 - Introduction to course 07:12:17

  • 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

Module 1 - Getting started with React:

                                    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

Module 2 - Going Deep into React :

                                    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

Module 3 - React State Management Deep

                                    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 S 8000 tructure - 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

Module 4 - Part 1 - Advanced React:

                                    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

Module 4 - Part 2 - Advanced React:

                                    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

Module 5 - Part-1 - React Beyond

                                    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

Module 5 - Part-2 - React Beyond

                                    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

Module 6 - React Anti patterns:

                                    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

Module 7 - Getting started with

                                    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

Module 8 - Advanced Routing 05:33:49

  • 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

Module 9 - Data Fetching, Caching &

                                    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

Module 10 - Rendering &

                                    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

Module 11 - Next.js Beyond Basics -

                                    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

Module 12 - Final Project - EduConnect

                                    - 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 - 64D6 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

Contact us

Facebook LinkedIn Instagram mail

About

Central Code Repository - Reactive Accelerator React-Next.js course by Learn with Sumit

learnwithsumit.com/rnext

Topics

javascript testing mongodb nextjs react-router-dom prisma tailwindcss next-auth

Resources

Readme
Activity
Custom properties

Stars

157 stars

Watchers

10 watching

Forks

125 forks
Report repository

Releases

No releases published

Packages

No packages published
0