Hello, my name is Ankita and welcome to

the Tanstack start course. In this

course, we are going to build and deploy

a production ready application from

scratch using the Tanstack start

framework. The best way to learn

something and truly master it is to ship

something real. So, we are going to

build an app called as start which is a

modern e-commerce application for

selling your digital products. This app

will teach you everything you need to

know about panstack stack including real

routing, data fetching, loaders,

serverside rendering, dynamic routes,

cart management, server functions, SEO

and a lot more. Basically everything you

need to know to understand how to build

a production ready application using

tanstack start. One of the reasons what

makes Tanstack start so exciting is the

ecosystem around it. So throughout this

course we will be leveraging powerful

libraries from the Tanstack start

ecosystem including React Router,

Tanstack query aka React Query and

Tanstack form. You will learn how these

pieces work together and more

importantly when to use each one by

building and deploying an application

using the Tanstack start framework and

following the specific course. You will

learn how tanstack actually works not

just at the surface level but how key

concepts like routing isomeorphic

loaders server functions mutations and

state management fit together in a real

app. You will also learn how tanstack

start differs from other frameworks like

Nex.js and when it makes sense to pick a

framework like tanstack start and when

it doesn't. On top of that, we will be

using Postgress SQL with Drizzle OM for

type safe database access and

migrations. And we'll be hosting our

database using Superbase, which gives us

a reliable production ready post setup.

For the UI, we will be using Tailwind

CSS alongside Shatzian UI component

library. And yes, this course includes

the latest version of which allows you

to create a project using a variety of

different themes and base libraries such

as radics UI or base UI. This allows us

to build clean, accessible, and reusable

components. We'll be using Zord for

schema validation and TypeScript end to

end for full type safety. This entire

app is built on top of V for a fast

development experience and Nitro to

power the server runtime. We will then

deploy our application using AppRight,

an open-source development platform for

developers who like to ship things. Our

goal towards the end of this course is

to not only learn how to use the Tanstax

start framework, but to actually

understand it in depth. So, what are we

waiting for? Let's get started. To

follow along, make sure to download the

tanstack start cheat sheet that includes

the complete source code, all the

visuals used, a special discord forum,

and all the assets and links that I have

used in this specific video. So, make

sure to check the link in the

description below and download it.

Welcome to Start Shop. Today I'm going

to walk you through this modern

e-commerce application built with

tanstack start tanstack router tanstack

query and this is a fullstack react

application that demonstrates serverside

rendering type same routing real cart

management interaction with a postgress

database with superbase and grizzle OM

and so much more so let me show you what

makes this app special it's built

entirely with the tanstack ecosystem

giving us type safe routes server

function and seamless data

synchronization. First, let's take a

look at the homepage. We have built this

beautiful hero section introducing start

shop and below that you will see three

featured products displayed in a grid

layout. These products are loaded on the

server side using tanstack starts server

functions which means they're available

immediately when the page loads. Notice

how smooth the navigation is. That's

because Stanstack router handling our

type safe routing. Now if you click on

the products page or go click on browse

products. This page displays all

available products in our catalog. Each

product card shows the name, price, the

title, inventory status, and you'll also

be able to add to car. Each card also

has this nice little hover effect and

clicking on any of the product will take

us to its detail page. All of this data

is being fetched using tanstack query as

well as tanstack start server functions

and we'll take a look at how it all

works together provides us with caching

background updates and optimistic

updates. The initial data is loaded on

the server side for fast initial loads.

Then pans query takes over for any

client side updates. Let's click on the

product to see its detailed page. Here

we get a full view of the product with a

large image, detailed description,

price, rating and so on along with

inventory status. Also press add to cart

which automatically adds the item to the

cart. Now notice the specific inventory

status indicator. It just shows if that

specific item if it's in stock or not.

This is all managed through our database

schema. Now here's where things get

interesting. If we click on add to card,

this action is handled by a server

function. The card is stored in our

postquest database, not just in browser

local storage. This means your card

persists across sessions and devices.

You're using superbase to store all the

information. Panstack start also

includes SWR scale while revalidate

feature. Update the card information.

For example, I'm going to say we we have

two products now. And if we go back, you

can already see the cart count has

changed to five. 2 + 2 + 1. If I say two

more, if we go back here, it has changed

to six. That's because of the stale

while revalidate feature. Updates

immediately. This is tanstack queries

optimistic updates working with our

server functions to provide instant

feedback. Now at the bottom of each

product page, we also have a list of

recommended products that dynamically

load based on the product. It uses React

Suspense and the use hook from React for

a smooth loading experience. If you

refresh the page, you're not going to

see a suspense boundary because the

server is so fast, but it also gives us

a smart loading experience. Let's check

out the shopping cart. Here we can see

all the items we have added. We can

increment the count and you can already

see it's incremented. On top of that,

it's also updated with our database. So

if you refresh the page, you can see the

count update here. We can also decrement

the count and remove the item completely

as well. For each item, we can adjust

the quantity using the plus and minus

icons or type directly within the input.

Each change is immediately synced to the

database through our server function.

Also watch the subtotal and the total

update in real time as I change

quantities. The sub the order summary

shows the subtotal and the total all

calculated dynamically. We can also

remove an item entirely. Again, this is

all persisted in our database. We

refresh here. It's gone. And there are

four items here. If we completely remove

everything, we also get a nice empty

state with a call to action to browse

the product. We can also add to card no

matter where you are on the page and

it's going to persist for example. Now

one of the coolest features inside of

this application is the ability to

create a new product directly from the

UI. So here let's navigate to create

product and create a new product. Here

we can add panstack cooler hat. Let's

say very a very cool hat. Price would be

56. Let's add some image. Badge will be

featured and it is in stock. Now if we

create a product, if we go all the way

to the bottom, you will see panstack

cooler hat. The hat information is over

here, the image and so on. Now this form

uses panstack form which validates each

field in real time. So if I add a

invalid name and try to submit, nothing

really happens. The validation is

powered by Zord schemas ensuring type

safety from from the form all the way to

the database. If we go back to the

products, we also see the latest product

updated in real time. When I submit the

product, the product is in fact created

using a server function and townstack

router as well as react query

automatically invalidates the products

query cache. This means when we navigate

back to the products page, our new

product appears immediately without

needing a manual refresh. Now let's

highlight all the technical features

that makes this app really powerful. We

using server functions. All data

notations go through tanstack start

server functions giving us type safe API

calls without writing separate API

routes. We also get complete type safe

routing with full TypeScript support.

Every route is type checked at compile

time. We also get optimistic updates for

instant UI feedback for tail using the

tail rev validate feature. Every page is

server side rendered by default. Initial

page loads are server rendered for first

time to first bite. Then the app

hydrates for a seamless client side

experience. This uses a real postquest

database with drizzle OM for type safe

database queries throughout the app. The

navigation is instant and smooth because

of timestack router that handles

pre-fetching and caching. So moving

between pages feel instantaneous. The

header is sticky for example and has a

nice glass morphism effect. It also

syncs the cart count which gives us

constant feedback about user shopping

state. The entire app is fully

responsive as well. So you could

immediately see how the cards go from 3

to one and so on. So to conclude, Start

Shop gives you a complete e-commerce

application demonstrating modern React

patterns with the Tanstack ecosystem.

This is a productionready foundation

that you can extend with features like

authentication, payment processing,

order management, and more. So thank you

so much for watching. To continue

supporting this channel, please press

the like button and hit subscribe if you

want me to create more content just like

this. And don't forget to check out the

cheat sheet if you want to follow along

with all the links the GitHub repo and

so on to build with me. All righty let's

start building. So what is tanstack

start? Tanstack start is a fullstack

react framework built on top of the

tanstack ecosystem. The tanstack

ecosystem had have a lot of different

libraries such as tanstack start which

is the framework router query table db

ai form virtual pacer store dev tools

and I'm sure there is more cooking right

now. So if you go ahead over to the

tanstack start it is a full stack

framework powered by the tanstack router

for react and solid application. Instead

of being a single monolithic framework

tanstack start is designed to be

composable. It brings together a variety

of different features. For example, it

brings together routing, data loading,

service execution, and rendering in a

very explicit way. So you always

understand what's happening and why.

Now, Tanstack start gives you the entire

gives you a lot of flexibility to build

your React applications the way you

would want to. So there's less magic

involved compared to frameworks like

Nex.js JS where a lot of opinions are

made for you and in sansex start it's

more so that you have to make those

opinions and this is an very extremely

and this is an extremely important this

is a very crucial detail that you need

to remember so you have to configure a

lot of it yourself but they give you all

the tools necessary so you just sort of

like pick and choose from a different

pieces of you pick and choose based on a

different piece so you pick and choose

what pieces you want it's kind of like

Lego boxes here Anstack start provides

you full document SSR streaming server

function bundling and more thanks to

weed. Now before we get into weed, we

need to understand that tanstack start

is built on top of two key tech. One is

tanstack router and one is weed. Now

tanstack router is in fact a type- safe

router for building web apps with

advanced features like nested routing,

search params and data loading. And

here's why I have so much confidence in

Tanstack start. Because even though

Tanstax start the framework is in the

release candidate stage right now,

Tanstack router is already in production

and it's being already used. You can see

the number of npm downloads here.

They're going up by the second. So at

the heart of Tanstack start is the

