How To Use A Monorepository To Host Your React Frontend, Node.js Backend, And PostgreSQL Database, All Accessed Through Prisma

|

In modern web development, a monorepository (monorepo) architecture can significantly improve collaboration, integration, and consistency across full-stack applications. This article demonstrates how to structure and set up a monorepo that includes a React frontend, a Node.js backend, and a PostgreSQL database—all wired together with Prisma ORM for seamless type-safe database access.

We’ll cover everything from folder organization, shared code reuse, Prisma integration, development tooling, and deployment tips, ensuring a highly maintainable and scalable project setup.

Why Use a Monorepo for Full-Stack Development?

Monorepos are repositories that house multiple projects in a single version-controlled codebase. In our case:

  • Frontend: A React app built with Vite or Create React App.

  • Backend: A Node.js (Express or Fastify) API service.

  • Database: A PostgreSQL instance managed locally via Docker.

  • ORM: Prisma to interact with the database across services.

Benefits:

  • Shared Types: Frontend and backend can share TypeScript types.

  • Unified Build Tools: Easy to run scripts across apps.

  • Consistent Versioning: Dependency upgrades are streamlined.

  • Simplified CI/CD: Single pipeline for all services.

Project Structure Overview

We’ll use the following folder structure:

perl
my-monorepo/
│
├── apps/
│ ├── frontend/ # React application
│ └── backend/ # Node.js application
│
├── packages/
│ └── prisma/ # Shared Prisma client and schema
│
├── docker/
│ └── postgres/ # PostgreSQL Docker setup
│
├── node_modules/
├── package.json
├── tsconfig.json
└── pnpm-workspace.yaml

Note: You can use pnpm, Yarn Workspaces, or Turborepo to manage this monorepo effectively. We’ll use pnpm.

Initialize the Monorepo with PNPM

bash
mkdir my-monorepo && cd my-monorepo
pnpm init -y

Create the workspace configuration:

yaml
# pnpm-workspace.yaml
packages:
- 'apps/*'
- 'packages/*'

Set Up PostgreSQL with Docker

Create a folder for the PostgreSQL setup:

bash
mkdir -p docker/postgres
cd docker/postgres

Create a docker-compose.yml:

yaml
# docker/postgres/docker-compose.yml
version: '3.8'
services:
db:
image: postgres:15
restart: always
environment:
POSTGRES_USER: dev
POSTGRES_PASSWORD: dev
POSTGRES_DB: monorepo_db
ports:
- "5432:5432"
volumes:
- pgdata:/var/lib/postgresql/data
volumes:
pgdata:

Start the DB:

bash
docker-compose up -d

Create Shared Prisma Package

Inside packages/:

bash
mkdir -p packages/prisma
cd packages/prisma
pnpm init -y
pnpm add prisma @prisma/client

Create the schema:

prisma
// packages/prisma/schema.prisma
generator client {
provider = "prisma-client-js"
output = "./generated/client"
}datasource db {
provider = “postgresql”
url = env(“DATABASE_URL”)
}model User {
id Int @id @default(autoincrement())
email String @unique
name String?
createdAt DateTime @default(now())
}

Create an .env:

env
# packages/prisma/.env
DATABASE_URL="postgresql://dev:dev@localhost:5432/monorepo_db"

Now generate the Prisma client:

bash
cd packages/prisma
npx prisma generate
npx prisma migrate dev --name init

Set Up Node.js Backend

Inside apps/backend:

bash
pnpm create vite backend --template node
cd backend
pnpm add express dotenv
pnpm add -D typescript ts-node @types/node @types/express

Setup TypeScript config:

json
// apps/backend/tsconfig.json
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "dist",
"rootDir": "src"
},
"include": ["src"]
}

Create src/index.ts:

ts
import express from 'express'
import { PrismaClient } from '../../../packages/prisma/generated/client'
import dotenv from 'dotenv'dotenv.config({ path: ‘../../../packages/prisma/.env’ })const app = express()
const prisma = new PrismaClient()
app.use(express.json())app.get(‘/users’, async (_, res) => {
const users = await prisma.user.findMany()
res.json(users)
})app.post(‘/users’, async (req, res) => {
const { email, name } = req.body
const user = await prisma.user.create({ data: { email, name } })
res.json(user)
})app.listen(3001, () => console.log(‘Backend running on port 3001’))

Run it:

bash
pnpm dev

Set Up React Frontend

Inside apps/frontend:

bash
pnpm create vite frontend --template react-ts
cd frontend
pnpm add axios

Create a simple UI:

