Introduction

Working With Monorepos

Setting up npm workspaces in our mono-repo

Workspaces

Setting up shared TypeScript, ESLint and Prettier configs

Shared Configs

Setting up the frontend with Vite, React and Tailwind

Frontend

Setting up the database schema and migrations

Schema

Backend

This module provides a walkthough of the setting and configuration so we’re ready to start building. This includes linting, code formatting, testing, npm workspaces, and build scripts. You will learn how to set up a frontend project with React and TailwindCSS, and a backend project with Koa. Finally, you will also set up Schemalint and Kanel to generate types and tRPC to act as the communication layer between backend and frontend.

Introduction and Getting Started

Looking into how to analyze a problem and create a product

Analyzing

Designing the Customer-facing UI with TailwindCSS

Data Model

In this module you will learn how to analyze a problem, design data model and UI for it and how to drive the architecture from the two. You will also learn about the considerations when deciding how to architect a solution, how to enable the optimal user journey, and potential future scenarios while creating a suited data model.

Analysis and Design

PostgreSQL Ranges

Getting properly started with our database schema

The Provider Table

Adding a booking table to our database schema

The Booking Table

In this module you will learn how to use the Postgres range type and enforce data consistency directly in the database.

Modelling with advanced Postgres features

Tailwind CSS

Foundation

Frontend State

Shared Components

Select Day

In this module you will build the UI that the customer is going to use usin Tailwind CSS. The flow will go through the process of booking a session with error handling.

Frontend UI

Introducing tRPC

Connecting to the tRPC server from the frontend

Connecting to tRPC

Refining the tRPC setup

Connecting our tRPC routes to the Database

Connecting to the Database

Generating Zod schemas

In this module, you will about designing API’s with tRPC and how to implement them. With the data model and UI as drivers, you will also learn which endpoints are required and how to implement them in tRPC.

Endpoints

Testing tRPC Endpoints

Testing With the Database

Testing Frontend

In this module, you will create unit tests of the frontend by mocking the tRPC endpoints using Vitest.

Testing

Completing the Select Date Page

Infrastructure for Ranges

Completing Booking

In this modele, you add some final touches to your app in the form of completing the Select Date page, creating the infrastructure for ranges, and completing the booking process.

Connecting The Dots

Conclusion and extra resources

In this module, you will learn about some additional resources realted to auth and security, DevOps, complex methods, and client side routing.

This comprehensive course will equip you with the skills and knowledge to build modern full-stack applications using TypeScript, TailwindCSS, tRPC, and PostgreSQL. You will learn how to create a robust and scalable application architecture, from the backend data layer to the frontend UI.

PostgreSQL

NodeJS

Knex

React

TypeScript

tRPC

Monorepos simplify code development and can be split when necessary.

Setting up npm workspaces in our monorepo

Setting up shared Typescript, ESLint and Prettier configs

Vitest

Shared Components for Styling your React Application

Master full-stack development with a single repository for everything!

In this comprehensive course you will gain the skills and knowledge to build modern full-stack applications using TypeScript, TailwindCSS, tRPC, and PostgreSQL.

You will learn how to create a robust and scalable full-stack application architecture using PostgreSQL, NodeJS, Koa, Knex, React, TypeScript, tRPC, and Tailwind CSS, that is enforced with type safety, from the backend and data layer to the frontend UI.

### How The Course Works

- **Online**: The "Real-Time Collaborative Apps with Next.js and Supabase" course is a comprehensive online program spanning six modules.
- **Remote Access**: Take advantage of the course from any location, allowing you the flexibility to engage with the materials at your convenience.
- **Self-Paced Learning**: Tailor your learning experience to your schedule, enabling you to progress through the course content at your own pace.

**Community Engagement**: Collaborate and learn alongside a diverse community of fellow students, fostering an environment of shared knowledge and support.

**Structured Learning**: Experience a well-organized curriculum designed to provide a cohesive and comprehensive understanding of Angular Signals in a logical progression.