Tanstack router. It isn't just

responsible for managing URLs. In

panstack start routes define the way

your app is structured. How you navigate

between the routes, how layouts work,

data loaders, error boundaries, search

params, and when the code should run on

the server versus on the client. This

means that routing becomes the backbone

of your entire application. So instead

of having logic scattered throughout, it

gives you some organization tools so

that your routes are organized which

makes complex apps easier to understand.

Now what is weed? Weed is the tool

responsible for your development

experience inside of panstack start.

It's tanstack start is built on top of

wheat. It powers the dev server hot

module replacement and production

builds. It literally give you lightning

fast HMR which is hot module

replacement. So that whenever you update

any file, your changes are instantly

reflected on the server. So vit is why

your dev server starts instantly.

Changes to show up immediately and the

app feels fast while you're building. So

vit answers a very simple question. How

quickly can I write and iterate on the

code? And tartar does use wheat because

it's modern, it's powerful, it's fast

and it's framework agnostic. That means

anyone any other frameworks can use

beat. Now tanstack start is also we

talked about tanstack router we talked

about beat but tanstack start also uses

nitro. Now nitro is the server runtime

layer extends your vit application with

a production server compatible with any

runtime. So you can ship full stack vit

applications with nitro. Nitro is in

fact your server runtime layer. So when

you write things like route loaders or

server functions inside of panstack

start that code needs something to

actually run it on the server and that

is in fact it was job. So nitro will

handle all the server side stuff such as

executing server side code handling

requests and responses and it's in fact

this plugin inside of the v config file

and we'll take a look at that later.

Nitro also answers this question. How

does this app actually run in

production? It's not but it's also

important to understand that nitro is

not hosting your app. It's the engine

that runs your server code. So you would

definitely need some hosting platform

like apprite versel cloudflare and so

on. The next tool the next tooling

that's extremely important in the panac

ecosystem is vg. Now vg is where

everything comes together. In fact if

you want to ship your own framework you

could basically use vi here. You could

build your javascript applications and

frameworks with ease. It's the full

stack JavaScript SDK. It's the

orchestration layer that connects read

Nitro and makes full stack rendering

possible. You can use Vit for

development and builds, Nitro for server

execution, routing and rendering across

server and client and Vinci is the one

responsible for all of that. So you

don't necessarily interact with Vinci

but know that it's the blue that make

makes Tanstack start work as this

cohesive system for example. So the real

question here is what makes Tanstack

start so powerful. The real power comes

from how these tools are combined. So

first of all everything is explicit. So

you always know where is data loaded,

where the code runs, how routing affects

rendering and so on. It's production

ready per by default. That means you're

not just building a demo and then

upgrading later. From day one, you are

interacting with real routing, real

server execution, real deployment

patterns and so on. Plus, you get 100

full type safety. So if you create a

route that doesn't exist, then sex start

is going to throw an error. So your

application is now going to break. Now I

have over 300 plus lessons on the Nex.js

course platform and it's built on top of

Nex.js. But any I remember before Nex.js

CS supported a feature like this. Even

linking to a route broke the whole thing

because I have more than 300 lessons.

Sometimes it's hard to keep track if I'm

linking it the right way. So this pug

feature is like really powerful. Plus it

gives you type safety. So should I use

tanstack start or just tanstack router?

Now 90% of the framework usually comes

down to the router and tanstack start is

no different. But tanstack start relies

100% on the router. But there are a few

powerful features that tanstack start

gives us. It gives us full document SSR.

So by default every single route inside

of panstack start is going to be

rendered on the server side. Although

you could configure it, this gives you

better performance and SEO. You can also

configure SEO for your routes as well.

Just like you would in Nex.js with

metadata functions. You also get

streaming. So you get progressive page

loading for improved user experience.

You get server routes as well as API

routes and we'll talk about the

differences a bit later but it allows

you to build build your backend

endpoints inside the framework alongside

your front end goal. It also gives you

server functions and you need to think

of server functions as ways your

application would interact internally.

So if there are internal things you have

to use server functions. They're

essentially type save RPCs between

client and server. You get middleware

and context. So you do get powerful

request and response handling. Full

stack bundling. So that means it's

optimized. It creates optimized builds

for both client and serverside code. You

can deploy it to any framework possible.

Any provider possible deployed to any V

compatible hosting provider. Now here's

the thing with Nex.js. It was in a lot

of controversy for how it's heavily tied

to Versel. Obviously over the years that

story changed but with tanstack start it

is not tied to anyone. It's in fact you

can deploy it to whatever read

compatible hosting provider if you like.

So that is amazing that it's true it's

open source in a true sense. You also

get end to end type safety across the

entire stack and this is very powerful

because it protects you from shipping

those gnarly bugs uh inside of your

application. So with great power comes

responsibility as well. So definitely

there are some limitation. It does not

support server components yet and with

with the recent react server components

vulnerabilities. I mean it's not a bad

thing but they are actively working on

integration. But I know that analyst

Linsley was the creator of this entire

dance stack ecosystem. He also

explicitly said on X that now that these

vulnerabilities are exposed, he's going

to take extra precautions on how he

creates react server components inside

of Tanstack start. But otherwise,

Tanstack start provide the same

capabilities as other frameworks, even

more features and a powerful developer

experience. And because T standstack is

100% open source, free to use and always

will be. It has no affiliation with any

of the companies, it's awesome, but it

also has a web community, great

contributors, and also a variety of

sponsors that make it happen. So that's

extremely important. So to summarize,

Tanstack start gives you the structure

and stack router defines how your

application is going to be organized.

Ved makes your developments fast. Nitro

runs your serverside code. Vinci is the

one that ties everything together. So

once you understand this specific mental

model, build building with tanstack

start is going to become very powerful

for you. So now let's go ahead and

create our tanstack app. So we'll be

heading to tanstack.com and click start

from here. Click on getting started and

let's click on getting started from the

left hand side as well. You could start

a new project from scratch using the

tanstack start CLI which is what we

would be doing. But they also have a

variety of different examples if you

want to try it out. So if you click on

tanstack start CLI there are two few

options. So let's just go ahead and copy

this or press this copy button. What

we'll do is we will clone and run the

basic example right away. If we just go

to this specific example but personally

I just like to start from scratch. Now

if you can see there are a bunch of

different examples here. They provide a

stack widths preview to find one that

feels like a good starting point for

example and they also haven't deployed a

netify button if you want as well. Again

net nifi is another cloud provider likel

apprite and so on. All right so let's go

ahead and get started. So here let's

just press enter and this is how you

could configure your start application.

What would you like to name your

project? Now let's call this tax shop.

Let's go ahead press enter. Let's call

this tax shop

app.

Feel free to call it whatever you like.

Then yes, we are going to use tailwind.

And here we could just say yes, I want

ESLint. You can pick a specific

deployment adapter such as Cloudflare,

Netifi or Nitro. We're going to go with

Nitro to be agnostic. And this is where

you could pick a variety of different

adapters, add-ons uh to Tanstack such as

Neon, VGOS, clerk, convex, entry, so on.

So you can see there are so many over

here. We're not going to go with any of

these because we want to just set up

something from scratch. And I think the

best way to learn something and not get

confused is by just starting things from

scratch. Would you like any examples?

No, no examples here. All righty. So now

it's going to install the dependencies

and dev dependencies installed anstack

router and any of the other dependencies

needed also obviously react any of the

dependencies needed for bootstrapping

our application. There we go. Now let's

just go to stack shop app and then open

it up in cursor. Now you'd be also just

go directly to the editor of your

choice. I'm going to be using cursor for

my example, but you could also just go

to the editor of your choice and open

this project as well. All righty. So now

we have quite a few projects ready to

go. Now let's go ahead and start the

development server. Just say npm rundev.

As we do it has started a server here

and you can see wheat and you can just

go to localhost 3000 and there we go. If

this is your first tanstack start

application, congratulations. you have

created your first app. Now that we have

our application created, let me go ahead

and walk you through the project setup.

So first of all, we have the stack

folder where all your files are going to

be compiled. VS Code for how the route 3

would work and we'll get to that in a

second. Then we have the public folder

for all your public assets. Robots.tsx

favicon. Now favicon is in fact in the

app folder in Nex.js app router. So keep

that in mind if you're migrating from

there. We have a robots.txt txt file for

our SEO robots. Then let's walk through

each file here. So first of all, let's

go to router.tsx. Now router.tsx in fact

creates our router here. So it gets

create router from tanstack react

router. It creates a router instance and

this instance is what would be used by

the tanstack start framework. The

default preload state time is zero.

which means if you should use any

preload stale time or not. You could

also change it to 30 seconds and the

stale time for this for routes would be

30 seconds. But again more on that

later. Then you could take a look at

route tree.gen.ps.

Now this is a file that anstack start

creates or transact router creates that

has a mapping of all the files folders

and routes inside of pansstack

framework. This gets generated so that

whenever you try to link to a route that

doesn't exist, it can tell you that.

Then we have a status rptsx and this is

where we have the import at tailwind

wherein tailwind directive is in fact

installed here. All righty. So now let's

go to the routes folder. Routes folder

has two files now index.dsx as well as

root.tsx.

index.tsx is very similar to page.tsx

inside of the app router. anytime you

route to it. This is the default route.

But keep this in mind. If I close this,

we are exporting a route called as

