Complete React, Next.js & TypeScript End-to-End Projects

Master React and TypeScript from basics to advanced concepts and build a production-grade app for discovering video games with dark and light modes, search, filters, and dynamic page titles.

Develop reusable React components to build modular interfaces as part of complete end-to-end projects using React, Next.js, and TypeScript.

Explore styling strategies for React components, including vanilla CSS, CSS modules, and CSS-in-JS with styled components, emotion, and polish, and evaluate popular UI libraries.

Master component state management in React as you build end-to-end projects with Next.js and TypeScript.

Build dynamic forms using React, Next.js, and TypeScript, implementing validation, state management, and data submission for end-to-end projects.

Master connecting a React, Next.js, and TypeScript frontend to the backend, enabling end-to-end data flow and API integration in real-world projects.

Build a video game discovery app using React, Next.js, and TypeScript; begin the end-to-end project journey in part 1 of this course.

advance a video game discovery app in part 2 by building end-to-end features with react, next.js, and typescript.

Master fetching and caching data with React Query using the query hook. Configure automatic retries and refresh, and handle typed errors for robust data fetching.

Master fetching and updating data with React Query in a React project for end-to-end projects.

Explore global state management foundations in React and TypeScript, focusing on how to share data across components within end-to-end projects.

Explore global state management in end-to-end React, Next.js, and TypeScript projects, part 2 of the series. Apply techniques to manage shared state across components efficiently.

Discover how Redux centralizes application state in a single store, enables predictable data flow, and supports time travel debugging and state caching across UI components.

Explore functional programming principles in JavaScript within end-to-end projects using React, Next.js, and TypeScript today.

Master Redux fundamentals for React applications within end-to-end projects in the complete React, Next.js and TypeScript course.

Learn to build Redux from scratch by creating a private store state with get state, dispatch, and subscribe, wiring a reducer and actions to update and notify changes.

Explore redux middleware, implement and register custom middleware like logger, learn currying concepts, and use thunk for async actions in Redux Toolkit workflows.

Learn to consume APIs within React, Next.js, and TypeScript end-to-end projects by fetching data, handling responses, and integrating API calls into your application.

Master testing Redux applications within a complete React, Next.js, and TypeScript end-to-end project, covering testing strategies and practical implementation.

Master the basics of TypeScript, including static typing on JavaScript, set up Node and npm, install TypeScript compiler, configure tsconfig.json, enable source maps, and debug with VS Code launch.json.

Explore the fundamentals of TypeScript, including built-in types (any, enums, tuples, arrays), functions and objects, type inference, and key compiler options like no implicit any.

Explore advanced TypeScript concepts, including type aliases, unions and intersections, literal and nullable types, optional chaining, type guards, and the unknown and never types, with practical examples.

Explore classes, interfaces, and object-oriented programming to understand how to model data and behavior in software. See how these concepts shape code organization and interface definitions in practical end-to-end projects.

Build a practical reminders API with Node, Express, and TypeScript, using a reminder class, DTO, and in-memory storage via a router with POST and GET endpoints.

Explore how frontend works from HTML structure to CSS styling and JavaScript interactivity. Learn how the DOM, render tree, and event listeners enable fast, responsive user experiences with modern frameworks.

Learn to install and configure Git, create snapshots, explore project history, and manage branching, merging, and collaboration via GitHub, with command-line and graphical user interface tools.

Learn how to create and manage snapshots within a complete React, Next.js, and TypeScript end-to-end project workflow.

Build a browsing history feature within complete React, Next.js, and TypeScript end-to-end projects, mastering routing, state management, and data persistence.

Explore branching in complete React, Next.js, and TypeScript end-to-end projects, building flexible control flow and scalable project structure.

Explore centralized and distributed git workflows, use push, fetch, pull, merge or rebase, and leverage forking, pull requests, and issues for open source and private collaboration.

Rewrite historical data flows within a complete React, Next.js, and TypeScript end-to-end project, applying practical patterns across the stack.

Explore how React builds fast, interactive web apps with a component-based architecture, the Virtual DOM, and state and props, powering SPAs, API integration, and deployment.

Begin the complete React, Next.js and TypeScript end-to-end projects course by getting started with Next.js.

Explore global styles, CSS modules, Tailwind and DaisyUI to style Next.js apps; learn when to use global vs component styles, and apply themes with DaisyUI.

Master routing and navigation in React, Next.js and TypeScript within end-to-end projects. Apply these core concepts to build coherent navigation flows across modern web apps.

builds and demonstrates Next.js API routes to create, read, update, and delete data, with Zot-based validation and explicit status codes for robust backend behavior.

Learn to send emails and apply optimizations within complete end-to-end React, Next.js, and TypeScript projects.

Kick off your Next.js project with a real-world issue tracker using TypeScript, Tailwind, Prisma, and NextAuth, covering setup, project structure, and a dynamic navigation bar with active link highlighting.

Create and manage issues to plan tasks and track progress in end-to-end React, Next.js, and TypeScript projects. Apply practical issue workflows to organize work across a modern frontend stack.

View and understand issues within a complete React, Next.js, and TypeScript end-to-end project, highlighting how issues are presented and navigated.

Updating issues across complete React, Next.js and TypeScript end-to-end projects; updating issues across complete React, Next.js and TypeScript end-to-end projects.

Implement a delete issue feature with a red delete button and an alert dialog, wired to an api endpoint to remove the issue while handling errors with a spinner.