### Embrace the Full TypeScript Stack for Next-Level Web Development

"Move fast and break nothing" is the slogan on the tRPC landing page. Having type safety across your entire stack, from the database schema to the frontend UI, is a game changer. The course focuses on creating a type-safe application with the database as the source of truth.

The components used in this course are all mature and well-supported. The components are all open-ended, meaning these components aren't something that gets you going quickly but then becomes a burden when you need to do something they don't support. The architecture you will learn will be able to scale, not only in terms of complexity and performance requirements, but also in terms of the number of developers working on it.

Through hands-on examples and real-world scenarios, you'll learn how to integrate a suite of technologies to create a seamless development experience. 

By the end of this course, you will end up with a solid structure and understanding of how to solve the various challenges that come with building a full-stack application.

### Understanding the Challenges

This course aims to address several challenges in web app development, particularly as the codebase expands. Some of the challenges that this course focuses on include:

- **Minimizing errors**: The course emphasizes type safety, which helps ensure that variables and expressions align with their designated types, reducing the likelihood of errors.
- **Setting up a deployable app**: The course focuses on providing a foundation of infrastructure that is easy to build on, aiming to clear out most of the capital expenditures (CAPEX) involved in setting up an app for deployment.
- **Database as the source of truth**: The course guides you in using the database as the foundational source of truth for your application, allowing for advanced features and retaining type safety.
- **Simplifying the development process**: By using a monolithic architecture and avoiding unnecessary microservices, the course aims to simplify the development process and avoid premature complexity.
- **Providing a starting point for various SaaS applications**: While the course focuses on building a booking system, the architectural concepts and foundations covered can be applied to various SaaS applications.


### Why This Course?

- **Focus on Type Safety**: Learn the importance of type safety in reducing errors and building reliable software.
- **Database as Source of Truth**: Utilize advanced features of PostgreSQL to manage your application's data effectively.
- **Modern Technologies**: Get up to speed with current best practices using technologies like React, tRPC, and Tailwind CSS.
- **Scalability and Maintenance**: Prepare your applications for growth with scalable architecture and maintainable code.
- **Testing**: You will see how to set up testing of all parts of the stack, using a real database and type safety to ensure your application works as expected.

### Course Content Overview
Course Overview: Total Modules: **8** Total Lessons: **30** Total Video Runtime: **4 hours, 30 minutes**

### Summary
This comprehensive course will equip you with the skills and knowledge to build modern full-stack applications using TypeScript, TailwindCSS, tRPC, and PostgreSQL. You will learn how to create a robust and scalable application architecture, from the backend data layer to the frontend UI.

Build type-safe full-stack applications with database-centric strategies

Create a robust and scalable application architecture, from the backend data layer to the frontend UI. This comprehensive full-stack development course covers monorepos, TypeScript, Tailwind CSS, tRPC, and PostgreSQL, empowering you to build modern, scalable applications. Learn how to build a SaaS with type safety end-to-end, from the database through the backend and to the UI, with TypeScript, PostgreSQL, NodeJS and React. Using advanced features of PostgreSQL, you'll also learn how to achieve a high level of data integrity and performance, and how to manage database migrations using raw SQL for maximum control.

Fullstack Typescript with TailwindCSS and tRPC Using Modern Features of PostgreSQL

Master monorepos for streamlined development workflows and enhanced collaboration

Implementing type safety across your entire stack, starting from the database schema

Utilize Tailwind CSS to create consistent and beautiful user interfaces

Employ tRPC for seamless data exchange between frontend and backend

Managing database migrations using raw SQL for maximum control

Integrating modern back-end and front-end technologies

Harness advanced PostgreSQL features for optimized data storage, retrieval, and manipulation

Setting up automated testing that utilizes type safety and a real database

Build modern, scalable full-stack applications using a unified approach

One of the advantages of monorepos is sharing configurations across packages, which is especially useful for ESLint and TypeScript configs.