create file route and the component here

which is the app component. And that's

exactly how you create a route inside of

anstack start. Now these are all the

different features here and we're just

looping through those features here. So

there's nothing exciting here that's

going on. But keep in mind create fire

route is very important. Then we have

the underscore root.ts. tsx file. This

specific file is sort of like the

layout.tsx inside of Nex.js that sets up

your HTML and body elements such as

HTML, the head tag, header component,

tanstack dev tools, scripts and so on.

So if you take a look at the head

content, head content scripts and create

root route all of them come from React

Router. Tanstack dev tools come from

React router dev tools. and stack router

dev tools also come from React router

dev tools and so on. Now this head

element is extremely important because

this is a root route. We are create

using create root route versus if you're

creating a regular route you would just

use create file route. Again the naming

is honestly amazing because if you see

how it's beautifully designed you're

going to fall in love with tanstack

start. Then we have this head element

that I was just talking about a second

ago wherein this specific head element

allows us to set up all the meta tags

inside of our application. For example,

if we rename this to stack shop and go

back here, you're going to see that now

the title has changed to stack shop

here. That's exactly how you set up your

application. That's exactly how you set

up the title. If you want a description,

then you could do the same as well.

Stack shop is a platform for buying and

selling products. And this just extends

the meta tag inside of your head to add

a description. If you go to browser

developer tools, go to head, go to

title, we have stack shop. But if you go

to description, we have stack shop is a

platform for buying and selling

products. This is exactly what we just

set up. Then we have links for

stylesheet for example and the shell

component is this root document. Now

like I mentioned this is similar to how

layout is set up. It in fact inside of

next.js it wraps your entire application

because it contains the HTML head and

body elements and all the children would

be the children routes in your

application. Then the scripts would be

any scripts you would add inside of the

application. Now if we head to data

you're going to see that this is a

server function that you can create

different types of functions inside of

tanstack start. One of them is a server

function that basically creates a HTTP

endpoint with a get method. Now if you

als you can also create a post method as

well and this would in fact be a

mutation. Now but server functions are

not just limited to post like it is

inside of Nex.js. It's in fact get. It

could be get or post because they're

server functions. So they are HTTP get

and post calls here. Then if you go to

components, we have the header fire

which again is a simple react component.

Now if you want to link between

different elements, you would just use

the link component from React router

here. Now one powerful feature of the

link component is that let's say we were

to go to panstack router here. Let's

open up browser developer tools. Go to

the network tab. Select all. And now if

I open this up, you can see that when I

hover over these elements or if I scroll

down, nothing is loading here. One of

the powerful feature of the link

component is that on hover, it's going

to preload the upcoming route that you

you might be scrolling into as you enter

a browser's viewport. So for example to

enable that feature we need to go to the

so for that if you go to the router file

that we had here and here let's just say

default preload as intent this is going

to preload all the links for example. So

here if we go and open up browser

developer tools go to the tab you can

see that when on hover these pages are

already loaded and that's the link

component inside of panst start it it's

quite powerful it's very similar to the

link component inside of xjs and as you

are about to scroll more items if they

have links in it that specific page will

get preloaded so when you navigate to it

the navigation is quite instant there's

one more file that is extremely

important important inside of the

tanstack start ecosystem which is the

vit config file. Now v config is amazing

because it lets you configure your how

your vit server should behave how your

entire application should work. So you

can see read uses this plug-in system so

you can plug and play like level pieces

what you want and what you don't want.

For example you want panstack dev tool.

So it's a plugin. Here we have nitro

here which allows us to spin up our

server runtime. We have config paths

with the sconfig JSON. Tailwind CSS is

also a plug-in. Tanstack start is a

plugin. V react is a plug-in and so on.

If you want to configure tanstack start

further, we will be making some changes

in this file as well. This v config file

is extremely important. Components is

where all the components will be stored.

data is we what we already saw the data

we have this server function here then

we have the eslim config file that

allows us to configure how our

application should lend you we have

prettier which gives us a common config

for how our application should compile

for example semicolon is false single

code is true trailing comma is all and

so on now feel free to configure how you

want your application to format on save

then we have the ds config file how

typescript should compile and so on.

Those are all the different files inside

of panstack start. Let's talk about

routing now. So when it comes to

routing, there are different ways you

can route inside of tanstack start. And

since built on top of tanstack router,

whatever routing logic or fundamentals

that apply inside of tanstack start come

directly from the router. So if you have

any question related to the router, I

would recommend checking the

documentation of the router instead. So

let's talk about the index route. First

of all, we have already taken a look at

this, right? We took a look at index.tsx

that allows us to create a root route or

I should say a index route, a default

route, this specific folder. And one

thing I should also mention that

Tanstack uses a filebased routing system

as well. And based on the way you name

your files, it is automatically going to

route to it. So first of all, as you can

see, this is the index route. Then we

have the root route for example. But now

let's say if you want to create a brand

new route, let's call it as products

because we would need it eventually. If

we call it products, then if we create a

index.tsx route, this means that anyone

could route to /roucts. So the minute we

do, you can see this code automatically

got populated because tan stack start

already knows when it comes to file what

you're up to. It's a bit of juju here,

but what it does is it it knows the

location of the file where if it's a

folder and if it's an index or tsx file,

then it automatically autopop populates

that code. So again, create file route

is a function here. Remember we talked

about this and this is where we say /

products is the route we want to expose

and what component it should map to. So

here we are calling hello products. Now

let's go to taxop and now let's go to /

products. Now as we do you can see hello

products is right here. That means a

products route has been created. That's

amazing. What about dynamic routes then?

You may already be wondering because if

you think about it, we have indexed out

but we also have dynamic routes then.

Well, in order for you to create dynamic

routes, you need to create another file,

not a folder like you do in next.js, but

you just do dollar sign ID and ID

becomes a slug of for that specific

dynamic route dot DSX. Now this just

means it will route to / product/ id and

this is the ID of your application. We

could just use route dot use params and

this is a route constant that we

declared. It's magical. It also has

things like route use loader data. We'll

take a look at that later. But now you

could simply just point to it and get

the ID from the route. So now if we go

to slash one, we say slash one. If we go

to whatever then we get whatever and so

on as well. So like this is a dynamic

route inside of panstack ecosystem

panstack start. All righty. So now we

learned about index route. We learned

about dynamic routes. Then we also

talked about links wherein we could link

between the products as well. So for

example, if we go here and then add a

link component from tanstack react

router, we have to use the two attribute

and link to any of these for example. So

the fact that one doesn't exist, we just

have to do something like this where we

say products ID params ID 1 ID 2 ID3. So

now if we go back here and refresh the

page, you can already see the link. So

if I click on it, it goes to ID 1. Click

on the other ID 2 and click on the

third, then ID3 for example. And that's

how linking as well works. Now let's go

ahead and clear some of the files we are

no longer going to need such as these

demo this demo folder. Then if we go to

index.dsx,

we won't need any of this. So let's just

say the main page. Maybe we can link to

products. import link from panstack

router. Remove this unused constant.

Remove the unused imports and so on. We

can remove this logo or SVG file inside

of data. We don't need this server

function at all. We can keep the header.

We won't need any of these at all. For

example, so we can just keep a simple

header component.

And let's call this stack shop.

Now let's remove all these imports and

unused functions for example. All

righty. So now you can see we have stack

shop. When you click on products, it

goes to products and these products goes

to individual products. That's the basic

setup. Thanks to the tanstack ecosystem,

Delvin is already installed. As we saw

earlier, we already have a plug-in in

the V config file for Tailwind, but we

don't have SHAT CN UI right now. So for

that, we are going to go ahead and

install it. And the latest update of

SHTN allows you to create a new project,

apply a bunch of styles, pick a

different component library or an

existing preset for the component

library, for the style, for base colors,

fonts, and so on. So what we could do is

go ahead and pick this and create a

project. Now I have already gone ahead

and create pick a few defaults. For

example, I chose base UI nova stone

color as rose huge icons because we have

lucid tabler and huge. If you know I

always go for lucid but this time let's

just try some other icon library some

other icons font as fig tree radius

medium menu color default bore and if

you press this it's going to change all

your changes because it's going to go

with the default theme or you could

start over. So now if you go ahead and

create you have three options nextjs

tanstack or wheat. If we go with

tanstack with this specific preset it's

going to create a brand new project. So

what do we do then? So what I've done is

I have already picked these defaults and

set up shnui. So let's just go to get

view components get started and and

let's head on to the installation

section here. Let's pick tanstack start.

Let's copy this command because we

already have a project. Stop the server.

Paste this. So now it's saying I need to

create components JSON to add

components. Let's just say yes. And this

is where it already chose a framework as

standard tail in CSS config import

alias. Let's just go with stone. And now

it's going to update the CSS variables

in style.css.

Now it has added buttons for us. But we

could also go ahead and add card as well

because we need a card component for the

product card that you see on the page.

All righty. So let's reset the server.

And now let's go through exactly what

happened here. If you go to components

UI, you will now see a button. DSX as

well as a card. DSX which is amazing. If

we go to components.json, JSON. So this

is the description from SHAT CN. Shad

CNN UI references this specific file to

figure out what exactly it needs to

install. So now we need to change a few

things here. So let's change that. First

of all, I changed it to base nova. I set

tsx as true. Change the base color to

stone. And this is basically the new way

