$\newline Logo$

MODULE 1
Introduction and Getting Started
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.
MODULE 2
Analysis and Design
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
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
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
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
In this module, you will create unit tests of the frontend by mocking the tRPC endpoints using Vitest.
MODULE 7
Connecting The Dots
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
In this module, you will learn about some additional resources realted to auth and security, DevOps, complex methods, and client side routing.
- LESSON 8.1Conclusion and extra resources

This video is available to students only

Frontend

Setting up the frontend with Vite, React and Tailwind

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Fullstack Typescript with TailwindCSS and tRPC Using Modern Features of PostgreSQL course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

Unlock This Course

Get unlimited access to Fullstack Typescript with TailwindCSS and tRPC Using Modern Features of PostgreSQL, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

$Thumbnail for the \newline course Fullstack Typescript with TailwindCSS and tRPC Using Modern Features of PostgreSQL$

LessonEditor