trpc-overview

A full-stack TypeScript chat application demonstrating the use of tRPC for type-safe client-server communication.

Project Structure

packages/
├── client/          # React frontend
├── server/          # Node.js backend
└── slides/          # Presentation slides

Technology Stack

• Frontend

  • React 18
  • Vite
  • TailwindCSS
  • tRPC Client
  • React Query
  • TypeScript

• Backend

  • Node.js
  • tRPC Server
  • WebSocket
  • JWT Authentication
  • TypeScript

Getting Started

Prerequisites

• Node.js (Latest LTS version recommended)
• Yarn v4.6.0

Installation

1. Clone the repository
2. Install dependencies:

   yarn install

Development

Run the following commands from the root directory:

Format Code

# Check formatting
yarn all:format

# Fix formatting
yarn all:format-fix

Lint Code

# Check linting
yarn all:lint

# Fix linting issues
yarn all:lint-fix

Type Check

yarn all:typecheck

Run Development Servers

In separate terminals:

1. Start the backend server:

   cd packages/server
   yarn dev

2. Start the frontend development server:

   cd packages/client
   yarn dev