Skip to content

README.md

Latest commit

 

History

History
108 lines (80 loc) · 4.15 KB

README.md

File metadata and controls

108 lines (80 loc) · 4.15 KB

🚀 React Template

A modern, high-performance full-stack React template powered by Vite+ and TanStack Start. Designed for developer experience, type-safety, and modularity.

📋 Overview

This template provides a solid foundation for building full-stack applications with the latest React 19 features. It uses a modular monolith architecture that can easily scale or be transitioned to a monorepo if needed.

✨ Features

  • ⚛️ React 19: Leveraging the latest React features and improvements.
  • 🚀 TanStack Start: Full-stack React framework with type-safe routing and SSR.
  • ⚡ Vite+: Unified toolchain for dev, build, lint, format, and test.
  • 🗄️ Drizzle ORM: Type-safe TypeScript ORM for PostgreSQL.
  • 🎨 Tailwind CSS v4: Utility-first styling with the latest engine.
  • 🧩 Shadcn UI: 50+ accessible UI components built on @base-ui/react.
  • 📦 Modular Design: Clean separation of concerns within src/core.

🚀 Quick Start

Prerequisites

  • Node.js v22+ and pnpm installed on your machine.
  • Docker (optional, for local PostgreSQL).

Installation

# Install dependencies
pnpm install

# Setup environment variables
cp .env.example .env.local
# Edit .env.local with your credentials

Database Setup

# Start PostgreSQL via Docker (optional)
docker-compose up -d

# Run migrations
pnpm db:migrate

Development

vp dev

Open http://localhost:3000 to see the application.

🛠️ Tech Stack

Technology Category Description
Vite+ Toolchain Unified dev, build, lint, format, and test
React 19 Frontend The library for web and native user interfaces
TanStack Start Framework Full-stack React framework
Tailwind CSS v4 Styling Utility-first CSS framework
Drizzle ORM Database TypeScript ORM for SQL databases

📂 Project Structure

├── src/
│   ├── components/         # UI components, layouts, and providers
│   ├── core/               # Core business logic & infrastructure
│   │   ├── database/       # Drizzle client and schema definitions
│   │   ├── schema/         # Shared Zod validation schemas
│   │   └── shared/         # Shared utilities and constants
│   ├── hooks/              # Custom React hooks
│   ├── lib/                # Application-specific utilities
│   ├── routes/             # TanStack Router file-based routes
│   ├── server.ts           # Server entry point
│   └── start.tsx           # Client entry point
├── drizzle.config.ts       # Drizzle ORM configuration
├── package.json            # Project dependencies and scripts
├── tsconfig.json           # TypeScript configuration
└── vite.config.ts          # Vite/Rolldown configuration

📜 Development Commands

Command Description
vp dev Start development server on port 3000
vp build Build the application for production
vp check Format, lint, and type-check
vp lint --fix Lint code using Oxlint
vp fmt Format code using Oxfmt
vp test Run tests with Vitest
pnpm db:generate Generate Drizzle migrations
pnpm db:migrate Apply Drizzle migrations

🔐 Environment Variables

Create a .env.local file in the root directory:

DATABASE_URL=postgresql://user:pass@localhost:5432/db

📄 License

This project is licensed under the MIT License.