This course is organized as a progressive build where students start with basic concepts and gradually add advanced features. Each section includes:
/start- Starting point for that section/checkpoint- State after instructor demonstration/complete- Final solution after lab completion
react-data-cascadiajs /
├── 01-server-components/
│ ├── start/ # Client Components (useEffect + useState)
│ ├── checkpoint/ # Post-demo: Basic Client Components
│ └── complete/ # Post-lab: Server Components + Suspense
├── 02-react-patterns/
│ ├── start/ # Basic components
│ ├── checkpoint/ # Post-demo: Added React.memo
│ └── complete/ # Post-lab: Full optimization + error boundaries
├── 03-tanstack-query/
│ ├── start/ # Server Components only
│ ├── checkpoint/ # Post-demo: Basic TanStack Query setup
│ └── complete/ # Post-lab: Mutations + optimistic updates
├── 04-advanced-patterns/
│ ├── start/ # Basic Query setup
│ ├── checkpoint/ # Post-demo: Search implementation
│ └── complete/ # Post-lab: Infinite scrolling + caching
└── labs/ # Lab instructions for each section
- Server Components
- Working with Data
- React Patterns
- Tanstack Query
- Advanced Patterns
https://snowtooth-api-rest.fly.dev/
By the end of this course, students will be able to:
- Convert between Server and Client Components appropriately
- Implement proper loading and error states
- Use TanStack Query for complex data management
- Apply React performance optimization patterns
- Build real-time, responsive user interfaces
- Deploy production-ready React applications
- React Docs (beta) – The modern React documentation site.
- TanStack Query Docs – Official docs for React Query / TanStack Query.
- TanStack GitHub Repo – Source code, issues, and discussions.
- Next.js Docs – Official docs for Next.js (framework by Vercel).
- Getting Started with TanStack Query – Introductory guide from the official docs.
- React Query: Data Fetching Made Simple – Great blog series by TkDodo.
- React Query Tutorial (freeCodeCamp) – Beginner-friendly walkthrough.
- TanStack Query v5 Upgrade Guide – Important for understanding changes if migrating.
- Data Fetching in Next.js – Overview of data fetching strategies in Next.js.
- REST API with Fetch – MDN guide for working with Fetch.
- Axios GitHub – Popular HTTP client for API requests.
- JSONPlaceholder – Free fake REST API for testing.
- PokéAPI – Fun dataset for practice with queries.
- Vercel Postgres – Vercel’s hosted Postgres database.
- Vercel KV – Managed Redis-compatible key-value store.
- React Query Best Practices (TkDodo) – Covers caching, invalidation, and more.
- React Query Performance Optimizations – Official guide on defaults and performance.
- State Management with React Query – Explains how React Query overlaps/replaces traditional state management.
- Next.js Caching & Revalidation – How caching integrates with data fetching on Vercel.
- Infinite Queries – Loading paginated or infinite data.
- Mutations – For POST, PUT, DELETE requests.
- Optimistic Updates – Handle UI updates before the server responds.
- Suspense Mode – Experimental React Suspense integration.
- Next.js Server Actions – Write mutations as server-side functions.
- Vercel Docs – Main documentation hub.
- Vercel Deployment Guide – How to deploy apps to Vercel.
- Next.js App Router – Official docs for the modern App Router.
- Streaming & Suspense in Next.js – Key for real-time data UX.
- Vercel AI SDK – AI integration kit, often used alongside data fetching.
- Vercel Examples GitHub – Code samples, many with Next.js + data fetching patterns.
- Next.js & TanStack Query Example – Sample showing them together.
- TanStack Discord – Active community for help and discussions.
- TanStack YouTube Channel – Video tutorials, talks, and updates.
- Awesome TanStack Query – Curated community resources.
- Vercel YouTube Channel – Talks, tutorials, and product launches.