Trpc Fe Boilerplate Next
Minimal tRPC frontend Nextjs boilerplate for separate BE-FE repositories. Easily consume fully typesafe APIs.
Overview
The tRPC Frontend Boilerplate by HeisenbergCI offers a streamlined solution for developers looking to work with separate backend and frontend repositories. Leveraging Next.js, this minimal boilerplate facilitates the consumption of fully typesafe APIs, making it an ideal choice for larger teams or companies focused on maintaining clear separation between their domain logic and API exposure. Whether you're setting up a new project or integrating with existing infrastructure, this boilerplate aims to simplify the development process.
The boilerplate is particularly advantageous for environments where managing Continuous Integration/Continuous Deployment (CI/CD) pipelines, pull requests, and issues in separate repositories is necessary. With an emphasis on easy setup and usage, it caters to developers aiming to leverage the benefits of tRPC in a disciplined repository structure.
Features
-
Easy Setup: Quickly establish a local development environment with simple commands: clone the repo, run npm install, and start the dev server.
-
Typesafe API Consumption: Consume fully typesafe APIs effortlessly, ensuring that your frontend remains in sync with backend changes while minimizing runtime errors.
-
Flexible API Integration: Choose between two convenient methods to import tRPC API types from your backend repository, either via an npm package installation or an npm script.
-
Separation of Concerns: Ideal for teams that prioritize dividing domain/business logic from what needs to be exposed through the API, promoting cleaner architecture.
-
Optimized for Monorepos: While designed for separate repositories, this boilerplate also acknowledges the benefits of monorepos, allowing developers to easily adapt based on their project requirements.
-
Scalable Development: Built with larger teams in mind, accommodating the complexities of larger development initiatives without sacrificing efficiency or productivity.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- TanStack
TanStack is a collection of high-quality, framework-agnostic libraries including TanStack Query for data fetching, TanStack Router for routing, TanStack Table for tables, and more. These tools provide powerful, type-safe solutions for common web development challenges.
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Zod
Zod is a TypeScript-first schema declaration and validation library. It allows you to define schemas that can validate data at runtime while providing excellent TypeScript inference, making it perfect for API validation, form validation, and type-safe data handling.