Fullstack Typescript with TailwindCSS and tRPC Using Modern Features of PostgreSQL
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.
- 4.3 / 5 (5 ratings)
- Published
- Updated
4 hrs 54 mins
30 Videos
Kristian Dupont
I write code, I help teams write code and I help companies create teams that write code. I am a fullstack developer at Invert and am the author of Fullstack Typescript with TailwindCSS and tRPC Using Modern Features of PostgreSQL.
01Remote
You can take the course from anywhere in the world, as long as you have a computer and an internet connection.
02Self-Paced
Learn at your own pace, whenever it's convenient for you. With no rigid schedule to worry about, you can take the course on your own terms.
03Community
Join a vibrant community of other students who are also learning with Fullstack Typescript with TailwindCSS and tRPC Using Modern Features of PostgreSQL. Ask questions, get feedback and collaborate with others to take your skills to the next level.
04Structured
Learn in a cohesive fashion that's easy to follow. With a clear progression from basic principles to advanced techniques, you'll grow stronger and more skilled with each module.
Build type-safe full-stack applications with database-centric strategies
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
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.
Our students work at
Sample Course Lessons
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.
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.
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.
- Sneak Peek00:03:09
- Sneak Peek00:04:04
- Sneak Peek00:02:49
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.
- Sneak Peek00:06:18
- Sneak Peek00:16:10
- Sneak Peek00:04:47
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.
- Sneak Peek00:01:25
- Sneak Peek00:07:58
- Sneak Peek00:21:53
- Sneak Peek00:04:52
- Sneak Peek00:16:13
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.
- Sneak Peek00:07:45
- Sneak Peek00:17:22
- Sneak Peek00:07:22
- Sneak Peek00:07:28
- Sneak Peek00:04:56
Testing
3 Lessons 42 Minutes
In this module, you will create unit tests of the frontend by mocking the tRPC endpoints using Vitest.
- Sneak Peek00:04:33
- Sneak Peek00:25:00
- Sneak Peek00:12:37
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.
- Sneak Peek00:21:07
- Sneak Peek00:14:07
- Sneak Peek00:15:49
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.
- Sneak Peek00:01:02
Subscribe for a Free Lesson
By subscribing to the newline newsletter, you will also receive weekly, hands-on tutorials and updates on upcoming courses in your inbox.
What Students are Saying
Meet the Course Instructor
Build robust and scalable full-stack applications with modern TypeScript, Tailwind CSS, and tRPC—enroll today!
Master full-stack development with a single repository for everything!
newline Pro Subscription
$18/MO
Get unlimited access to the course, plus 60+ newline books, guides and courses. Learn More
Billed annually or $30/mo billed monthly. Free to cancel anytime.
- Discord Community Access
- Full Transcripts
- Money Back Guarantee
- Lifetime Access
Plus:
- Unlimited access to 60+ newline Books, Guides and Courses
- Interactive, Live Project Demos for Every newline Book, Guide and Course
- Complete Project Source Code for Every newline Book, Guide and Course
- Best Value 🏆
Frequently Asked Questions
What is Fullstack Typescript with TailwindCSS and tRPC Using Modern Features of PostgreSQL?
Fullstack Typescript with TailwindCSS and tRPC Using Modern Features of PostgreSQL is a course that teaches how to set up a full-stack application using PostgreSQL, NodeJS, Koa, Knex, React, TypeScript, tRPC, and Tailwind CSS. The course focuses on creating a type-safe application with the database as the source of truth. The course consists of 8 modules, 30 lessons and 4,5 hours of video content.
What are the prerequisites for this course?
You should be familiar with TypeScript development, preferably both on the backend and the frontend, and basic knowledge of SQL. You will also need NodeJS installed, and either Postgres or Docker.
Who is this course for?
This course is for developers who want to learn how to build modern type-safe full-stack applications. The course is also beneficial for developers who want to learn how to use PostgreSQL as the database for their applications.
What are the learning outcomes of this course?
By the end of this course, you will be able to: Set up and configure a full-stack application, as well as design and implement a type-safe data model.
What are the benefits of using this stack?
It's mature and well-supported. The extra focus on type safety let's you iterate and change things with confidence. Furthermore, there is no framework that gets you going quickly but then becomes a burden when you need to do something it doesn't support. The architecture you will learn will be able to scale, both in terms of complexity and performance requirements, but also in terms of the number of developers working on it.
What are the next steps after completing this course?
After completing this course, you can start building your own full-stack applications using the skills you have learned.
What if I don't like the course?
We offer a 30-day money-back guarantee, so if you're not satisfied with the course, you can request a refund within 30 days of purchase by sending us a message.
What is included in the course?
This course includes 8 complete modules. It has 30 videos, totaling over 4hr and 30 mins runtime. You’ll have access to every lesson video, textual lesson content, downloadable project code files, interactive IDE, and AI Tutor.
How long will it take to complete the course?
The course offers flexibility, allowing you to learn at your own pace. Start, stop, re-watch anytime. It’s expected that you’d spend approximately 6-8 hours going through the entire course materials.
Can I access the course on my mobile device?
Yes, the course is fully responsive and can be accessed on your mobile device.
Is there a certificate upon completion of the course?
Yes, you can get a certificate by sending us a message.
Can I download the course videos?
No, the course videos cannot be downloaded, but they can be accessed online at any time.
What is the price of the course?
The course is currently priced at $69 USD. Alternatively, you can access the complete course as part of the "newline Pro subscription", which currently costs $18/month when billed annually.
What if I need help?
You can ask us questions anytime through the community Discord channel or by sending us a message.