Building a Modern React Frontend on a NestJS API

Overview

Build a full-stack reading tracker app using React and modern data-fetching tools. You’ll implement authentication, browse a book catalog, manage a personal reading shelf, and track progress while learning React Query, routing, API integration, and state management.

Syllabus

Course 1: React Fundamentals and Project Setup
Course 2: Layout, Routing, and Core UI Patterns in React
Course 3: API Integration and User Authentication
Course 4: Building a Dynamic Data Catalog
Course 5: Personalized Shelf and Progress Tracking

Courses

0 reviews
2 hours
View details

Start building the ShelfPilot reading tracker while learning the foundations of React. You’ll create your first components with JSX, pass data using props, and manage dynamic UI with state, all while setting up a modern development environment with TypeScript and Tailwind CSS.
0 reviews
2 hours
View details

Transform your app into a multi-page experience by building a persistent layout and configuring React Router. You’ll implement navigation, reusable UI components, and a searchable catalog powered by mock data while learning key patterns for structuring React applications.
0 reviews
2 hours
View details

Connect your React frontend to a backend API and implement a complete authentication system. You’ll build login and registration flows, manage JWT tokens, protect routes, and use React Context to provide global authentication state across the app.
0 reviews
2 hours
View details

Upgrade the catalog from static data to a fully dynamic interface powered by TanStack Query. You’ll fetch and cache server data, implement searching, sorting, and pagination with URL parameters, and build detailed book pages using dynamic routes.
0 reviews
3 hours
View details

Build a personalized reading shelf where users can track and update their progress. You’ll fetch and filter shelf data, implement optimistic updates for a smooth UX, add form validation with React Hook Form and Zod, and display reading statistics in a compact dashboard.