⚛️ Complete React Course — Maximilian Schwarzmüller (Udemy Course)

My personal solutions, notes, and practice projects from "React - The Complete Guide (incl. Next.js, Redux)" by Maximilian Schwarzmüller on Udemy.

This repo is updated gradually, section by section, as I progress through the course.

---

📊 Live Progress

Lectures completed:  402 / 772
Progress:            [██████████████████░░░░░░░░░] 60%
Hours logged:        ~30h 43min / ~71h 30min
Sections finished:    16 / 40

💡 I update this block manually as I complete sections. Eventually this could be scripted later on and handled by AI (see Ideas for automation).

---

📚 Table of Contents

• About This Repo
• Course Roadmap & Progress Tracker
• Repo Structure
• Tech Stack
• How to Run a Project
• Key Concepts Log
• Ideas for Automation
• Resources
• Connect

---

📖 About This Repo

I'm an first year computer science student at USTHB working through this course to build a solid full-stack foundation, with the long-term goal of shipping real SaaS products. Each numbered folder in this repo corresponds to a section (or practice project) of the course, containing my own solutions, tweaks, and experiments — not a copy-paste of the instructor's code.

Goals for this repo:

• Track progress through all 32 sections in public (well, private for now 👀)
• Build muscle memory with core React patterns before moving into Next.js/SaaS work
• Have a reference I can point back to later (and eventually link in scholarship / internship applications)

---

🗺️ Course Roadmap & Progress Tracker

Click a section to expand it. Check the box once a section is fully complete.

✅ Section 3 — React Essentials: Components, JSX, Props, State & More — 41/41 lectures · 2h 27min · 01-react-essentials

• Components & JSX fundamentals
• Props & component composition
• useState and event handling
• Conditional rendering & rendering lists
• Styling basics

Status: ✅ Complete — pushed to 01-react-essentials/

✅ Section 4 — React Essentials: Deep Dive — 42/42 lectures · 3h 17min · 02-react-essentials-deep-dive

• Deeper dive into state & the "stale state" trap
• Updating complex/nested state
• Deriving state, key prop deep-dive
• Multiple states vs. one state object
• Two-way binding

Status: ✅ Complete — pushed to 01-react-essentials/

✅ Section 5 — Practice Project: React Essentials — 8/8 lectures · 54min · 03-practice-project

Hands-on project applying everything from Sections 3 & 4. Status: ✅ Complete — pushed to 01-react-essentials/

✅ Section 6 — Styling React Components — 23/23 lectures · 1h 55min · 04-styling

• Vanilla CSS vs. CSS Modules
• Styled Components
• Tailwind CSS in React

Status: ✅ Complete — pushed to 01-react-essentials/

✅ Section 7 — Debugging React Apps — 7/7 lectures · 29min · 05-debugging

• Reading error messages & stack traces
• React DevTools
• Strict Mode

Status: ✅ Complete — pushed to 01-react-essentials/

✅ Section 8 — Working with Refs & Portals — 22/22 lectures · 1h 26min · 06-refs-portals

• useRef for DOM access & values
• Forwarding refs
• useImperativeHandle
• React Portals

✅ Section 9 — Practice Project: Project Management App — 16/16 lectures · 2h 4min · 07-project-management-app

Components, state, refs & more combined into a full mini-app.

✅ Section 10 — React's Context API & useReducer — 15/15 lectures · 1h 19min · 08-context-usereducer

• Prop drilling problem
• createContext / useContext
• useReducer for complex state logic
• Combining Context + Reducer

✅ Section 11 — Handling Side Effects & useEffect() — 16/16 lectures · 1h 21min · 09-side-effects-useeffect

• What are side effects
• useEffect dependencies
• Cleanup functions
• Common pitfalls (infinite loops, race conditions)

✅ Section 12 — Practice Project: Quiz App — 12/12 lectures · 2h 1min · 10-quiz-app

Full app built around effects, timers, and state.

✅ Section 13 — Behind the Scenes of React & Optimization — 13/13 lectures · 1h 21min · 11-optimization

• Virtual DOM & reconciliation
• memo, useMemo, useCallback
• When (not) to optimize

✅ Section 14 — Class-based Components — 10/10 lectures · 1h · 12-class-components

• Class component syntax
• Error boundaries (class-only feature)
• Lifecycle methods

✅ Section 15 — Sending HTTP Requests — 16/16 lectures · 1h 25min · 13-http-requests

• fetch in useEffect
• Loading & error states
• Sending data (POST/PUT/DELETE)

✅ Section 16 — Building Custom React Hooks — 7/7 lectures · 40min · 14-custom-hooks

• Rules of hooks
• Extracting reusable logic

⬜ Section 17 — Working with Forms & User Input — 0/16 lectures · 1h 49min · 15-forms

