Welcome to

Fullstack Typescript with TailwindCSS and tRPC Using Modern Features of PostgreSQL

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

Course Syllabus and Content

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.

Module 1

Introduction and Getting Started

7 Lessons1 Hours 5 Minutes

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.

  • 01Introduction
    Sneak Peek00:03:09

    Introduction

  • 02Working With Monorepos
    Sneak Peek00:06:35

    Working with monorepos

  • 03Workspaces
    Sneak Peek00:06:45

    Setting up npm workspaces in our mono-repo

  • 04Shared Configs
    Sneak Peek00:17:56

    Setting up shared TypeScript, ESLint and Prettier configs

  • 05Frontend
    Sneak Peek00:09:27

    Setting up the frontend with Vite, React and Tailwind

  • 06Schema
    Sneak Peek00:16:20

    Setting up the database schema and migrations

  • 07Backend
    Sneak Peek00:05:21

    Setting up Koa

Module 2

Analysis and Design

3 Lessons 10 Minutes

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.

Module 3

Modelling with advanced Postgres features

3 Lessons 27 Minutes

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

Module 4

Frontend UI

5 Lessons 52 Minutes

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.

Module 5

Endpoints

5 Lessons 44 Minutes

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.

Module 6

Testing

3 Lessons 42 Minutes

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

Module 7

Connecting The Dots

3 Lessons 51 Minutes

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.

Module 8

Conclusion and extra resources

1 Lesson 1 Minutes

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