TS Monorepo — Node + Express + Prisma + SQLite (Vite + React + Tailwind)

A modern full-stack TypeScript monorepo using:

• pnpm workspaces
• Express + TypeScript backend
• Prisma ORM with SQLite (easily switchable to Postgres/MySQL)
• Vite + React + Tailwind frontend
• Full CRUD Todo App
• CORS-ready, Production-ready static serving
• Shared development workflow (pnpm dev)

---

📁 Monorepo Structure

TS_MonoRepo/
│
├── backend/                # Express + Prisma + SQLite API
│   ├── src/
│   │   ├── controllers/    # Route logic (Todo CRUD)
│   │   ├── routes/         # Express routers
│   │   ├── index.ts        # Server bootstrap
│   │   └── middleware/     # Error handling, etc.
│   ├── prisma/
│   │   └── schema.prisma   # DB schema (Prisma)
│   ├── package.json
│   └── tsconfig.json
│
├── frontend/               # Vite + React + Tailwind UI
│   ├── src/
│   │   ├── App.tsx         # Minimal dark-theme Todo UI
│   │   └── ...
│   ├── index.html
│   ├── package.json
│   └── tailwind config
│
├── pnpm-workspace.yaml     # Workspaces definition
├── tsconfig.base.json
└── package.json            # Root scripts (dev/build)

---

🧰 Tech Stack

Backend

• TypeScript
• Express
• Prisma ORM
• SQLite (dev) → upgradeable to PostgreSQL/MySQL
• tsx (dev runtime)
• CORS + Cookie Parser

Frontend

• React + TypeScript
• Vite
• Tailwind CSS
• Minimal dark-theme UI
• CRUD operations calling /api/todos

---

⚙️ Installation

Make sure you are using pnpm.

pnpm install

This installs deps for both frontend and backend via workspaces.

---

🧑‍💻 Development

Start both frontend & backend with one command:

pnpm dev

• Frontend → http://localhost:3000
• Backend → http://localhost:8000
• Vite proxies /api → backend automatically

---

🗄️ Database

Prisma schema (SQLite by default)

Located at:

backend/prisma/schema.prisma

To generate the Prisma client:

cd backend
pnpm exec prisma generate

Run migrations (development):

pnpm exec prisma migrate dev --name init

Switching to PostgreSQL/MySQL

Just update the datasource block:

Postgres:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

MySQL:

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

And set the correct DATABASE_URL in production.

No backend code changes required.

---

🌐 API Endpoints

Method	Endpoint	Description
GET	/api/todos	List all todos
POST	/api/todos	Create new todo
GET	/api/todos/:id	Get a todo
PUT	/api/todos/:id	Update a todo
DELETE	/api/todos/:id	Delete a todo
GET	/api/health	Health check

Backend checks NODE_ENV and serves static assets in production.

---

🎨 Frontend (React + Tailwind)

A minimal dark-theme Todo app is included.

• Fetches todos from /api/todos
• Create / edit / toggle / delete
• Automatically updates UI

Start only frontend:

pnpm --filter frontend dev

Build frontend:

pnpm --filter frontend build

---

🚀 Production Build

Step 1 — Build frontend

pnpm --filter frontend build

Step 2 — Build backend

pnpm --filter backend build

Step 3 — Server serves frontend (frontend/dist)

backend/src/index.ts automatically:

• Serves /frontend/dist
• Sets SPA fallback for non-API GET requests
• Listens on 0.0.0.0 in production

---

🔧 Environment Variables

Create backend/.env:

NODE_ENV=development
PORT=8000
CORS_ORIGIN=http://localhost:3000
DATABASE_URL="file:./dev.db"

In production use:

NODE_ENV=production
CORS_ORIGIN=https://yourfrontend.com,https://cdn.yourfrontend.com
DATABASE_URL="postgresql://user:password@host:5432/dbname"

---

🧪 Testing (optional)

Because index.ts exports app, you can test easily:

import request from "supertest";
import app from "../src/index.js";

test("GET /api/health", async () => {
  const res = await request(app).get("/api/health");
  expect(res.status).toBe(200);
});

---

📦 Deployment

You can deploy backend + frontend in many environments:

VPS / Docker

• Build both frontend and backend
• Serve React static files via Express
• Run Node server (pm2 recommended)

Serverless

• Use Prisma Data Proxy or Pooler
• Export app to adapt to handler

CDN + API

• Upload frontend/dist to a CDN
• API served separately from a VPS / container
• Set CORS_ORIGIN accordingly

---

🤝 Contributing / Notes

This is a learning-friendly project but follows production-grade patterns:

• Proper CORS handling
• Explicit ESM imports (.js) for Node compatibility
• Prisma migrations committed
• pnpm workspace structure
• Clean Express app organization (controllers / routes / middleware)

---

🧠 TODO / Future Enhancements

• Authentication (JWT or sessions)
• Zod validation (backend)
• React Query for better frontend state handling
• Docker setup
• PostgreSQL migration example
• Unit & integration tests
• CI/CD (GitHub Actions)
• A better styled frontend UI (Tailwind components)
• A proper Todos API test suite (Supertest + Vitest)

Thanks to chat gpt for helping me build

There this could be a few mistakes in readme

---