of creating a project. So just reference

that in the cheat sheet. For example,

the icon library is huge icons and so

on. Now, if you just want to go with the

default styles, that's also totally

okay. Or you could simply just go with

this one. Then on top of that, we are

also going to need a few packages. We

are going to need the following

packages. Base UI react font source as

fig tree huge icons free core free icons

tail and whest

installed the packages. Let's restart

the server. So whatever we have defined

here, the icon library and style and so

on. Because of the packages we

installed, it can actually understand it

because we're not using shad CN UI

anywhere. So let's just go ahead and use

it. So let's go to index and here let's

add a button component and let's just

say click me. Now you can see that the

new button is over here. Now we also

need to update this CSS file. So if you

go to styles or CSS, what shats and UI

does is that it sets up these different

variables and then these colors. Now

these colors are not what we want. We

want some different colors. Plus we also

need a couple more packages here. So

let's just paste what I have given you.

So we have tail in CSS, animate CSS,

chat and tail in CSS and font source as

tree. And these are all the different

variables that we have changed. It's

referencing the font sands as fic tree

and so on. All right. So now let's just

restart the server because we have

changed a lot. The specific import is no

longer needed. So we can remove it. And

now you can see that click me is in fact

configured as per the colors we just

provided. That means it works. Now let's

stop the server and let's add button one

more time as well as card because we

have now updated the styles just to be

safe. Restart the server and still

everything works. So now this is the app

that we're trying to build. I put them

side by side so we could make changes on

the left and see changes on the right.

So open up our development server here.

So first of all let's just set up header

because right now it's looking super

basic. So, in order for us to set up a

header, it needs to live in a file that

every single route touches, which is

going to be our underscore root.x file.

This is where we already have the

header. So, no matter where you go, for

example, you go to products or product

one or wherever, you still have the same

header. That's exactly the header we

want to create. So, here, let's just

call it start stack shop. Let's call

this start shop. And then let's add

another link for products. Let's add for

not all of these but just for creating a

product to equals create product for

example. Now as you can see that editor

is already complaining that this

specific route does not exist. Even if I

do this it doesn't exist. That's because

this tanstack ecosystem is fully type.

It gives you type type safe routing. For

for example, if I press slash, you're

going to see all the routes that are

available. The fact that create product

route doesn't exist, it's complaining

about it. So now let's comment this and

let's see what we get. Now we get start

shop and products. Obviously, we need

some spacing here, but you get the idea.

Then we also need a /cart as well, for

example, which again does not exist. So

let's just comment it out for now, too.

So now let's style the header. So first

of all we need to change the background

color here. So let's make the header

sticky top zero Z 40 so that it's

overlaying everyone else

border slate 200

and then bg 80 and then we have backdrop

as blur. Let's remove this backdrop as

blur. In dark mode, it's going to be

border slate 800 800. And dark mode,

it's going to be bg slate 950/

80. There we go. And let's give it

another div that will wrap all the that

will wrap our logo, which is going to

have a flex item center gap three. Let's

add our logo. Move it over here for

example. And then the rest of the links

will be inside a nav something like

that. When it comes to the nav, it's

going to be item center gap 3 text smium

text slate 700 and dark will be text 200

and from small onwards it will be flex.

And now we have the linking to the

products which is going to have a class

name of rounded LG Bx3

B Y1 hover will be bg slate 100 and dark

hover would be BG slate 800. There we

go. So you can see it has this nice

little hover. We also need another div

inside the logo itself because something

is off there. So first of all let's give

flex flex call. So we need a link to to

wrap the entire element. So if you see

here we have this logo icon and a text

text smold

text slate 900 dark text white. There we

go. And now for the link of flex items

center gap 2. And inside that it's going

to have a shopping bag icon. size will

be 20. And this specific shopping bag

icon could be from Lucid React. All

righty. We have the nice icon. Now, the

shopping bag icon has this nice little

background. So, let's add that too.

Center justify center rounded excel BG

slate 900.

part will also be PG white

text slate 800. There we go. Let's wrap

this nib up. Good. For example, this

needs to be wrapped all the way at the

bottom. And now the styling has been

fixed. So now we see this. For example,

let's go to root and for the children,

let's also create some styles because

this way we can give it some sort of a

padding to the entire application here.

Let's wrap it. Let's give it a class

name of MX auto max wxl

4

and py 6. There we go. So now our main

elements also have a nice little nice

padding. Padding horizontal and padding

vertical. And for the header as well,

min green screen 950

dark text white. Wrap this up. And also

move the main inside here too. There we

go. So this entire container is now more

contained. And now if you go to the

header wxel

tx4 py3 item center justify between

let's also give it a div here. There we

go. So now it has a nice little spacing

here too. Perfect. So our header

component is pretty much good to go. So

now we could add a home. So let's copy

this and let's add a root for home

example. We can see home right. And then

we also need a create product and a

cart. Now for now these two could simply

be now for now let's just create it and

let's keep it as is over here. Now when

it comes to the cart itself over here

you can see how it looks like. For

example when you expand it these three

links disappear and when you go to

mobile we show the cart with zero count.

We also hide the price here. So how do

we implement that here? Well, first of

all, let's just create a separate div

like we did here and wrap it.

Then we are going to give it a flex item

gap 2. Now there's a bit more gap. Then

for this specific class name, it's going

to be inline flex. And before we add any

more styles, let's just give a span to

the card text.

And let's give another span for some

count over here. And then let's give

another span for the total. So it's

going to be like 10. And let's give it a

dollar sign as well. Something like

that. So now let's style it. So, it's

going to be item center

gap 2 rounded full border border slate

200. Then for dark or I guess this PG

white px4 PY 2 the text small like extra

small font semib bold text color would

be 800 shadow SM

transition and then when you hover over

it it's going to be negative translate Y

0.5 on hover it would be shadow MD as

well. There we go. So, it's looking way

better. Now, for the card text, we're

going to keep it as is. But for the

count, we're going to give it flex H6,

min W6, which will give it a min width,

item center, justify center, round it

full, BG slate 900. Then we can say px2,

for example. Text will be 11 px.

font bold text white and so on. Now it's

as you can see the count is looking

really nice. And lastly for the total

subtotal it's going to be by default

we're going to hide it on mobile and

it's also going to have 11 px font would

be medium text late 500 and from small

onwards it would be inline. There we go.

So now if I go to mobile the subtitle is

hidden. Now at the same time we also

want all these three links to hide other

because there's no space here. So let's

hide it on mobile and on desktop let's

show it which we already do shown

otherwise it's hidden and so on. And we

don't need this on the nav or I guess we

don't need to add the cart in the nav.

We have these three links. We can move

this div outside the app. Now we could

say it.

There we go. So now if I close it, you

can see how it looks. And if we go all

the way to the bottom,

we have we need to move this

div outside of this other div as well.

We really want it at all the way to the

end. So it's going to be right at this

level, which we do. And all we need to

do here, add flex. There we go. So now

that fixes it. And this is how our items

are going to look like. There we go. And

now obviously over here we have

different formatting which we'll get to

once we hook up the cart. Beautiful. So

our header component is looking very

nice. We can remove this empty fragment

too cuz we no longer need it. And now

when it comes to these links themselves,

let's just keep these errors because we

know that we're going to resolve it. Now

let's build this specific section here

because we want this to be on only on

the homepage. So now if you go to

index.dsx, that's where this section

would be. So here for the this specific

div, let's give it a space y12. And we

need a few different elements. We need a

B tag that says your favorite e-commerce

store. Then we need another H1 which

says start shop, your one-stop shop for

all your needs. And then we also need a

link component to products.

And let's use a arrow right icon from

Lucid React. And the size is going to be

16. So now we have all these elements

and we need the text as well which is

going to be browse products. We're

adding the styles the layout here all

the elements that are needed and now we

could wrap it up. So first of all we

need to wrap this entire thing into a

card component from shad cnui. So we can

just wrap this up entirely. So now this

automatically gives us this background.

So we don't need to style it further.

And then right here we need space Y4 and

a MD limit the width to max 2X. Limit

the width to max the W2XL. So something

like this. Now let's add this in a

section because this is going to be the

top section over here. And that section

would be MX auto and going to give it

flex max W6 XL flex.

Now, this one is going to be a card

title. So, we could just get the card

title from SHTUI

and wrap it just like that. And this

card title is going to have text for

Excel font bold or I should say SP bold

leading type text late 900 and dark

white. There we go. This entire card

needs a P8 as well. And it also has this

nice little shadow. So, let's add that

too.

We go. And it's going to be BG white 80.

It's looking really good. Now, for this

specific text, it's going to be text SM

because it's really small. Font semi

bold leading, but I guess just don't

need leading type. We just need

uppercase. Tracking wide

text blue 600. There we go. So, you can

already see it's looking a lot better.

for example. Then we have the H1 here

which is going to be text for Excel and

so on. Since you already styled it, we

don't need to style the H1 separately.

Definitely need some padding over here

which we can fix. And now we need a

button or like a link that looks like a

button. So this one could be in the

footer for example or alternatively we

could just make this a description.

There we go. But in this case for the

link we are going to have inline flex

item center cap 2 rounded pull and make

it look like a button. BG slate

900 TX5

BY3 text SM font 7 bold text to white

shadow large transition hover is going

to be negative and so on. All righty. So