• Controlled vs. uncontrolled inputs
• Validation strategies
• useRef vs. state for forms

⬜ Section 18 — Handling Forms via Form Actions — 0/15 lectures · 1h 33min · 16-form-actions

• React 19 form actions
• useActionState
• useFormStatus

⬜ Section 19 — Practice Project: Food Order App — 0/19 lectures · 3h 21min · 17-food-order-app

Cart logic, Context, forms, and HTTP combined into a full-stack-feeling app.

⬜ Section 20 — Diving into Redux — 0/24 lectures · 2h 15min · 18-redux

• Redux core concepts (store, actions, reducers)
• Redux Toolkit
• Connecting Redux to React

⬜ Section 21 — Advanced Redux — 0/16 lectures · 1h 54min · 19-advanced-redux

• Async logic (thunks)
• Redux + backend integration

⬜ Section 22 — Building a Multi-Page SPA with React Router — 0/44 lectures · 3h 46min · 20-react-router

• Routes, nested routes, dynamic routes
• Loaders & actions
• Navigation & error handling

⬜ Section 23 — Adding Authentication to React Apps — 0/15 lectures · 1h 13min · 21-authentication

• Auth tokens & protected routes
• Persisting login state

⬜ Section 24 — Deploying React Apps — 0/7 lectures · 32min · 22-deployment

• Production builds
• Hosting options & deployment steps

⬜ Section 25 — React Query / TanStack Query — 0/20 lectures · 2h 54min · 23-react-query

• Server state vs. client state
• Caching, refetching, mutations

⬜ Section 26 — Introduction to Next.js — 0/79 lectures · 6h 59min · 24-nextjs-intro

The biggest section in the course — file-based routing, data fetching, API routes, and more.

⬜ Section 27 — React Server Components & Server Actions — 0/11 lectures · 53min · 25-server-components

• RSC vs. client components
• Server actions in depth

⬜ Section 28 — Animating React Apps — 0/21 lectures · 1h 57min · 26-animations

• CSS transitions in React
• Animation libraries (Framer Motion, etc.)

⬜ Section 29 — React Patterns & Best Practices — 0/12 lectures · 1h 10min · 27-patterns-best-practices

• Component composition patterns
• Code organization at scale

⬜ Section 30 — Replacing Redux with React Hooks — 0/15 lectures · 55min · 28-hooks-vs-redux

• When you don't need Redux
• Context + hooks as a lighter alternative

⬜ Section 31 — Testing React Apps (Unit Tests) — 0/13 lectures · 1h 11min · 29-testing

• Vitest / Jest basics
• React Testing Library

⬜ Section 32 — React + TypeScript — 0/25 lectures · 2h 35min · 30-react-typescript

• Typing props, state, and events
• Generics in components & hooks

Note: Sections 1–2 (course intro / setup) aren't tracked here since they involve no code to push. Folder names above are my own naming convention (01-, 02-, ...) rather than the course's raw section numbers — I'll update this table if I rename anything as I go.

---

🗂 Repo Structure

React-Course/
├── 01-react-essentials/
├── 02-react-essentials-deep-dive/
├── 03-practice-project/
├── 04-styling/
├── ...
├── 30-react-typescript/
└── README.md

Each folder is a self-contained project with its own package.json, so it can be run independently.

---

🛠 Tech Stack

Tool	Purpose
⚛️ React	UI library — core focus of the course
⚡ Vite	Dev server & build tool for most sections
▲ Next.js	Introduced from Section 26 onward
🔄 Redux Toolkit	State management (Sections 20–21)
🌐 React Router	Client-side routing (Section 22)
🔁 TanStack Query	Server-state management (Section 25)
🟦 TypeScript	Introduced in Section 32
🧪 Vitest / RTL	Testing (Section 31)

---

▶️ How to Run a Project

Each section folder is independent. To run one:

cd 01-react-essentials
npm install
npm run dev

Then open the local URL Vite prints in your terminal (usually http://localhost:5173).

---

🧠 Key Concepts Log

A running list of "aha" moments and gotchas I want to remember — I'll keep expanding this as I go.

• Section 3: JSX is syntactic sugar for React.createElement() calls — it's not HTML.
• Section 4: (to fill in as I complete this section)

---

🤖 Ideas for Automation

Things I might build later to make this README maintain itself:

• A small Node script that reads folder names + a progress.json and regenerates the progress bar automatically
• GitHub Action that updates the "last updated" badge on every push
• Auto-generate the section table from a single source-of-truth JSON file

---

📎 Resources

• Course on Udemy
• Official React Docs
• Official Next.js Docs
• Redux Toolkit Docs

---

🔗 Connect

Slim — L1 Informatique @ USTHB · Building toward full-stack / SaaS engineering

GitHub

---

⭐️ If you're also taking this course, feel free to fork this structure for your own progress tracking.