fullstack-react-template

Application Structure

Technology Stack

Category	Technology
Runtime	Node.js
Package Manager	pnpm
Framework	React Router
UI Components	shadcn/ui
Database ORM	Drizzle ORM
Form Management	conform
Logging	winston
Error Handling	option-t
E2E Test	Playwright
Database	PostgreSQL

Directory Structure

See Directory Structure Documentation.

Error Handling

See Error Handling Documentation.

Specification

See Specification Documentation.

Getting Started

Prerequisites

• Node.js
• pnpm
• Lefthook

Installation

Install the dependencies and set up lefthook:

pnpm install

Copy the .env.example file to .env and set the environment variables:

cp .env.example .env

Development

Start the database:

docker compose up -d

Start the development server with HMR:

pnpm dev

Your application will be available at http://localhost:5173.

Two authentication methods are implemented: Email OTP (One Time Password) and SSO.

For Email OTP sign-in, the OTP is output as a server log. For SSO, Keycloak is used as an IdP that can be run locally. The following user is created in Keycloak by default:

• username: test-user
• password: password

Building for Production

Create a production build:

pnpm build

Deployment

Docker Deployment

To build and run using Docker:

docker compose -f compose.prod.yaml build

# Run the container
docker compose -f compose.prod.yaml up

Database Schema Changes

When modifying your database schema, follow these steps:

1. Generate migration scripts based on your schema definitions:

pnpm db:generate

2. Run the generated migration scripts:

pnpm db:migrate

For other migration strategies, please refer to Drizzle migrations fundamentals.