now this button is also looking very

nice as you can see here. Now for the

the div for the entire page then I have

space Y bg linear to B giving it some

color stuff and that gives us a nice

gradient to white via white to slate 50

then E6 so on we can reduce the spacing

cuz there's a lot of spacing and that's

it just the fact that we used a card we

don't need to add any spacing Here we

go. P is small, B is capital. Honestly,

little things like that. Sweet. All

righty. So now our card component and

there's a typo here says browse product.

So our card component is looking very

nice. Now let's just remove this because

we don't want to limit it limit the

entire section, but rather just limit

the text. So here we could say 6. Let's

just remove this entire thing, the fact

that we have a card. So now this car

expands. But if you take a look, we

still want this to be Excel. Limit the

width there. So for that, let's just

limit it to Excel. There we go. Now it's

looking really good in desktop as well.

Perfect. Now there are a variety of

different ways you could load data

inside of Stanstack start. I would like

to put all of these concepts together

under data fetching. Now we'll go over

each one. You could depending on your

use case. Landstax start gives you the

flexibility for where you want to load

data. For example, there are API routes,

server functions, middleware, server

only function, client only function,

data only, static server function,

isomeorphic loaders, and so much more.

Let's talk about isomeorphic loaders

now. So, this is extremely important and

it's a core fundamental inside of

panstack start. Understanding where the

code is going to run is fundamental to

building panstack start application.

Every route has something called as a

loader. So if you want some data that

needs to be fetched at the route level,

which means the minute you type a route,

you want data to be available for that

specific route. Before that route is

rendered, components are rendered, you

would need to call loader. But here's

the tricky thing. Route loaders are

isomeorphic, which means they both run

both on the server and the client, not

just on the server. Since a loader is a

route level function that fetches data

before the route renders. Now why do

loaders exist? Well, a lot of modern

applications need data before they

render. For example, product pages in

our case need data, need products before

the page renders. Dashboards need

metrics even for SEO data. This is

really good for serverside rendering as

well because as I mentioned by default

tack start serverside renders the data.

Now traditionally this type of loader

logic would end up in a use effect

inside of the component. We would have

to do duplicate fetches on the server

side as well as the client side. There

are too many loading states. So loaders

exist to centralize data fetching at the

routing level. So in this case you just

pass in loader fetch the data and that's

it. Now in terms of the execution

boundary pans application runs in two

environments. First and the server

environment is the node runtime which

has access to file system databases and

environment variables and during SSR

initial page renders on server API

request which is server functions

executing server side buildtime static

generation and pre-rendering. The second

environment is the plan environment

which is our browser after hydration,

navigation, user interactions and so on.

Now if you want your application

function to only run on the server then

there's a server only function which is

very similar to the server only package

inside of Nex.js. That means it will

only run on the server and on the client

it will crash. There's also create

server function which again you can call

it from the client as well. There's

client only and client and there's so

much more. But let's take a look at how

they create loaders first. So first of

all, in our case, what we are going to

need is these three products need to be

fetched at the loader level because I

want this data available for the

recommended products before we load the

page. So for that, let's just go to

index.tsx. And right now, we don't have

anything listed here. We have a /

products page. Let's look at the index

or tsx over here where we have our

section in here. These three routes need

to be loaded. Three products need to be

loaded beforehand. Let's remove the

unused imports. And now over here we

need to call loaders. Now the best way

to do so is right underneath this is

where we need it. Let's copy it. Paste

it. There we go. So now this is going to

run during serverside rendering and on

client during navigation. So slash API/

products they don't exist but if you

take a go to fake store API for example

/ products then that exists. So for

example let's get the response.json and

return the products. Now the the way you

would access this loader data inside our

application is by using route bird use

loader data and we have taken a look at

this before. So now let's add a console

log data here and a console log products

here. Now let's refresh the page and

you're going to see this data that's

available and there is a lot of data. So

let's just get data slice and now let's

clear the console. Let's refresh the

page. And as we do we got four products.

This is a log for example. So you can

already see that we on the client side

we got 19 products. On the service side

we got four products. So declare it to

refresh it. Now if you go back here we

got four products. 1 2 3 four. If you go

back here let's just get the first

product for example. And now you're

going to see that we only got one

product here. And if I clear it go back

here. Refresh it again. And now you will

see that we got 1 2 3 4 5 6. This is all

the data possible which is the specific

route but then it returned only one

product here because we are returning

all the data here and then returning

only one product here for example. So if

we add server data and here let's add

client products. Let's just return zero

product so you can see it. Refresh it.

And now you're going to see server data

one product and client products as one

item as well. So this is how you could

work with loaders and you could just

call use loader data here. So now let's

just seed some data here because

obviously we don't have the database set

up yet. Let's just seed it. So first of

all if we go to DB let's create a new

folder here and inside of that let's

create a seed.ts file and let's call

this sample products. These are a bunch

of different sample products with name,

description price badge rating

reviews, image, and inventory.

We're storing these products here. These

are the same products that we show here.

Every product has a new badge or it has

a price, rating, number of reviews, the

image, and inventory could be in stock

or back order or pre-order. So, what we

could do is again let's export it and

then load that here. So instead, let's

just return sample products from the

seed. Let's refresh the page. If you go

back here, these are all the different

products that the client is returning

just like we saw. So now we could simply

render it on the page. Now, as you can

see here, we have recommended. We have

these two title and description. And

then again, we have card component. So

now let's create another card component

here. Let's create another section here.

here another section here and let's

create another card component here which

is going to have a bunch of information

such as a badge card and so on. Before

that this entire thing is also in a

card. So let's just create a new card

here. Let's add a card header which is

going to have a P tag and let's call

this recommended. Then we are going to

have a card title which is going to be

starter picks from the catalog. Then we

are going to have a card description

which is going to be curated items. And

then right underneath would be different

cards. So if you go back here this is

how it looks like. Let's give it the

same padding. Now for recommended let's

style it. It's going to be very similar

to your favorite e-commerce store. So

you could just copy this it. that's

recommended instead. This one would be

XS. And then for the card description,

it's going to be text smate

600. We also have a

link component here as well, which goes

to /ash products, and it's going to have

the same styling as before. And this

time we're going to say view all. And

then we'll have an arrow right icon,

which is going to be 14. Now this one,

let's hide it in mobile.

It's going to be item center. Y 2

rounded full

border border slate 200 px4 py2 text

access font semib bold text slate 700

and because it's hidden on mobile we

can't see it. So let's say inline flex

here you can see the new wall button

here. Let's see transition power would

be again the same thing so on. Now we

have all these items. So let's move this

in two divs. So one div and this is the

second div. So that we could give a

justify between. Then another div here.

It wraps the whole thing. There we go.

And now here we could just give it

justify between. So it renders all the

way here. Now you can see the starter

pics is a little bigger than what the

card title is. So we need to also style

that. Excel orange semibold text late

900 and so on. So now if we go back here

you can see the title is making a lot

more sense. And if we make turn it into

a mobile device then it disappears. And

for some reason the description the

others have this TX4 title. So let's

just say px0. There we go. So now it's

aligned correctly. So it's the same as

this one now. Perfect. So now we could

add more cards underneath it. But as you

can see, this in fact is going to be

repeated code for the card component. So

we could just create a new component

called as product card and render it.

All right. So now right here, let's give

it another div and let's give it a make

it a grid of gap four small will be

calls two otherwise not. And then in

this case we can loop through the

product get the value here. So now you

can see we refresh the page we have all

the items displayed but as you can see

we don't want to return all the items we

just return want to return three. So we

have done so it over here we only want

to recommend and let's say there are

bunch of products you want to pick you

would always ob always do so but this is

how we're going to do it. We're going to

slice the products and only get the top

three. But here's the thing now. We

could obviously create a product card

component now and then style it further.

For example, give it a descript content

and then description as well. Render

that. For example, render the price and

all that too. All that fun stuff. That's

awesome. We could definitely do so. But

let's talk about the data fetching

strategy here for this specific

recommended route, these recommended

card. But when if you think about it,

yes, you these are serverside rendering

by default and they are isomeorphic

functions. We also want them to be

pre-rendered. So for example, we talked

about the execution model. We talked

about different functions here. But

there are also another type of functions

called as the static server function.

And they are experimental. So keep that

in mind. But what static server

functions do is that they executed at

build time and they are cached as as

static assets. when using pre-rendering

or static generation. So we could just

make this this specific call we can make

it a static mode by applying the static

function middleware to pix server

function. Now let's talk about server

functions. So if you go back to server

functions documentation they let you

define server only logic that can be

called anywhere in your application. So

for instance in this case let's say the

load loader data we want it to call from

the server function and we could easily

do that loaders can call server

functions components can do hooks or any

other server functions too. They run on

the server and can be invoked from the

client side code. So in order for us to

run the server function let's copy this

and then we could just aait call it from

anywhere we like. So for example, if we

call this, then this would return a

message called hello from server and so

on. But where do we call server

function? Let's get to that in a second.

So first of all, we could simply create

a new server function here and server

function comes from anst start package

and then this runs only on the server.

So now if I refresh the page, let's also

call this get server time. Say get

server time. We don't need to await it.

So you can see here we could just await

call from anywhere and get it. So we

have this async function and now we

could call this get server time. Now

await expressions are only allowed

within async function for example. So we

