73 lines (47 loc) · 1.25 KB

QuickNote — Frontend

A modern, lightweight note-taking frontend built with React + TypeScript, designed to work with the QuickNote backend API.

🚀 Tech Stack

React 18
TypeScript
Vite
TanStack Router
TanStack Query (React Query)
Axios
Tailwind CSS

🔐 Authentication Flow

Auth is cookie-based (HttpOnly).
Protected routes use beforeLoad guards in TanStack Router.
Server state (user, notes) is handled via React Query.
Credentials are sent with every request.

🔁 Data Fetching Strategy

All API calls go through a centralized Axios instance.
Queries & mutations live in features/*/*.query.ts.
Cache invalidation is explicit and predictable.

⚙️ Environment Variables

Create a .env file:

VITE_BASE_URL=http://localhost:5000

Development

pnpm install
pnpm dev

Runs the app on: http://localhost:5173

Production Build

pnpm build
pnpm preview

📌 Known Limitations / Future Work

Pagination UI can be improved (infinite scroll).

Shared DTO package with backend could further reduce duplication.

Tests are not yet added.

🔗 Related Repository

Backend API: https://github.com/mssoheil/quickNote-backend