🚀 TanStack Query Crash Course: Meetup Application

Welcome! Before diving into the project details, if you find this repository helpful, please support my work:

• 🎥 Subscribe to the tapaScript YouTube Channel for high-quality web development tutorials.
• ⭐ Star this repository to show your support and make it visible to others!
• 💖 Sponsor my works on GitHub to help me continue creating open-source projects and free educational content.

---

🔥 The Tanstack Router Crash Course Video

📖 Overview

This repository is a crash course project designed to demonstrate the power of TanStack Query (React Query) v5 in modern React 19 applications, compared against traditional state-based data fetching techniques.

The repository consists of two main components (projects) located in their respective directories:

1. meetup-mock-api: A lightweight mock REST API server powered by json-server.
2. meetup-dashboard: A modern frontend dashboard built with React 19, Vite, and TailwindCSS 4, showcasing how to consume, mutate, and manage the server-side state.

---

📁 Project Structure

tanstack-query-crash-course/
├── meetup-mock-api/          # JSON-Server backend (Mock API)
│   ├── db.json               # Local database storage containing events
│   └── package.json          # Node scripts and dependencies
│
└── meetup-dashboard/         # Vite + React 19 + Tailwind CSS 4 frontend
    ├── src/
    │   ├── components/
    │   │   ├── traditional/   # Fetching implementation using useEffect
    │   │   └── with-query/    # Fetching implementation using TanStack Query
    │   ├── hooks/
    │   │   └── useMeetups.ts  # Custom hooks wrapper for TanStack Queries & Mutations
    │   ├── App.tsx            # Main application mounting container
    │   └── main.tsx           # Entry point config with QueryClientProvider & DevTools
    └── package.json          # Frontend packages and dependencies

---

🛠️ Detailed Project Breakdown

1. Mock API Server (meetup-mock-api)

This backend provides a quick, lightweight REST endpoint. It runs a json-server that watches db.json and exposes a set of API endpoints.

• Technology Stack: Node.js, json-server
• Database: db.json (contains meetup events with properties: id, title, date, location, description, attendees, city, tech, and rsvpd)
• Endpoints Provided:
  • GET /events - Fetch all meetup events.
  • POST /events - Add a new meetup event.
  • POST /events/:id/rsvp - Toggle the RSVP status of a meetup (simulated delay of 1.5 seconds included on frontend mutation to show optimistic update state).

2. Frontend Dashboard (meetup-dashboard)

A client application designed to highlight the differences between manual API fetching and TanStack Query management. It uses React 19, Vite for speedy builds, and Tailwind CSS 4.x for styling.

• Traditional Implementation (src/components/traditional):
  • Demonstrates how data fetching is traditionally handled using useState and useEffect.
  • Highlights the boilerplate required to manage isLoading, error state, race conditions, cleanup functions (unmounting component checks), and caching.
• TanStack Query Implementation (src/components/with-query):
  • Demonstrates fetching with @tanstack/react-query.
  • Maintains structured caching, automatic background refetching on window focus, custom query invalidation upon posting new meetups, and complex patterns like Optimistic Updates during RSVP actions.
  • Includes TanStack React Query DevTools configured directly in the app to visualize query states (stale, fetching, inactive, etc.) in real-time.

---

🔄 Traditional Fetching vs. TanStack Query

Feature / Scenario	Traditional (useEffect + useState)	TanStack Query (useQuery / useMutation)
Boilerplate	High (manual states for loading, error, and data).	Low (states provided directly by the hook).
Race Conditions	Must be handled manually with mount flags (isMounted).	Handled automatically by the library.
Caching	None. Re-fetches on every component mount.	Rich caching (staleTime and gcTime configurations).
Background Synchronization	None (unless manually implementing polling).	Automatic refetches on window focus, network reconnects, etc.
Mutations / Cache Invalidation	Requires manual state synchronization/re-fetching.	Simple mutation triggers and clean cache invalidations.
Optimistic Updates	Complex state logic required.	Built-in support via context rollbacks in onMutate/onError.

---

🚀 Getting Started

To run these projects locally, follow the steps below:

Prerequisites

Make sure you have Node.js installed on your machine.

---

Step 1: Start the Backend API Server

Navigate to the meetup-mock-api folder, install its dependencies, and start the server:

cd meetup-mock-api
npm install
npm start

The mock API server will start on http://localhost:3001.

---

Step 2: Start the Frontend Application

Open a new terminal tab/window, navigate to the meetup-dashboard folder, install the dependencies, and run the development server:

cd meetup-dashboard
npm install
npm run dev

The app will be available on http://localhost:5173 (or another port printed in your terminal).

---

📈 Exploring the Features

1. Toggle Dashboard Mounting: Use the "Hide Dashboard / Show Dashboard" button in the app.
   • Notice that when you hide and show the dashboard in the Traditional implementation, it triggers a loading state and re-fetches data every time.
   • With the TanStack Query implementation, showing the dashboard again instantly renders cached data, triggering a quiet background fetch in the background.
2. Add a Meetup: Click "Add Dummy Meetup" to see mutation execution and query invalidation.
3. RSVP / Optimistic Updates: Click the "RSVP" button. The frontend toggles the UI state immediately (optimistically) and sends a background request with a simulated 1.5-second delay. If the API request fails, it automatically rolls back to the previous state.
4. DevTools: Inspect the query lifecycle in real-time using the TanStack DevTools widget on the bottom-right corner of your browser.