React Hook Form + TypeScript (Monorepo)

This repository is a small monorepo containing a TypeScript + React frontend, a Node/TypeScript backend that uses Prisma for database access, and a shared common package for types and interfaces.

Repository layout

lerna.json
package.json
packages/
	backend/
		package.json
		prisma.config.ts
		prisma/
			schema.prisma
			seed.ts
		src/
			server.ts
			controllers/
				colorController.ts
			prisma/
				client.ts
			routes/
				colorRoutes.ts
	common/
		package.json
		src/
			index.ts
	frontend/
		package.json
		src/
			App.tsx
			index.tsx
			components/
				ColorForm.tsx
			services/
				...

High level

• Frontend: React + TypeScript app (CRA or Vite style). Uses React Hook Form, react-select and an RTK Query-based colorsApi service to talk to the backend.
• Backend: TypeScript server (Express/Koa/fastify — see packages/backend/src/server.ts) with Prisma for database access. The backend exposes endpoints to read available colors and read/save a user's selected colors.
• Common: shared types (e.g. Color, UserColorPayload) consumed by both frontend and backend.

Prerequisites

• Node.js >= 16 (LTS recommended)
• npm (or yarn/pnpm) and optionally lerna if you prefer managing packages that way
• A SQL database supported by Prisma (e.g. PostgreSQL, SQLite for quick local testing)

Quick setup (PowerShell) Note: adapt commands if you use yarn or pnpm.

1. Install dependencies (root workspace approach)

# From repository root
npm install
# If you use lerna in your workflow you can also run
# npx lerna bootstrap

2. Configure environment variables

Create a .env file for the backend (at packages/backend or root, depending on how your project loads it). Example variables:

# packages/backend/.env
DATABASE_URL="postgresql://user:pass@localhost:5432/dbname?schema=public"
PORT=4000

Frontend may use an API base URL. For example in packages/frontend/.env:

REACT_APP_API_URL=http://localhost:4000

3. Database / Prisma

Generate Prisma client and run migrations / seed data. Replace commands below with the one appropriate for your environment (migrations or db push).

cd packages/backend
# Install backend deps if you didn't run root install: npm install

# Generate Prisma client
npx prisma generate

# Apply migrations (development)
npx prisma migrate dev --name init

# Alternatively deploy migrations for a production-like DB
npx prisma migrate deploy

# Run seed script (this repo has packages/backend/prisma/seed.ts)
# If seed.ts is TypeScript, run it via ts-node or build first
npx ts-node prisma/seed.ts

4. Run the apps (development) Open two terminals (PowerShell), try this on root folder, both frontend and backend will run:

npm run dev

Developer notes (important)

• ColorForm behavior (file: packages/frontend/src/components/ColorForm.tsx):
  • The user colors are not automatically fetched on component mount. A Load button appears before the Save button. Click Load to fetch the user's saved colors from the backend.
  • The Clear button clears the selection in the UI, persists the cleared (empty) selection back to the database, and then reloads the (now empty) saved state from the backend. This ensures the backend and UI stay in sync.
  • Save persists current selections and then triggers a reload so the saved state is reflected in the UI.

Troubleshooting & common gotchas

• Missing shared package import errors: if you see errors like "Cannot find module '@demoapp/common' or its corresponding type declarations", make sure the common package is built/linked and referenced consistently across packages (check package.json names and TypeScript path mappings).
• Prisma/DB issues: ensure DATABASE_URL is valid and your DB is reachable. For quick local testing you can use SQLite by setting DATABASE_URL="file:./dev.db" and running the migration/seed commands.
• Ports: ensure the backend port (default say 4000) is available and the frontend REACT_APP_API_URL points to it.