tsx
// apps/frontend/src/App.tsx
import { useEffect, useState } from 'react'
import axios from 'axios'function App() {
const [users, setUsers] = useState<any[]>([])
const [email, setEmail] = useState(”)useEffect(() => {
axios.get(‘http://localhost:3001/users’).then(res => setUsers(res.data))
}, [])const handleAdd = async () => {
const res = await axios.post(‘http://localhost:3001/users’, { email })
setUsers(prev => […prev, res.data])
setEmail(”)
}return (
<div>
<h1>Users</h1>
<ul>{users.map(u => <li key={u.id}>{u.email}</li>)}</ul>
<input value={email} onChange={e => setEmail(e.target.value)} />
<button onClick={handleAdd}>Add</button>
</div>
)
}export default App

Run the frontend:

bash
pnpm dev

Share Code and Types

You can now extract shared types to a new package:

bash
mkdir -p packages/shared
cd packages/shared
pnpm init -y

Create a shared types.ts file:

ts
// packages/shared/types.ts
export interface User {
id: number
email: string
name?: string
createdAt: string
}

Then import it into both frontend and backend using workspace aliases in tsconfig.json:

json
// tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@shared/*": ["packages/shared/*"]
}
}
}

Automate with Scripts

Add to root package.json:

json
"scripts": {
"dev:frontend": "pnpm --filter frontend dev",
"dev:backend": "pnpm --filter backend dev",
"dev:all": "concurrently \"pnpm dev:frontend\" \"pnpm dev:backend\""
}

Install concurrently:

bash
pnpm add -D concurrently

Now you can run the entire stack:

bash
pnpm dev:all

Testing Your Setup

  1. Run docker-compose up to start PostgreSQL.

  2. Run pnpm dev:all to start frontend and backend.

  3. Open http://localhost:5173 and add users.

  4. Backend at http://localhost:3001/users should show JSON output.

Deployment Considerations

  • Database: Use a managed PostgreSQL service (like Supabase, RDS, or Neon).

  • Frontend: Deploy via Vercel, Netlify, or Cloudflare Pages.

  • Backend: Deploy to Fly.io, Railway, Render, or containerize with Docker.

  • Prisma: Use prisma generate during CI/CD; .env can be injected via secrets.

Conclusion

In today’s fast-paced full-stack development landscape, the ability to streamline your architecture while maintaining modularity, reusability, and type safety is no longer a luxury—it’s a necessity. By using a monorepository to host your React frontend, Node.js backend, and PostgreSQL database, all orchestrated through Prisma ORM, you achieve a harmonious and efficient development ecosystem that supports both scalability and developer ergonomics.

Throughout this article, we’ve explored how to structure your monorepo using modern tooling like pnpm, organize shared packages, and decouple yet tightly integrate your application layers. You’ve seen how Prisma simplifies database access with type safety, enabling your backend to be robust and your frontend to stay in sync through shared types. By containerizing the PostgreSQL database with Docker, you also ensure consistent local development environments, a critical factor for cross-team collaboration and CI/CD stability.

This architectural choice yields multiple strategic benefits:

  • Unified Development Workflow: With a monorepo, onboarding new developers becomes easier. They only need to clone a single repository to get access to the entire application stack.

  • Shared Code and Types: Sharing models, validation logic, and type definitions between backend and frontend improves consistency and reduces bugs caused by mismatched data expectations.

  • Simplified Dependency Management: Instead of managing multiple versions of shared dependencies across separate repos, a monorepo lets you upgrade packages in a single place, reducing version drift and conflicts.

  • Streamlined Testing and CI/CD: CI/CD pipelines can be optimized to only run affected apps and packages. Tools like Nx or Turborepo can help with this optimization, leading to faster, more efficient builds.

  • Better Code Discoverability and Reusability: Developers can more easily find and reuse code, increasing productivity and promoting best practices across teams.

  • Enhanced Collaboration and Coordination: Working within the same repository fosters collaboration across teams (frontend, backend, DevOps, data), making it easier to track features, fix bugs, and align on architecture decisions.

  • Optimized Deployment Strategies: While your code lives in one repository, each application (frontend, backend) can be deployed independently or together, thanks to well-defined boundaries. You can also package your entire environment with Docker Compose or Kubernetes for portable deployments.

Of course, monorepos aren’t without trade-offs. Large monorepos can become harder to manage without proper tooling, especially as the number of packages grows. However, the benefits far outweigh the drawbacks when implemented thoughtfully. Tools like Turborepo, Nx, or even custom scripts can help scale your monorepo efficiently.

To summarize, adopting a monorepo for your full-stack application—anchored by React, Node.js, PostgreSQL, and Prisma—offers:

  • Maintainability through structured and cohesive organization.

  • Developer Velocity via shared tooling and single-command workflows.

  • Type-Safe End-to-End Development using Prisma and shared packages.

  • Deployment Flexibility with Docker and modern cloud services.

Whether you’re an individual developer looking to build robust side projects, a startup looking to iterate quickly, or a team scaling a SaaS product, this monorepo approach is a future-proof foundation.

By choosing to integrate these technologies within a single, unified codebase, you’re not just writing code—you’re building a system that’s cohesive, collaborative, and built to last.

The monorepo is more than a technical choice—it’s a philosophy of unity, simplicity, and developer empowerment.

Now that you have the structure and setup, you can expand this stack by adding GraphQL or gRPC APIs, integrating Redis or Kafka, or layering in analytics, monitoring, and role-based access. The monorepo enables you to do all this incrementally, without losing coherence.