Tanstack Start - The New Full-Stack React Js Framework

TanStack Start - The NEW React Framework. With TanStack Start + Router, Clerk, Drizzle, Postgres, Zod, Shadcn + more!

What you'll learn

Increase your value and improve your knowledge as a web developer

Implement Secure Authentication with Clerk Auth

Build and Manage Databases with Postgres and Neon

Master the integration of TypeScript, shadcn/ui, Tailwind CSS, Zod, and React Hook Form to build robust, type-safe, and user-friendly applications

Protect specific routes to ensure that only authenticated users have access to certain parts of their application

Use Drizzle for seemless interactions with your Postgres Databse

Requirements

Willingness to Learn and Experiment: A proactive attitude and eagerness to explore new technologies, such as TanStack Start, TypeScript, and database management, will help students get the most out of the course

A basic understanding of React is required, as the course builds upon React concepts and integrates them with TanStack Start

Familiarity with Node and NPM is recommended for managing dependencies and running development environments

Description

Unlock the power of modern web development with TanStack Start - the NEW an exciting React framework! In this project-based course, you'll build TanTracker, a robust income and expense tracking application, while mastering the tools and techniques in the newest and hottest React framework.With step-by-step guidance, you'll go beyond the basics to integrate cutting-edge technologies, ensuring you walk away with real-world skills that are immediately applicable in your projects.What You'll Learn:TanStack Router: Set up dynamic, responsive routes for a seamless user experience.Server Functions: Implement efficient server-side logic to handle your app's data.TypeScript: Write clean, scalable, and type-safe code for the frontend and backend.PostgreSQL with Neon: Set up a hosted database to store income and expense data securely.Drizzle ORM: Simplify database interactions with a type-safe and developer-friendly ORM.Clerk Authentication: Integrate secure user authentication with ease.Zod Validation: Ensure data integrity with powerful schema validation.Shadcn UI & Tailwind CSS: Design a beautiful, modern UI with custom components and utility-first styling.Project Focus:You'll create TanTracker, a fully functional app that allows users to:1. Log Income and Expenses: Add, edit, and delete transactions.2. View Reports: Display data through dynamic charts and summaries.3. Manage Accounts: Create a personalized experience with secure user authentication.By the end of the course, you'll not only have a professional-grade project to showcase in your portfolio but also the confidence to build complex, scalable web applications using the latest tools in the industry.Who This Course is For:Web Developers: Looking to learn or level up their skills with TanStack Start and modern tools.Freelancers & Job Seekers: Want to create impressive projects to stand out in the competitive job market.Tech Enthusiasts: Eager to explore a comprehensive tech stack in a practical, hands-on way.Why Enroll?This course goes beyond just coding—it's about building something meaningful while gaining real-world experience. Whether you're a beginner ready to learn the latest tools or an experienced developer looking to stay ahead of the curve, this course is for you!Join us and start building TanTracker today!

Overview

Section 1: Introduction & Setup

Lecture 1 Introduction

Lecture 2 Tools and resources for this course

Lecture 3 Project setup

Lecture 4 Add shadcn ui, tailwind css, and custom fonts

Section 2: Add Clerk for Authentication

Lecture 5 Create the navbar

Lecture 6 Set up Clerk

Lecture 7 Create dashboard page and add route protection

Section 3: Build the new transaction functionality

Lecture 8 Add a link to the dashboard page in the user dropdown

Lecture 9 Create the transactions and new transaction pages

Lecture 10 Render the Card component for the transaction form

Lecture 11 Create the transaction form schema with zod

Lecture 12 Render the first form field for the transaction form

Lecture 13 Render the rest of the form fields for the transaction form

Lecture 14 Set up postgres database and create table schemas with drizzle

Lecture 15 Seed the database with category data

Lecture 16 Load categories data and populate in transaction form

Lecture 17 Create the createTransaction server function

Lecture 18 Create the authMiddleware

Lecture 19 Handle create transaction success

Section 4: Build the transactions page

Lecture 20 Render the transactions card with dynamic title

Lecture 21 Implement the month and year selects

Lecture 22 Populate the years select with available years

Lecture 23 Create the getTransactionsByMonth server function

Lecture 24 Finish the getTransactionsByMonth server function

Lecture 25 Build out the transactions table

Section 5: Build the edit transaction functionality

Lecture 26 Create the edit transaction page

Lecture 27 Load transaction data by transaction id

Lecture 28 Finish the update transaction functionality

Lecture 29 Implement the delete transaction functionality

Section 6: Build the main dashboard page

Lecture 30 Render the recent transactions card

Lecture 31 Query for the yearly cashflow

Lecture 32 Render the yearly cashflow card and bar chart

Section 7: Extra

Lecture 33 Deploy site live to vercel

Lecture 34 BONUS!

This course is ideal for web developers who want to increase their value as a web developer and enhance their skills in building websites and apps using modern tools and technologies like TanStack Start