BFR Custom Website

A modern full-stack TypeScript application built with tRPC for type-safe API communication between frontend and backend.

Tech Stack

• Frontend: React 19 + Vite + TypeScript
• Backend: Node.js + tRPC + Express
• UI Components: AWS Cloudscape Design System
• Styling: Tailwind CSS v4
• API: tRPC for end-to-end type safety
• Testing: Vitest
• Build System: Nx + Rollup
• Package Management: NPM Workspaces

Project Structure

custom-website/
├── packages/
│   ├── api/          # Backend API server with tRPC
│   │   ├── src/
│   │   │   ├── procedures/    # tRPC routers
│   │   │   ├── helpers/       # tRPC setup
│   │   │   └── external-types.ts  # Exported types
│   │   └── scripts/
│   │       └── run-dev-server.ts  # Development server
│   └── ui/           # Frontend React application
│       └── src/
│           ├── components/
│           ├── helpers/       # tRPC client setup
│           └── root.tsx       # App entry point
├── package.json      # Root workspace configuration
└── nx.json          # Nx configuration

Getting Started

Prerequisites

• Node.js >= 22
• NPM >= 9

Installation

# Install all dependencies
npm install

Development

# Start both frontend and backend development servers
npm run tasks start

# Or start individually:
npm run start -w @wiresense/api  # Backend on http://localhost:8080
npm run start -w @wiresense/ui   # Frontend on http://localhost:3000

Building

# Build all packages
npm run build

# Build specific package
npm run build -w @wiresense/api
npm run build -w @wiresense/ui

Code Quality

# Run linting
npm run lint

# Run type checking
npm run type-check

# Run tests
npm run test

# Fix formatting
npm run fix

API Development

The backend uses tRPC for type-safe API development. The main router is defined in packages/api/src/procedures/root-router.ts and exports the rootRouter type through external-types.ts.

Example endpoints:

• /api/health - Health check endpoint
• /api/greeting - Example query with input validation

Frontend Development

The frontend is built with React and Vite, using tRPC client for type-safe API calls. The tRPC client is configured in packages/ui/src/helpers/trpc.ts and connects to the backend at /api.

Type Safety

This project leverages tRPC for end-to-end type safety between frontend and backend. The backend exports its router type, which the frontend imports to ensure all API calls are fully typed.