could make app async and right if I

refresh the page you don't want to see

anything and let's just add maybe as the

title just this date for example. And if

I refresh the page when it comes to

server time you can see that the time

keeps changing. So that's the idea with

server functions. You define the server

only logic and then you return it from

anywhere. But here's the thing. Server

functions also take a method. This is a

get method for example and it still

works that by default it's a get method.

But what if I want to post something?

Then I could change this to post. And

now we could this would be a mutation.

So we could invoke it. So for example

create server function would be a post.

And here we could simply just return it

and so on. So now if I refresh the page,

it's no longer going to work. It's going

to break because this is no longer a get

request. This could also be a post

request. For example, if you're trying

to add something, create, update or

delete that is performing any crowd

operations and so on. So now if I

refresh the server, it still works. If I

refresh it again, it still works as well

even though this is a post method. So if

you want to perform a mutation, you

could easily call this. But this means

that now this is only a serverside code.

It is no longer going to run on the

client. This is a server only logic for

example. And it will run on the client

in a sense like you can invoke it but

this is its own function. It's not going

to run on the server and on the client

as well. That is in fact loaders. But

now where do we call server functions?

We can call them from route loaders. We

can call them with the use server

function hook. So for example, this is a

server function and if you want to call

it, we could just simply call use server

function hook. We could compose the

server logic. We could handle form

submissions and so on as well. The

server functions accept a single data

parameter since they cross the network

boundary. Validation ensures type safety

and so on. So for example, if we want to

restrict it, then we could easily do so

by adding a input validator as well.

This way we are saying that there needs

to be a name and then it's going to

return hello data.name. We could also

use it with zod which we will do

eventually and add more input

validations via a schema here too. And

this is exactly the use case where we'll

be using later wherever we are going to

create a product. You could also

redirect a user from a server function

as well. So let's say if there is no

user or the user session is no longer

active, you could redirect it. You could

also throw a not found error as well in

case you want to throw that for example.

So server functions are extremely

powerful inside of tanstack start. So

now inside of our application, let's

remove this. And we have a loader here

that returns the sample products. That's

it. That's all we need. Let's restart

our server. And now let's refresh the

page. Let's remove this time. And we are

back to where we were to render the

three product cards. However, product

card doesn't exist yet. So, let's just

go ahead and create it so we could use

it. So, inside of components, let's oops

create a new file called as product

card. DSX. This will simply be a product

card. We don't have a type yet, but we

will create one later. Or we could just

say these are all the different values.

For instance,

there was something we could just say

product and then this would be the type

of it all. Let's import card component

header title and so on. You don't need a

separate import. We can just import card

title here. All righty. So now let's

just remove this entirely. render a

product card and pass a product and a

key. Now, if we go back here, let's

update the card component. We don't need

a key here anymore, but we do need to

import card content and card

description. And we are back to where we

started, which is now that this is a

separate product card component. Now if

we take a look at the type we have name,

description price badge straating

reviews, image and string. So now if we

go back here, we definitely have an

error because batch is optional. So

let's make it optional here. For

example, not everyone would have a

batch. Now we get the product name and

so on. Then just create a structure. So

first of all, you have a card header. We

have a card title which is going to be a

text large. This card title for some

reason inside of Shad's TN are not that

big. So we need to make it a bit bigger.

Then we have a card description. We have

card action and that action will have a

product price. Product price that would

be a dollar sign. These two in fact

would be part of the header. There we

go. And now we are going to have the

card content. And in this case we need

to style it a bit differently. So, for

example, we're going to have the

inventory if it's in stock or not. We're

going to have the rating. We're going to

have the reviews here. So, first of all,

let's set that up. So, we're going to

have a span. This will be product dot

inventory. Then, we are going to have

two more of these, which will be rating

as well as it will be reviews. Right? If

you go back, it has reading and reviews

all next to each other. So we are going

to format that. Now let's give it a flex

item center justify tween. For that this

is going to be a div. The first one

which is going to have a flex item

center gap 2 text small text slate 600

and alongside the ratings would be the

reviews as well. So we need to say these

many review for example and the class

name for this would be font semi bold

and the class name for this would be

text slate 400. All righty. So now we

have the product inventory over here and

for this we will have rounded full

border px3 py1 text excs font salam

bold. There we go. So now this inventory

is also looking really nice. But now

depending on the type of inventory we

need to say a specific thing. So if it's

in stock we need to say in stock.

Otherwise if it's back order we need to

say back order. Otherwise we need to say

out of stock or pre-order for example.

So that's the logic for the inventory.

So now we have these three items here.

Obviously they don't look exactly the

same. And this one actually semantically

it should be a P tag not a dim cuz it

has a couple of spans here and so on.

All righty. So now we also need these

two brackets here around reviews. Now if

it's in stock or not we are showing the

these different colors. So for that

let's define object is going to be

called inventory tone. Based on the type

of the object, we will then see, for

example, if it's in stock, then it's

going to be emerald, emerald 50. Text is

going to be text emerald 600. And border

would be emerald

100. For back order, it's going to be

amber. Amber, amber. And for reorder,

it's going to be indigo. There we go.

This is going to be

700 and 700. Perfect. So now chat CN

also gave us one more thing which is a

utility file. So if we go to utils which

is in s in lib this specific file lets

us merge a bunch of class names. It uses

a package called as tail and merge that

allows us to bunch merge a bunch of

class names. Otherwise, if you just use

the back text syntax, it may not merge

it correctly and may not override. So in

that case, we are going to use that

package to merge a bunch of styles here

and then pass it and let's give it a

type. So now you can see install is

looking really good. Now we have the

card content. Let's add the card footer.

Card footer will have the add toart

button. And here we are going to have a

span which is going to be product price.

And let's give it PT0 for example just

like we see here. And I have a product

price and a button which is going to be

a chart and button. And here it will say

we'll use a shopping bag icon and size

will be 16 and we'll say add to cart.

There we go. And now in terms of before

we add the class name, let's add size of

SM smaller variant secondary for

example. And and in terms of the class

name, we're going to change it to 900

and text white. And then hover is going

to be this add to card button. All

righty. So now let's also give it a flex

of justify between as well because this

needs to be here. All righty. So now

when it comes to the button itself, we

need to give it a onclick handler. It's

going to be add to cart. We also want

this entire card to route to the product

page, individual product page as well.

So first of all, we need to wrap this

inside of a link component. Wrap this

entire card. Let's say from link

component from time start and just pass

that in for example. And if you see if

we click on it, if we click on our

application, if we link it to the unique

ID for example, the ID doesn't exist

yet. So let's just link all our

applications to zero for now. I click on

not this one. But if I click on our

application, it goes to the zero ID like

one or whatever. So now we also want the

add toart button to be clickable as

well. So the solution to this is to call

E which is available here dot stop

propagation as well as E do.p prevent

default. This way we could still call

add to cart without having to link it.

So if I go to the console we do see add

to cart log add to cart so on and I can

still click on the link component and it

works thanks to the e do. stop

propagation. And lastly, in terms of

styling, style a product price. It's

going to be large and font semi bold.

There we go. So now you can see this is

looking really good. But we don't want

this top border here that we see, right?

We don't want border at all. Border top.

So we could say border top will be zero.

There we go. Now the border is also

gone. And bg transparent. Perfect. So

now our add toart button is also looking

very nice. Now obviously it's not

looking really good. So let's fix the

remaining styling here. So to the link

component here we're going to say we

have cursor pointer each full shadow

smover would be negative translate try

one

and hover we also have shadow

LG

now you can already see it's getting

bumped we just need to add transition so

that smooth just like that and we can

remove this shadow because it's making

it look a bit weird. All righty. So now

when it comes to the actual card itself,

we need to add some layout spacing as

well. So here we can say space Y4. So

now it has some equal spacing here. Then

max w 6XL MX auto

rounded 2 XL. But the card is taking

care of that. So we don't need to worry

about There we go. So now if we go back

here, we have we need to have all of

them in just one card. Right now it

looks like they're not. So let's move

this div inside here. There we go. And

now it's looking so much better. Just

like this one. But obviously there are a

few things that we missed in the product

card. So let's give it a gapple 2 and

also give it a font semi bold. And right

here will be the batch. If there is a

product batch then display it. And in

this case not give it let's remove this

autogenerated code. And let's add a

badge code. We can see rounded

full bg slate 900 px2 py 0.5 text excess

font semi bold text white and so on. And

let's give it a div here, which is going

to be flex item center gap 2. And you

can see it's looking so much better.

It's just that this one still has more

spacing. So let's give it a bit more

spacing here. You can say px 4 py 4.

There we go. Similarly for the index,

this one would be bx. There we go. Very

nice. All righty. Our card component is

looking really good. So, we could simply

just repurpose the same card component

everywhere else, too. And since we're

displaying, we don't need to display the

price in two places. So, we could remove

it from top right. There we go. All

righty. So, now that we our cards are

set up, we could work on the product

page next. When you link to it, this is

the product page. Let's talk about that.

Let's focus on creating the products

page. Now in the products page if we go

here go to browse products we go to the

products page in here we have oh a list

of cards. Now we could simply use the

same card component but the more

important part is what is the data

fetching strategy we are going to use

here. First of all we can again load all

the data using loaders as well. But

because we're going to need some sort of

caching we could also introduce React

query here. React query would allow us