Before we do that, though, let's initialize your repository and add a 

There are several ways to go about this. You could create a package that contains the configs and then reference it from the other packages. You could also create a folder in the root of the repository that contains the configs and then reference them from the other packages. For now, simply leave them in the root folder.

Start with TypeScript. First, install it as a dependency in the root of the repository:

Create a configuration file for typescript. You could do this using 

 of shared configurations which I like to use.

With this available, you can simply reference it from your own configuration file. Create a 

 file in the root folder that looks like this:

{
  "extends": "@tsconfig/recommended/tsconfig.json"
}

Now, there are a lot of configuration options for TypeScript and going into those details is out of scope for this course. The default settings will do fine for now. You will, however, want to add two things to the 

{
  "extends": "@tsconfig/recommended/tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./packages" /* Specify the base directory to resolve non-relative module names. */,
    "paths": {
      /* Specify a set of entries that re-map imports to additional lookup locations. */
      "@easybooking/schema": ["packages/schema"]
    }
  }
}

This will enable "go to definition" and other features in our IDE to work across packages. It will also allow you to import packages using the 

Now, to configure TypeScript in our backend package, manually add a 

This file tells TypeScript to use our shared configuration, but specifying the output folder and the root folder for the package. We will do something similar for the schema package. Create the following 

---
title: Shared Configs
description: Setting up shared TypeScript, ESLint and Prettier configs
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/jp4mo8cxX2Re64KBD02sV7J4Wdxz01f4e00NaKTMLLyReM.m3u8
code: https://gitlab.com/fullstackio/books/newline-course-apps/fullstack-typescript-with-tailwindcss-and-trpc-using-modern-features-of-postgresql-app/-/tree/main/module_01/lesson_01.04?ref_type=heads
useMdx: true
---

## Shared Configs

One of the advantages of monorepos is sharing configurations across packages, which is especially useful for ESLint and TypeScript configs.

Before we do that, though, let's initialize your repository and add a `.gitignore` file to it. You can create it using [gitignore.io](https://gitignore.io) and specify `node`.

There are several ways to go about this. You could create a package that contains the configs and then reference it from the other packages. You could also create a folder in the root of the repository that contains the configs and then reference them from the other packages. For now, simply leave them in the root folder.

## TypeScript

Start with TypeScript. First, install it as a dependency in the root of the repository:

```bash
$ npm i typescript
```

Create a configuration file for typescript. You could do this using `tsc --init`, but there is a [repository](https://github.com/tsconfig/bases) of shared configurations which I like to use.

```bash
$ npm i @tsconfig/recommended
```

With this available, you can simply reference it from your own configuration file. Create a `tsconfig.json` file in the root folder that looks like this:

```json
{
  "extends": "@tsconfig/recommended/tsconfig.json"
}
```

Now, there are a lot of configuration options for TypeScript and going into those details is out of scope for this course. The default settings will do fine for now. You will, however, want to add two things to the `compilerOptions` section:

```json
{
  "extends": "@tsconfig/recommended/tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./packages" /* Specify the base directory to resolve non-relative module names. */,
    "paths": {
      /* Specify a set of entries that re-map imports to additional lookup locations. */
      "@easybooking/schema": ["packages/schema"]
    }
  }
}
```

This will enable "go to definition" and other features in our IDE to work across packages. It will also allow you to import packages using the `@easybooking` namespace.

Now, to configure TypeScript in our backend package, manually add a `tsconfig.json` file to the `services/backend` folder:

```json
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "lib": ["ESNext"],
    "outDir": "./dist"
  },
  "include": ["./src"]
}
```

This file tells TypeScript to use our shared configuration, but specifying the output folder and the root folder for the package. We will do something similar for the schema package. Create the following `/packages/schema/tsconfig.json` file:

```json
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "lib": ["ESNext"],
    "outDir": "./dist",
    "declaration": true
  },
  "include": ["./src"]
}
```