fullstack-starter-template
fullstack-starter-template copied to clipboard
Template for full stack applications based on TypeScript, React, Vite, ChakraUI, tRPC, Fastify, Prisma, zod, etc.
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.