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

This is not a course in product design or business strategy. I only want to go into a few details because it is my strong belief that a good developer needs to care about and understand the product they are building.

To start off, the problem you are looking into is a booking system. Specifically, you will build a product for an imaginary customer who needs a system for users to book appointments with a service provider, like a handyman. To this end, you will also build user interfaces (UIs) for the end users and service provider system admins.

So, how do we find out how to best solve this problem?

---
title: Analyzing
description: Looking into how to analyze a problem and create a product
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/oc4p005uXqU1AuLvuB9Tpvzb8WxsVn01yriiR5GDvNfE8.m3u8
---

## Analyzing

This is not a course in product design or business strategy. I only want to go into a few details because it is my strong belief that a good developer needs to care about and understand the product they are building.

## Our problem

To start off, the problem you are looking into is a booking system. Specifically, you will build a product for an imaginary customer who needs a system for users to book appointments with a service provider, like a handyman. To this end, you will also build user interfaces (UIs) for the end users and service provider system admins.

So, how do we find out how to best solve this problem?

## \*DD

There are several types of "-driven development" methodologies, which I think have gone somewhat out of fashion. Most prominent include:

-   Test-driven development
-   Behavior-driven development
-   Data-driven development
-   Design-driven development.

In my experience, following dogma is rarely a good idea. Yet, there is value in these methodologies' underlying principles, so I recommend reading up on them.