This repository contains comprehensive learning materials for a Level 3 React development course spanning 7 weeks. In this course, You’ll learn how to create full-stack React applications with database integration using Supabase. The curriculum emphasizes hands-on learning through mini-projects, coding exercises (katas), and a culminating capstone project that demonstrates mastery of modern web development skills.
Learning Goal: Learn Node.js fundamentals, ES6 features, server concepts, and form handling.
Technical Focus: You’ll work with npm modules, ES6 arrow functions, template literals, and Express.js routing to build server-side applications that process HTTP requests and serve dynamic content.
What You’ll Build: You’ll learn the fundamentals of server-side programming using Node.js and Express.js. You’ll build interactive web applications that handle form submissions, process user input, and generate dynamic content. By the end of the week, you’ll have created your own Mad Libs game that demonstrates server routing, static file serving, and template rendering.
Learning Goal: Learn about Components and how they can be reused, and how props can be used to customize them.
Technical Focus: You’ll master JSX syntax, component composition patterns, prop destructuring, and the children prop to create modular, reusable UI components.
What You’ll Build: You’ll dive into React’s component-based architecture and learn how to use props to pass data between components. You’ll build your own personal portfolio website using multiple React components, mastering JSX syntax, component composition, and the children prop. This foundation will prepare you for more complex React applications.
Learning Goal: Make your components interactive by managing state and responding to user events.
Technical Focus: You’ll implement useState hooks, event handlers (onClick, onChange), state updates, and conditional rendering to create dynamic, interactive user interfaces.
What You’ll Build: You’ll master React state management with the useState hook and learn how to handle user interactions. You’ll build an interactive clicker game that teaches you how to update component state, respond to user events, and create dynamic user interfaces. This week establishes the core patterns you’ll use for building interactive React applications.
Learning Goal: Master array manipulation patterns to process and transform data efficiently.
Technical Focus: You’ll implement for loops for map, reduce, and filter patterns, work with array methods, and build multi-page applications with complex data processing and state management.
What You’ll Build: You’ll work with arrays and implement common list traversal patterns (map, reduce, filter) using explicit for loops before exploring built-in array methods. You’ll participate in a hackathon-style project where you build multi-page applications with complex data manipulation, putting all the patterns you’ve learned into practice.
Learning Goal: Connect your React app to a real database and build full-stack applications with data persistence.
Technical Focus: You’ll work with Supabase client libraries, implement CRUD operations, configure Row Level Security policies, handle async/await patterns, and integrate database queries with React state management.
What You’ll Build: You’ll learn modern database development using Supabase (PostgreSQL) and integrate databases with your React applications. You’ll master database design, Row Level Security (RLS), CRUD operations, and build full-stack applications. The week includes hands-on practice with React Katas and culminates in your own comprehensive database mini-project.
Learning Goal: Demonstrate mastery by building a complete full-stack application from scratch.
Technical Focus: You’ll integrate all learned technologies (React, Supabase, Node.js concepts) to build a production-ready application with authentication, complex data relationships, advanced state management, and deployment strategies.
What You’ll Build: You’ll apply everything you’ve learned to build your own comprehensive React + Supabase application with multiple tables, forms, and list patterns. Your capstone project will demonstrate your mastery of full-stack development skills, including database design, authentication, data visualization, and deployment. You’ll present your project and reflect on your incredible learning journey.
Learning Goal: Strengthen code quality by adopting automated testing workflows and refactoring application logic into pure, testable functions.
Technical Focus: You’ll configure Vitest within Vite projects, practice Behavior-Driven Development using expect-style assertions, refactor capstone logic into reusable helpers, and exercise fetch patterns for working with external APIs.
What You’ll Build: You’ll construct a suite of unit tests that validate standalone functions, refactor your capstone project to rely on pure functions, and expand existing fetch-based exercises to render mapped data. The result is a more maintainable codebase with executable documentation.