Ts Rest Workspace screenshot

Ts Rest Workspace

Author Avatar Theme by Firxworx
Updated: 14 Jun 2024
24 Stars

ts-rest full-stack template in a pnpm workspace (monorepo) with fastify api, react+vite with react-query and react-router ui, tailwindcss, shared internal packages, vitest, syncpack

Categories

Overview

The ts-rest with Fastify API and React/Vite UI project is a robust foundation for building full-stack applications with a focus on type-safe, efficient communication between client and server. This monorepo setup utilizes modern technologies such as TypeScript, React, and Fastify, making it an excellent starting point for developers looking to create applications with minimal overhead. With a strong emphasis on developer experience and integration capability, this boilerplate is tailored for real-world business applications that may need to interact with existing systems or offer APIs to partners.

This project stands out by using a JSON/REST approach for client-server communication, differentiating itself from alternatives like TRPC. Specifically crafted for ease of use and flexibility, it allows developers to create applications quickly while ensuring that everything works smoothly out of the box. The carefully structured architecture of the application also makes it possible to swap out various components with ease, offering an array of customization options.

Features

  • Type-Safe Communication: Leveraging ts-rest and react-query for seamless and type-safe interactions between the React UI and Fastify API.
  • Flexible Stack: Supports easy swapping of front-end and back-end technologies, allowing developers to choose the tools that best fit their project needs.
  • Structured Logging: Utilizes pino for efficient and structured logging on the Fastify backend to enhance debugging and monitoring.
  • Zod Integration: Employs zod for contract definitions, ensuring effective data parsing and validation, which strengthens data integrity across the application.
  • Rapid Setup: The project is designed for a fast setup process, with commands like pnpm dev and pnpm test fully operational for immediate development and testing.
  • Comprehensive Example: Offers a complete working example of CRUD operations with well-defined contracts for blog posts, making it easy to understand implementation.
  • Testing Framework: Incorporates vitest and supertest for comprehensive testing capabilities, ensuring both UI components and API routes can be reliably verified.
  • Workspace Configuration: Comes with a workspace configuration that simplifies dependency management and development processes across various packages.