to fetch the data and then we could

store that data and reuse elsewhere if

you like. Now to be very honest with

you, React Query for storing products

data could be an overkill. However, if

you want to cache your data as much as

possible, then you could definitely do

something like this. So let's go ahead

and create our

route. Now we already did that. Remember

if you go to / products that exists

already. So, if you go to index.tsx,

that's exactly how the start looks like.

Now, the title of this the start shop

catalog and all that, it's very similar

to how we just set up recommended

products. So, we're not going to spend

too much time on this. We're just going

to copy what we had

in here.

Just copy this and paste it inside here.

And now let's import

car title, description,

and so on. All right. So now obviously

we don't want this to be this big. We

want it to be smaller. And we don't want

browse products at all. So you can

remove the actually we keep the

description, but we remove the link. For

example, let's call this start shop

catalog. Cool. So first of all, let's

just go to the index.psx page. And here

we have this card. Let's copy this card

component. So, we just cop get the

section and the entire card. Paste that.

Now, let's get all the imports. I don't

need two imports of the same thing.

Let's just import it from

card component from shad cnui lucid

react. We don't need this at all.

Perfect. We don't need a view all button

here. We just need this. Now, this could

be t shop catalog. This could be the

title and this would be the description.

There we go. So, now if we go here, you

don't need to make this blue or

anything. We can just keep it as is. We

can also give it a class name here. Just

going to be space y 6. This is going to

be one section. And then this is the

other section where we would be

rendering our products. In terms of

this, we just need to make this smaller

and text laid to be a 500 color. We can

just remove this color. And that's it.

There we go. It looks very similar. And

let's remove the board here. All these

elements. Let's add space one. So

there's a bit more spacing. Beautiful.

So this section is ready to go. Let's

remove the unused on boards. And now

again, we're going to need loader. And

loader will also be a bunch of sample

products. But this time we're going to

load all the products. And again we are

going to create a products.m map and get

the products and again get the products

from routes.loader data get index here

call product index as the key and so on.

There we go. So now if you see we have

all these products displayed already. So

our products page is also ready to go.

However, if you're wondering well this

is great but we need to do more. Instead

of now calling the classic loaders we're

also here to learn obviously anx. So

let's create a server function here to

load the product. So you can say fetch

products equals create

server function

and the way you would do that is by

calling a method called as get and now

call the handler and return the

products. Now in inside the loader we're

not just going to return the products

inside the loader we are also going to

call fetch products for example and then

we get the products from loader data and

display it. So now if you see there's an

error here a warning more so that a not

found error was encountered on the route

with id root but a not found component

option was not configured nor was a

router lever default not found component

configured. So let's just go ahead and

configure that. So if we go to router

here we could say default not found

component and simply add not found.

Similarly, we could add a default error

component and add a error as well. So,

let's add a not found component here and

then not found H for example. So, now in

this we can just simply replace this

code and

give the user a link to go back to home

for example. So now this specific

component will be called whenever there

is a not found in any of the routes. So

for example, if I throw not found from

react router for example and if we go to

home this is inside products. If I go to

products we do get the not found page

that we just set up because we just

threw a not found error. All righty. So

now if a page for some reason has

doesn't exist we could simply just do

so. Let's talk about middleware. What is

a middleware inside of panstack start?

So I can go back to the start

documentation and go to middleware.

Middleware allows you to customize the

behavior of both server routes. What is

something that needs to be called before

your route is invoked? For example,

verifying a user's identity before

executing a server function or checking

authentication authorization logging

collecting metrics, error handling, all

these are really examples of muver. And

there are two types of middleware. One

is a request middleware and a server

function middleware. A request

middleware is used to customize the

behavior of any server request versus a

server function middleware is used to

customize the behavior of server

functions. You could simply add dot

middleware and add a logging middleware

just like they show here. And then this

specific middleware will be called each

time. So and always make sure that

middleware is next nextable which means

that you must call the next function

otherwise we are going to run an

infinite loop because we need to we need

to pass the control back to the router

by saying next. So execute what's next.

So let's implement our own middleware

now. So the best way to do so is first

of all add here a server call a server

object and then call middleware. The

minute you do so this is now a server

middleware and then if it's a server

route which we haven't created yet but

we will. It's a server route then we

could just call the logging middleware.

But if in case of a server function

middleware it has extra functionality

for server functions. So we could say we

could call client and dots server. So we

can validate the input, we can call the

server and so on. There's a lot to go

over in middleware here. Now let's focus

on adding our serverside middleware. So

first of all, let's create a object for

server and let's pass in middleware and

this is what this is one. It would be an

array. Now this specific middleware has

nothing to do with server functions. It

is for routes. So if you want to create

a route here, you could just simply add

handlers

and then pass a get request which would

return whatever we want. So here we

could say get or we could say post for

example and a sync and we get a request

object here. So we could do whatever we

want here and then we could simply do

create a product if you want. So we

could simply return

a JSON from tanstack react start and

let's just say hello world here. In fact

we could also just get request JSON and

again this is a regular request API from

that we know. So this is exactly what

request would be and then we could say

hello world from post request. Now how

do we exactly invoke this? Well, we

could invoke it by using an application

here. So now let's say I say products

and now we get hello world from post

request with empty body and I'm simply

calling / products with a post request

and that's the beauty of it. Like

literally in the same file we created a

server function that could be invoked

inside of our loaders before the content

to be available before the page is

rendered. Then in the same file we

created a API route specifically which

is a post request. We had access to the

request again colllocating it with the

react component and so on. So that is

just crazy like how amazing this entire

architecture is. The more you build the

better you're going to get and

understanding the pros and cons.

Similarly, if you want to create a get

request, you could do so as well. And we

could just say hello from you will do

just say hello world from get request

for example. So now here if I change

this to get and call this you get hello

world from get. Now similarly we could

do the same with get request. So you

could say get request and again it has

access to a bunch of stuff but we can

just simply run JSON which again comes

from that third and if it says hello

world from get request. Now if we go

back here change this to get invoke it.

Now if we invoke it there is no request

object inside of get we can pass that

but now if we invoke it we're now going

to see hello world from get request we

made a mistake which pen which where we

passed in the request object. So we can

still access request object here. It's

just that we can pass it as a JSON. So

can still do whatever we want with

request here just like you normally

would. So now we have a post request

here. We have a get request here. If I

refresh the page, now you're going to

see that this specific API route has a

get request with hello world from get

request. Now this makes sense, right?

Because when you call / product is in

fact a get request. The fact that we

added this has replaced our page

entirely. So let's go back to it because

we definitely need it. But this specific

post is very handy because we can still

call the same API route and with a post

request which is not something you could

just directly invoke by accessing /

products

because you need to create a post

request on a get request and then create

a product for example as well which we

will do so very soon. But now back to

middleware you need some sort of a

middleware. Let's create a logger

middleware. It's very handy to have some

sort of a logging middleware for logging

our API requests. Now, in order to do

so, let's create a we don't need to

export it. Let's create a logger

middleware will be create middleware

from panstax start dot hander actually

not handler dots server. And in here we

going to have a async with request and

response for example with request and

next. This needs to be next request. And

now we are going to log every single

request that comes in. So we could type

request url and we can say from request

do headers for example get. We could

also do or user agent or origin and then

we always need to make sure we return

next because if we don't the next thing

is not going to work like if the next

router won't execute. So now anytime we

haven't we we did hook the middleware

here. So now any time a request will be

made logger middleware will be invoked.

So if I refresh the page over here you

can see logger middleware. Now let me

refresh it again. Go back here. We did

invoke logger middleware for example. So

right now the origin is null but the

request URL is the URL that we're

requesting from. So this specific logger

middleware is going to first get invoked

before our route is going to get invoked

for example. So that's just the power of

adding middleware. So that's how you add

middleware. And that's all for the

products page. Like I mentioned, you

want to cache this products data because

we don't want to fetch it every single

time. Now, tanstack start router does

have its own cache. Like I mentioned

earlier, if you go to the router,

default preload state time is zero and

that's because we were going to use

something like react query or like tack

query, but we could set this to 30. That

means we're saying the default preload

time a route should use if no pre if no

preload stale time is provided. We could

change this value. However, we want to

cache it. We want to leverage the

importance of tan query. In fact, even

when we'll add to card and this will

work. We'll increment it by one over

here and build a card page as well. Then

again the same thing we want to now

update this count get this data and not

having to call the server every single

time we want to cache a lot of the items

too. So in that case we could use

tanstack query for that. So if we go

back here we can just set up tanstack

query. So now if we go here and go to

tanstack query this is how we set it up.

And if we go to quick start you will be

able to see exactly how to set up the

query. TSA query is really powerful and

honestly in this specific application we

would be scratching the surface but this

is a very good example for how you would

use query inside of panstack start. All

right, so let's set it up installation.

Let's copy this. Head to the terminal

and paste it. Let's install it. Let's

restart the server. And there's also a

ESLint plugin for catching bugs. So

let's add that too. Paste it. It's a

development package that's why hyphen d

restart you start the server and now we

need to essentially add a query provider

and wrap it in and the way you would do

that inside of anstack start is also

very similar except you would be doing a

couple things differently. So now if we

go to the router the root actually over

here we'll be wrapping our entire

application

with query client provider and then wrap

it over here with query client provider.

But here's the thing. Query client

