This is a simple React SPA.

Check out deployed app here: sk.krasnowski.dev

// Install deps
pnpm i

// Run dev
pnpm dev

// Build
pnpm build

// Run e2e tests (you need to build first before running)
pnpm test

There's only one public env variable used:

VITE_API_URL=https://jsonplaceholder.typicode.com

tanstack-query aka React Query is used to handle request state. fetch api is used to make requests to JSONPlaceholder. zod is used to ensure type-safe data, since JSONPlaceholder does not provide types (no OpenApi spec / TypeScript client) (at least not officially).

Only necessary posts are fetched form the API. For example visiting https://sk.krasnowski.dev/?userId=2 will only fetch posts for user with id = 2 (Ervin Howell). When you select user new data is fetched in the background and initial data is filtered on the client

tailwindcss is used as css framework - it's great for quick demo projects

UI tests are written in playwright