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

• ChakraUI - UI library that lets you create beautiful interfaces quickly
• Framer Motion - create beautiful motion animations (compatible with ChakraUI)
• React Icons - icons for your app
• React-toastify - show notifications when something happens

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.