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

While the concept of a monorepo, a single repository for everything, may seem unconventional to those unfamiliar with the approach, it aligns with various development best practices and can be a sound design decision."

Simplicity: A principle I apply is always to do the simplest thing that could work and then build from there when necessary. Of course, you should take advantage of your knowledge and skills; there are times when something might not objectively be the simplest thing that could work but because you are very comfortable with it and know that it will bring value, you choose to do it anyway.

Organicity: When building something I haven't tried before, I find it's better to be humble and expect that I am unable to see where things are going. This is harder than it sounds, at least for me. I tend to think up solutions and feel confident that they will work. Still, years of experience tell me that I am often wrong and it's better to let the design evolve.

---
title: Working With Monorepos
description: Working with monorepos
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/wnU4UUH601qP5SIyyrn4hZwjMOCjvQ2TM600RgBRTrKow.m3u8
---

## A Single Repository for Everything

While the concept of a monorepo, a single repository for everything, may seem unconventional to those unfamiliar with the approach, it aligns with various development best practices and can be a sound design decision."

Simplicity: A principle I apply is always to do the simplest thing that could work and then build from there when necessary. Of course, you should take advantage of your knowledge and skills; there are times when something might not objectively be the simplest thing that could work but because you are very comfortable with it and know that it will bring value, you choose to do it anyway.

Organicity: When building something I haven't tried before, I find it's better to be humble and expect that I am unable to see where things are going. This is harder than it sounds, at least for me. I tend to think up solutions and feel confident that they will work. Still, years of experience tell me that I am often wrong and it's better to let the design evolve.

The code journey:
![](https://d2uusema5elisf.cloudfront.net/courses/fullstack-typescript-with-tailwindcss-and-trpc-using-modern-features-of-postgresql/module_01/lesson_01.02/public/images/code-journey.png)

Kristian Dupont

We're going to be using a mono repo for our architecture.

That means a single repository for everything in case you're not familiar with

And if that's the case, then it might strike you as a little bit lazy or messy

I think as engineers, we all have some slight OCD and we tend to like to put

It's just sort of a natural instinct to us.

We like to make things nice and orderly and setting up repositories from the

like a very nice way of starting a new project.

And it's definitely a good skill or personality trait in a developer because I

know that being overly pedantic about details that might otherwise seem trivial

makes a code base maintainable in the long run.

You have to care about details that normal people, if you will, would simply go

Have two engineers, yes, that is absolutely necessary.

But this also means that I think that this is a personality trait that we need

and check a little bit because it feels like a virtue.

And so it's easy to let that just run and not control it.

And it doesn't always add value to what we're doing.

So I have this little, well, it's not a timeline.

It's absolutely not a rule that must be followed.

I break it all the time, but it's just an idea to get you started.

So this is how I think about code when I'm writing something new.

So if say I'm writing some new UI code, I will possibly just start it in line

component that's going to be adding this UI.

And only when I figure out that, okay, this is on the right track, when I'm

get a sense of what I'm doing, then maybe I will extract it into its own

And as that component grows and becomes perhaps useful to other files as well,

Now I often start with creating a file from the get-go.

I even start further to the right in this line, but as a general guideline, it

And the more I use it, the more generally applicable it becomes, and the more

it becomes, the further up in the directory tree I'm going to move it.

My directory tree tends to sort of mirror the levels of abstraction in the code

This doesn't match 100% and it's not always applicable, but that does sort of

be how things work, at least the way I end up structuring my code.

The last folder that I will probably have is some sort of shared folder.

At least I typically have that for components and hooks.

It's a little bit different for other things, but maybe there's going to be a

for the server or something where I have really generic stuff that can be used

But if I find out that this is actually something that can be used by multiple

really is very generic, then maybe I'll create an npm package, so to speak, in

I'm going to be going over this when we reach the workspaces lesson, because we

to be using workspaces, which is sort of a way to create little npm packages in

And then finally, if something is actually useful to others or I just feel like

is something I'm going to be using in more projects, then maybe I will end up

an npm package, because then it's just so generic that it really should be

It could be a private package, but I prefer to try to make things open source

So from that perspective, I would argue that a monorepo is at least the obvious

Even if you decide later on that it doesn't work for you for whatever reason,

the simpler solution to things, just having one place for everything.

So why not start there and then split things up if you decide later on that it

There are some significant upsides to having everything in one place.

For instance, it's much easier to share things like Linter settings and Type

We're going to be looking at that in a following lesson.

More importantly though, I would say that the fact that everything is

for your services, they back in and front end or possibly other services if you

them, for them to be synchronized in say a branch makes it much easier to try