IdeaDrop UI

This is the frontend to the IdeaDrop application from Modern React From The Beginning course from Brad Traversy on Udemy.
It uses React, TanStack Router, and TanStack Query. The API for this project can be found here.

Features

• User registration and login
• JWT-based authentication with automatic token refresh
• Create, read, update, and delete (CRUD) ideas
• Protected routes for creating and editing ideas
• Responsive and clean UI
• Built with:
  • React (via Vite)
  • TanStack Router
  • TanStack Query
  • Zustand
  • Axios

Usage

Install dependencies:

yarn install

Run dev server:

yarn dev

Environment Variables

Rename .env.example to .env:

VITE_API_BASE_URL=http://localhost:5000/api

If you want run the dev or preview serve, you should do not set the ```VITE_API_BASE_URL```.

Change the value if your API runs on a different port or host.

Authentication Flow

• Login/register returns an accessToken and sets a refreshToken in a secure, HTTP-only cookie.

• accessToken is stored in context and sent in the Authorization header.

• When the access token expires or there is a hard page refresh, the app automatically requests a new one using the refreshToken.