Project Instructions

Structure

• Frontend code lives in /client or /frontend. Backend code lives in /server or /api.
• Shared types and utilities go in /shared or /common.
• Keep the boundary between frontend and backend clean. Don’t import server code from the client.

Frontend

• One component per file. Function components with hooks.
• Use the existing styling approach. Don’t introduce new CSS tooling.
• Handle loading, error, and empty states for every data-fetching component.

Backend

• Keep route handlers thin. Business logic in service modules.
• Validate all incoming data. Return consistent error responses.
• Use parameterized queries. Never interpolate user input into SQL.

API Contract

• Define the API contract clearly. If using TypeScript, share types between frontend and backend.
• Document breaking changes. Version the API if clients can’t update simultaneously.

Testing

• Frontend: test user behavior with React Testing Library.
• Backend: integration tests for endpoints, unit tests for business logic.
• Run both suites before committing.

Git

• Write short commit messages. Prefix with area when helpful: “api: add user endpoint” or “ui: fix login form.”