provider means query client. And you

would get query client byruct

dstructuring it and calling it from

route dot use route context.

And this is and now we have our query

client. However, we still need to

configure it further. All the way to the

top. We have create root route. Now we

need to do create root route with

context. And now extend it. Now we are

going to have send it. It's going to be

something like this. And now query

client doesn't exist yet. But we need to

import that from tile stack query to

wrote this. First of all, we have not

imported provider. So we can just get

that. But this one would be type of

query client. There we go. And that's

all we need to get anstack query here.

And lastly, if you go to the router now,

suddenly you're going to see that there

is an error here for example. So we just

need to pass context query client equals

new query client from react query. There

we go. So now query client error has

disappeared. We could already see that

you know the fact that we didn't set it

up properly initially or there was one

step missing the type system complained

already. Now if you go to root let's

also

set up react query dev tools which I

believe we installed or it's called

panstack query

and this doesn't come from here but in

fact it comes from this package and I

could not find the modules so let's copy

this. All righty. So now React query is

set up. So we could simply just go to

our products page and use it. So right

after the loader data, we could create a

use query. We could invoke it and then

give it a key called as the products

key. And now let's just get fix the

import. And instead of fetch products

and now we can just say fetch products

which comes from the server function

here. And then for initial data we could

just give it the loader data. And now

instead of looping to products we could

loop through data for example and give

it a question mark. All righty. So now

if I refresh the page it still works. So

if I console log data inspect element go

to the console I get data array of eight

which is exactly what we want. So a

react query is set up as well. Let's

talk about selective SSR which is

selective serverside rendering in

tanstack start routes matching the

initial requests are rendered on the

server by default. We know this by now.

This means there is a before load

function and a loader that are executed

on the server followed by rendering the

route components. The resulting HTML is

sent to the client which hydrates the

markup into a fully interactive

application aka serverside rendering.

But what if you don't want to opt into

serverside rendering? You just want to

opt into it for specific routes. You

could easily do that inside of tanstack

start. There are three different options

in which you could configure your route.

First of all, you could say I don't want

SSR at all. disabled SSR by default and

you could when you're creating a start

when you're creating start from this is

a solid example but let's put a react

for example and over here if you say

create start function from react start

if you say default SSR is false then SSR

will be default however you could also

opt into SSR on per route basis now SSR

is true by default for every single

route but let's say you don't want that

you don't want that at all for specific

route then you could just set SSR equals

false. This will disable the SSR and

also the execution of routes before load

and loader and then it would be like a

typical client component that gets

rendered on the client. We we don't need

server side rendering. The third option

is data only and this is kind of neat

actually. This hybrid option will run

the before load function on the server

and send the resulting context to the

client. It will run the loader on the

server and send the loader data to the

client and it will disable serverside

rendering of the route component. What

this means is it will execute on the

server execute on the client execute on

the server executing on the client. So

let's see how that behavior works. So

first of all over here on the route

level at the route level if we say SSR

equals data only let's watch what

happens if I refresh the page. This is

data only. So you're going to see that.

So this is specifically used when the

data is loaded on the server. The before

load function is called as well as the

loader is called and the response is

then sent to the component. However, the

entire HTML is not generated on the

server. It disables the serverside

rendering of the root component. So now

you can see over here if we refresh the

page as we said data only there is that

blank page. However, if I disable it and

reload it, it already has it cached.

It's loading it instantly from the

server. So that's essentially the

difference. On the other hand, if I say

I don't want SSR at all for whatever

reason. So now you're going to see that

it's all client side is no longer on the

server. So it's no longer on the server

at all because it's by default. So now

if I console log here loader loader is

not going to be logged here at all. So

if I refresh it, nope, there's no log

for loader. However, if I remove this,

refresh it, go back. Now you can see

that loader does have the log here. We

do see loader log here. So you could see

the three different types of serverside

rendering or selective serverside

rendering inside our panstack start. Now

in our case we need SSR. It's nice for

our application. It's great for SEO as

well for returning all of this data. So

we're just going to keep it. Now when

you click on any specific route, it goes

to a dynamic route which says hello

product. That specific route hasn't been

set up yet. So if we go here, click on

the route. This is how it looks like.

Again, this is a card component. And at

the bottom, we also show recommended

products here as well. And these

recommended products honestly are all

products at this point. However, you

could just recommend them as needed and

tweak them as needed. So, let's build

the specific page now. Let's work on

building the dynamic pages. Now, if you

take a look, this is how it looks like.

Have the back to products link. You have

title, description. Again, similar data,

right? But here is also where you could

add to card. Save to later doesn't do

much, but you could definitely add that

as a feature if you want. Then we have

all these recommended products. Again,

if you take a look, if I refresh the

page, you're going to see that first

this data loads and then the rest of the

data gets loaded by showing some sort of

a loader here. And we'll replace it with

a nice skeleton as well. So you could

see that. But again all this to show

that how Tanstack start makes it so easy

for us to pick and choose the different

data fing strategies how it makes the

framework makes it easy for us to just

build applications and it honestly it's

a lot more fun let's build the page now

so here let's go to the ID page and if

you click on any of the individual

dynamic pages that's where we land

similar idea let's use a loader to load

that specific page So now in this case

we are going to get async and then get

the params from the loader and this is

where we could do return and if we take

a look at index right now we're getting

the sample products. So here we could

simply just get sample products find and

then get that data. Now if you take a

look at sample products at this point we

have we don't have an ID yet. So maybe

it's time for us to integrate it with

the database because right now let's

simply just working with sample

products. So enough of that. Let's use

database for now. Let's use a database.

So in this application we are going to

be using drizzle and post SQL alongside

superbase to set up our entire database

and its ecosystem. So first of all we

need to get all of these packages. It

also has this specific guide here. So

you could go there. Now let's copy this

and install it. Now Drizzle OM and

Postgress allows us to write powerful

SQL queries. If you haven't worked with

an OM before, the way it works is that

instead of you writing raw SQL queries,

it will give you an API, an interface

for you to just execute specific

functions and it's going to do the job,

the tricky, the hard part of writing

those queries for you. So that becomes a

lot easier for you if you are not good

at SQL but you just want to get things

done. It's performant as well because

you may not make mistakes and it will

figure out the most efficient ways to do

so and drizzle is quite powerful. So now

let's just copy this and head over to

the terminal and paste it. Then we also

now going to initialize the driver by

creating an index.ts file. But then as

you can see since we are using

connection pooling via superbase this is

exactly what we are going to set up. So

now that we have these two installed

let's go here and go to DB and create a

index.ts file. In this specific file we

are going to import drizzle from let's

restart our server now drizzle/

node postgress.

We are going to get pool from pg and we

are going to import from schema. Now

schema doesn't exist yet but we going to

create it. You're also going to say if a

database URL is not there set it and

then create a new pool here. Now

connection string will be the database

URL and we're also going to say SSL

would be that process

n dot database URL not SSL. base

database URL has includes

superbase

then reject unauthorized equals false.

And this is just one of those settings

you're going to need whenever you set up

the pooling. And honestly, it was a bit

tricky for me to figure out exactly how

all these individual settings work. But

there you go. There is no PG. So I

believe we have to install it. So we can

say PG as an extension as well. All

right, Super Base is a really powerful

Postgress development platform. It's

built on top of pro Postgress and if you

haven't already, make sure you go and

sign up. The pricing of it is actually

quite generous. Unlimited API requests,

50,000 monthly active users and so on.

So again, it's really awesome for you to

get started. After you sign up, just go

to the dashboard, create an organization

if you haven't already, and this is

where we're going to go ahead and create

a project called Stack Shop app. And

this is where we're going to select a

password. We're going to get it to

generate a password. Let's copy this. We

definitely need it. I'm in Europe right

now. So that's where that's the region

I'm going to pick. And let's create a

new project. All righty. So now our

super basease project is getting spun

up. Now the other thing is press connect

here immediately and instead of direct

connection what we want is a session

pooler cuz that is extremely important

for us. If you don't select this and if

you click on direct connection you will

not be able to connect to the database.

That's just the limitation. So now we

have this database and you see this

password here. That's exactly where we

are going to paste the password that we

just generated. So before we do

anything, let's just save the password

here. Copy the URL. And now create a new

file called as env. Now again just like

you have we have it in next.js. Same

idea you create an env file. Then you

could use process.n the name of the

environment variable to access it. So

here we could say database URL equals

this file. And now this specific

password let's just replace it here.

There we go. Perfect. Now we have

superbase

and we will be using the schema and

result to generate the table and insert

documents in the table as well. Insert

rows in the table as well. So for that

let's just go ahead and create a schema.

So now I'm just going to give you the

schema and this is how it works. We're

going to use the drizzle OMPG core

package to get all these functions. But

let's go ahead and see how we could

create it. So first of all, this is a

table. It's a PG table, PostPress table.

And we have a products table here.

You're generating the UU ID. You're

generating the ID which is a UU ID. That

means it's going to be a unique string.

We have name, description, price, badge,

and so on. description is text, price is

numeric, we are essentially also adding

constraints that it cannot be null and

so on. We also have an enum for batch

called as pg enum which with these

values. So if you try to insert any

other values other than these values,

it's not going to work. Then we have

reviews which is which is an integer.

Images var. Then we have inventory which

is also an enum which is again going to

be all these values for example. And