brandhaugbrandhaug
22

Full Stack Typescript Monorepo Starter With Authentication

screenshot of Full Stack Typescript Monorepo Starter With Authentication
react
vite
tailwind
prisma

Setting up a new project is time-consuming. The purpose of this project is to make it effortless with state-of-the-art technology and tooling.

Github

Overview

The Full-stack TypeScript Monorepo Starter with Authentication is a project aimed at simplifying the process of setting up a new project. It provides a monorepo structure with a Node.js backend, GraphQL API, and React frontend, all written in TypeScript. The project includes various features, tooling, and infrastructure to streamline development and deployment.

Features

  • Backend

    • Node.js with TypeScript
    • GraphQL Yoga Server API
    • Prisma ORM with PostgreSQL database
    • Winston/Grafana Loki logging
    • ESBuild bundling

  • Frontend

    • React with TypeScript
    • Apollo Client with cache
    • Tailwind CSS
    • Vite building

  • Tooling/Infrastructure

    • GitHub Actions CI/CD
    • Prometheus metrics
    • Grafana monitoring
    • Sentry error monitoring
    • Railway hosting
    • PNPM package manager
    • Jest testing
    • ESLint linting
    • Turborepo caching

Server

  1. Install Docker Compose.
  2. Install dependencies in all projects: pnpm install --recursive.
  3. Build types from GraphQL schema: pnpm run graphql-codegen.
  4. Create the file server/.env.development and add the fields from server/.env.example.
  5. Run the database: docker-compose up db.
  6. Migrate the database schema: npx prisma migrate dev in the server directory.
  7. Generate types: npx prisma generate in the server directory.
  8. Run the server: pnpm run dev --prefix server.

App

  1. Create the file app/.env.development and add the fields from app/.env.example.
  2. Run the app: pnpm run dev --prefix app.

Summary

The Full-stack TypeScript Monorepo Starter with Authentication is a project that aims to simplify the process of setting up a new project by providing a pre-configured monorepo structure with a Node.js backend, GraphQL API, and React frontend. It includes various features such as TypeScript support, Prism ORM, Apollo Client, and Tailwind CSS. The project also provides tooling and infrastructure such as GitHub Actions for CI/CD, Prometheus metrics, Grafana monitoring, and Sentry error monitoring. Installation instructions are provided to guide users in setting up the project. Overall, the Full-stack TypeScript Monorepo Starter with Authentication is a comprehensive solution for quickly getting started with a full-stack TypeScript project.

react
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

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

prisma
Prisma

Prisma is a server-side library that helps developers read and write data to the database in an intuitive, efficient and safe way.

fullstack
Fullstack

A fullstack boilerplate provides a starter application that includes both frontend and backend. It should include database, auth, payments, user roles and other backend services to build a fully featured saas or webapps.

apollo
Apollo

Apollo is an open-source platform for building GraphQL APIs that connects with any data source. It provides a powerful set of tools and features for developers, including client and server-side caching, real-time data synchronization, and a seamless integration with popular frontend frameworks.

eslint
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.

graphql
Graphql

A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.

typescript
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.