React Query Presentation

A Spectacle presentation about React Query with live editable code examples and a real API server.

Features

• 🎯 Live Code Examples - Edit React Query code in real-time
• 🚀 Real API Server - File-based todo API for demonstrations
• 💾 File Storage - Todos are persisted to todos.json
• 🎨 Beautiful UI - Modern styling with Spectacle
• ⚡ Hot Reload - Instant updates during development

Quick Start

Option 1: Run Everything Together (Recommended)

# Install dependencies
npm install

# Start both server and presentation
npm run dev:full

This will start:

• Todo API server on http://localhost:3011
• Presentation on http://localhost:3010

Option 2: Run Separately

# Terminal 1: Start the API server
npm run server

# Terminal 2: Start the presentation
npm run dev

API Endpoints

The server provides a RESTful API for todos:

• GET /api/todos - Get all todos (with optional pagination)
• POST /api/todos - Create a new todo
• PUT /api/todos/:id - Update a todo
• DELETE /api/todos/:id - Delete a todo
• GET /api/health - Health check

Example API Usage

# Get all todos
curl http://localhost:3011/api/todos

# Create a new todo
curl -X POST http://localhost:3011/api/todos \
  -H "Content-Type: application/json" \
  -d '{"title": "New Todo", "completed": false}'

# Get paginated todos
curl "http://localhost:3011/api/todos?page=0&limit=5"

Data Storage

Todos are stored in todos.json in the project root. The file is automatically created with sample data when the server starts.

Available Scripts

• npm start - Start the presentation only
• npm run dev - Start the presentation in development mode
• npm run server - Start the API server only
• npm run dev:full - Start both server and presentation
• npm run build - Build for production

Technologies Used

• Frontend: React, Spectacle, React Live
• Data Fetching: TanStack React Query v5
• Backend: Express.js
• Storage: File-based JSON storage
• Build Tool: Webpack

Presentation Content

The presentation covers:

1. Introduction to React Query
2. Basic Queries - Fetching data with useQuery
3. Mutations - Updating data with useMutation
4. Infinite Queries - Pagination and infinite scrolling
5. Key Features - Caching, background updates, etc.
6. Setup Instructions
7. Best Practices

Each section includes live, editable code examples that connect to the real API server.