Skip to content

Template for full stack applications based on TypeScript, React, Vite, ChakraUI, tRPC, Fastify, Prisma, zod, etc.

Notifications You must be signed in to change notification settings

Sairyss/fullstack-starter-template

Repository files navigation

Full stack starter template

Monorepository TypeScript template for full stack applications.

  • Maximized for productivity
  • Based on cutting edge technologies
  • Follows best practices for project structure, architecture, security
  • Includes authentication module

Libraries/frameworks

This template includes a bunch of libraries to get you up and running quickly and improve your developer experience.

Frontend

  • React - main frontend library
  • Vite - modern and fast build tool
  • React Query - react hooks to facilitate fetching/updating/caching data on the server
  • Zustand - easy state-management
  • React router - for routing
  • Cypress - end-to-end testing for your frontend
  • Storybook - build your UI web components in isolation

Frontend UI

Backend

  • Fastify - fast web framework for NodeJS
  • Prisma - new generation ORM for working with relational databases
  • Zod - TypeScript-first schema validation with static type inference
  • dotenv - to load your configs from an .env file
  • env-var - validate and sanitize your environmental variables

Shared libraries

  • tRPC - Remote Procedure Calls for your TypeScript applications. Move faster by removing the need of a traditional API-layer.
  • NX - build system with first class monorepo support and powerful integrations
  • Jest - testing framework
  • Eslint - static code analysis for identifying problematic patterns found in your code

Starting the app

  • Clone the repository
  • Copy .env.example and rename to .env
  • npm run docker:env - setup the database (postgresql) in docker
  • npm install - install dependencies
  • npm run migrate:dev - run migrations to create tables
  • npm run backend:dev - run backend
  • npm run frontend:dev - run frontend

Scripts

  • npm run frontend:storybook - start storybook to develop components in isolation
  • npm run dep-graph - see dependency graph
  • For more commands check package.json
  • To generate new apps in the monorepo, check out NX documentation.

Check out my other repositories

  • Domain-Driven Hexagon - Guide on Domain-Driven Design, software architecture, design patterns, best practices etc.
  • Backend best practices - Best practices, tools and guidelines for backend development.
  • System Design Patterns - list of topics and resources related to distributed systems, system design, microservices, scalability and performance, etc.