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

The booking schema is the central component of the app. We will implement the approach discussed earlier when experimenting with 

. We will also create another table named customer, similar to the provider table, but representing the customers. Additionally, a small table named 

 will be added, enabling the differentiation between various service types that a provider might offer. The resulting SQL for the booking table appears as follows:

CREATE EXTENSION btree_gist;
CREATE TABLE booking (
  id int GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  customer_id int REFERENCES customer(id) NOT NULL,
  provider_id int REFERENCES provider(id) NOT NULL,
  during tsrange NOT NULL,
  EXCLUDE USING gist (provider_id WITH =, during WITH &&)
);

COMMENT ON TABLE booking IS 'Represents a booking made by a given customer, for a given provider. Guaranteed not to overlap with other bookings for said provider.';
COMMENT ON COLUMN booking.during IS 'Time of the booking';

CREATE INDEX booking_customer_id_idx ON booking (customer_id);
CREATE INDEX booking_provider_id_idx ON booking (provider_id);

Now, most of this we've already covered in the 

 lesson. The only addition here is that you have customer and provider id's, with matching indices. The 

 constraint has been updated to ensure that no two bookings overlap for the same provider.

Update your migration file to create the customer and booking table. In order to do this, start by rolling the existing migration back:

---
title: The Booking Table
description: Adding a booking table to our database schema
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/WYw68TmS6MAxTvpyi1VcGlbre02ZFq02GMpwGTxG23spg.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_03/lesson_03.03?ref_type=heads
useMdx: true
---

## The booking table

The booking schema is the central component of the app. We will implement the approach discussed earlier when experimenting with `ts_range`. We will also create another table named customer, similar to the provider table, but representing the customers. Additionally, a small table named `service_type` will be added, enabling the differentiation between various service types that a provider might offer. The resulting SQL for the booking table appears as follows:

```sql
CREATE EXTENSION btree_gist;
CREATE TABLE booking (
  id int GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  customer_id int REFERENCES customer(id) NOT NULL,
  provider_id int REFERENCES provider(id) NOT NULL,
  during tsrange NOT NULL,
  EXCLUDE USING gist (provider_id WITH =, during WITH &&)
);

COMMENT ON TABLE booking IS 'Represents a booking made by a given customer, for a given provider. Guaranteed not to overlap with other bookings for said provider.';
COMMENT ON COLUMN booking.during IS 'Time of the booking';

CREATE INDEX booking_customer_id_idx ON booking (customer_id);
CREATE INDEX booking_provider_id_idx ON booking (provider_id);
```

Now, most of this we've already covered in the `pg-ranges` lesson. The only addition here is that you have customer and provider id's, with matching indices. The `EXCLUDE` constraint has been updated to ensure that no two bookings overlap for the same provider.

Update your migration file to create the customer and booking table. In order to do this, start by rolling the existing migration back:

```bash
$ npx knex migrate:rollback
```

Now, you can update your migration file to look like this:

Kristian Dupont

We're almost ready to get to the central part of our data model, which is the

We'll be using the TS range type that we played around with in an earlier

But before we do that, let me just quickly add to other tables,

which is the customer table that is for now identical to the provider table.

And then a service type table that will just allow people to offer different

So these are very small utility tables. I'm just going to speed things up a

so that we don't spend all of our time looking into this.

So I'll add some things to, well, actually, let me just roll back first.

Migrate rollback. And then we will add a little bit to this migration.

So a customer table that looks exactly like the provider table for now.

And then a service type table that also has an ID.

And then it just has a name and a description.

So this is basically so that a provider can offer different types of services.

It's just a little thing we'll be using in our UI.

We now want to create the booking table and we're going to use the

B3 just extension that we used in our when we were playing around with it.

And well, let me just copy this really quickly.

So we add the extension as we did before and then we create this table booking.

And it's basically what we were doing before when we created the appointment

around except now we have a customer ID and a provider ID as well.

The time range is called during and we're still using the exclusion constraint.

But now we say that the provider ID has to be included in this constraint so

for the same provider, no two overlapping appointments can be created.

Obviously, you should be able to create an appointment with a different

a slot that has already been used by an initial provider.

We then create a little comment on the booking table.

This is optional, but I like to do this because it's in the database and this

be taken into account by panel and added as a comment on the TypeScript type as

And it can be just really nice to have that handy when you hover over something

We also add a comment to the during column to make sure that people realize

And then we add two indices to make it quick to look up one of these either by

provider because we will definitely be needing that. With all this in place,

create the equivalent down migration here.

So now we drop all of the things that we're creating in the reverse order as we

Let's try and run this and see if it satisfies our rules.

There we go. We now have some new entries here.

So customer is pretty straightforward. There should be no surprises here.

At this point, you might start to realize why the branding is valuable.

So customer ID is a number as is provider ID, but it's impossible to assign a

provider ID of vice versa. So this is now protecting us from accidentally

which might be something we might otherwise end up doing by accident.

We have the service type table. There is nothing specific or particularly

And then we have our booking table here. And you can see that first of all,

cannel has added this comment that we created as well as the time of booking

It sets the during to a string. And that is the default behavior that cannel

And that is because they have the tuple format that you might remember.

So in order to not lose any information, default for any range is to create a

We're going to be customizing this a little bit later on, but for now string