Is it just me or is there an increasing

number of those 15-hour long tutorials

where you spend more time building than

actually understanding what you wanted

to learn? Today, we're going to end that

by building a crypto screener app with a

built-in highfrequency terminal and

dashboard. It's powered by the Coin

Gecko API handling the most volatile

data on the planet in real time. Using

it, you'll build a homepage that

highlights live discovery of trending

assets and categories driven by realtime

market momentum. A global explorer coin

feed featuring a comprehensive all coins

view with rankings, prices, and

efficient serverside pagenation. an

analytics deep dive for each asset where

you use Coin Gecko's websocket API

enabling real time subsecond candlestick

charts onchain trades and price updates

through persistent data stream

connections with built-in pingpong and

autoreon and a global command pallet

that replaces traditional menus with

control or command K interface for

instant marketwide search. We aren't

just vibe coding, we're engineering. And

because of that, by the end of this

video, you'll understand how to fetch

large data sets on the server while

keeping the client lightweight. How to

run parallel data requests without

blocking the UI. How to combine

serverside data fetching with client

side revalidation and real time UI

freshness. How to use streaming and

suspense so pages render progressively

as data arrives. How to manage complex

flows with server actions cleanly and

predictably. How to build custom hooks

and a common reusable fetcher function

for cleaner and more maintainable data.

How to create reusable advanced UI

components that scale across the app

while keeping it fast and responsive

under heavy data load. Finally, you'll

learn how to use the websocket API to

display live streaming data and update

the UI in real time. All while thinking

about performance, scalability, and

architecture in real Nex.js apps. Once

you learn these, you'll be able to work

on any NexJS application comfortably.

And alongside Nex, you'll also use

TypeScript, Tailwind CSS, Shat CNN,

Charts, and Coin Gecko API, the most

trusted platform for crypto data. and my

go-to cryptodata API for building web 3

and crypto projects. You can build

almost everything in this project on

their free demo plan with up to 10,000

API calls per month, but I'll also teach

you how to use Coin Gecko's API analyst

plan for those instantaneous websocket

updates. You can use the JS Mastery 10

code for a discount on a paid plan if

you decide to go for it. The link is in

the description. So, if you're a

beginner to intermediate developer who

wants to learn how to build real NexJS

applications from a Figma UI and an API,

this video will give you everything you

need. And if you itch to build something

more advanced like full serverless, full

stack development with Nex.js, you can

check out my ultimate Nex.js course and

complete testing course for production

level learning. The link is in the

description. Go grab your coffee and

let's ship this

Let's start developing coin pulse by

creating a new Nex.js application. In

this course, you'll learn how to

structure a modern app using app router

and build reusable UIs with chat CN. So,

let's get started by spinning up a new

Nex.js application. I'll start by

opening WebStorm and creating a new

project. I'll create it as a new empty

project and call it coin pulse. We'll

create a git repo manually later on and

I'll set it to TypeScript. So, let's

create this. Will create a new folder

and if it's not empty, you can clean it

up and open up your integrated terminal.

Within it, you can paste the command we

just copied. MPX create next app add

latest and then add dot slash to create

it in the current repository and press

enter. It'll ask you whether you want to

install the create next app installer.

So say why yes

and then you'll be asked a couple of

questions. Do you want to use the

recommended settings including

TypeScript ESLint Tailwind CSS and app

router? And to that we'll say absolutely

these are all the tools that we need to

build modern scalable applications. So

press enter and within a couple of

seconds next.js installer will install

only three primary dependencies next

react and react dom and a couple of

additional dev dependencies needed to

improve our developer experience. As for

the recommended options that we chose

the reason why we chose them is that

TypeScript gives you stronger safety and

better developer experience. The app

router is the current Nex.js standard

for layouts and streaming and pill and

CSS will help us keep our styles

scalable without heavy CSS files. Once

it's installed, you can simply run mpm

rundev to spin it up on localhost 3000.

Then back within the browser, you'll be

able to see a Nex.js boiler plate that

looks something like this. Now, before

we start editing the files, I want to

quickly go over the capabilities of the

IDE that I'll be using throughout the

rest of the build. and you can too. It's

WebStorm and as of recently, it became

completely free for non-commercial use,

which means that you can now use it to

develop your projects. So, click the

link down in the description and

download it to be able to follow along

and see exactly what I'm seeing. Another

reason why I love using WebStorm is that

you can pair it with Juny. Juny is a

coding agent developed by Jet Brains

that makes you that much more

productive. Throughout this course,

you'll see me use Juni a couple of

times. Sometimes when I get stuck or

sometimes when I just need an extra push

to develop the code faster. You can also

download it right now so that later on

we can just use it together. With that

in mind, let me give you a quick tour of

the generated file and folder structure.

We'll spend most of our time within the

app folder. Here, every route will be a

folder and every folder can have pages,

layouts, and more. Currently, we have

only one page, which is the homepage.

Then there's the layout within which we

set up our fonts and our site metadata.

Here we can also define that our page

will be rendered in a dark mode for

example because whatever you do here

will be applied across the entire site.

Then there's the globals.css which acts

as the Tailwind CSS v4 entry point

because we're importing Tailwind and

setting up our theme and the public

folder we have our assets. Then there's

the next config where we can create our

Nex.js JS configuration for image

domains, experimental flags, build

settings, and so on. There's also a

package JSON for all of our scripts and

dependencies, package lock to keep track

of those changes, as well as a TS config

for TypeScript related settings. Now,

let's set up SHAT CN. Open up your

terminal. And thankfully, Webtorm allows

me to have multiple terminals running.

So, I will rename this to app. And then

I'll create a new one, which I'll simply

call terminal. And within it, I will run

mpx shhatzen at latest in it, which will

ask me a question whether I want to

install the shhatsen installer. And then

it'll ask me a couple of questions on

the styles that I chose, such as the

color that I would like to use. In this

case, we can go with neutral. And to

just verify if it's working, we can head

back over to our app page. DSX. Remove

everything from there and simply type R

A FCE, which is short for React arrow

function with export component. And if

this didn't work for you, you might need

to head over to plugins or extensions.

And then search for React snippets. In

this case, I'm using modern React

snippets, and they allow me to quickly

spin up new components. Within here, we

can simply return a p tag that'll have a

class name of text-3xl

and text- indigo 500. This will change

the color and make the text large. And

I'll make it say coin pulse. If you've

done that properly and head back, you

should be able to see a purplish large

coin pulse text right on your homepage.

Let's also open up our layout and modify

the metadata of our application. I'll

simply call it coin pulse. And within

the description, we can type something

along the lines of crypto screener app

with a built-in highfrequency terminal

and dashboard. So now, if you go back,

you should be able to see that the title

of your application change. And very

soon, we'll also change the favicon to

match the one of the final website,

which you and I will build together

very, very soon. And now that we've

successfully set up our application, it

makes sense to create a new GitHub repo

for it. So we can consistently from the

get- go commit and track our changes.

I'll call it Coin Pulse and simply click

create repo. Next, we can follow the

steps to get it committed. And this

might be a good idea to put our browser

side by side with our editor. That'll

look something like this. So now within

the terminal, we can follow the steps to

get it committed. I'll first say get

init add dot to add all the changes get

commit-m first commit get branch m to

create and check out to the new main

branch add a remote origin which will

connect the local version of this repo

to this one on github and finally get

push u origin main which will push the

code that we have created right over

here to our github repo. You should do

this at the start of every single

project because sharing your work makes

all the difference. Potential employers,

clients, companies, and other developers

can find you like this and check out

your work. Not only this allows you to

keep track of your commit history and

show everybody that you're the one

actually doing those refactors, but it

also allows you to include code rabbit

right from the start. Nowadays, I don't

create any projects without it because I

like to move fast. But still, I don't

want things to break. So, I always set

it up from the start and then later on

whenever I make some important changes,

I open up a pull request and let Code

Rabbit review them. I'll show you how

you can do that too later on. For now,

you can just click the link down in the

description, click try it for free, and

then create your account using GitHub.

As soon as it loads your workspace,

you'll be able to see all the other

repositories that I added or connected.

And then you can also click the add

repository button to add the current

repo that we'll be committing our code

to. With that in mind, now that the

setup and the boring part is done, let's

move from turning this into something

that looks more like this.

In this lesson, we'll start by

developing our simple navigation bar. So

back within our code, let's create a new

branch for it by running get checkout

dashb feet as in a new feature we're

adding and then navigation. This will

create as well as checkout to this new

branch. Now let's start by understanding

our design a bit better. I haven't just

coded this out from my head. Instead,

our designer prepared a complete crypto

platform design. I'll share it with you

for free within the video kit link down

in the description. That way you can

explore it, see how it works, and maybe

even download some icons such as this

coin pools logo that we've created as

well as some other icons that we have

right here. What you can also do is pay

attention to the color scheme. So, if

you click on the dashboard or on a

specific part, you'll be able to see the

color that we used for the background as

well as for the text. The whole app is

dark. We have the white text for the

primary text color, but also the

secondary text color right here. And

then of course there's this green color

that you'll often see popping up. Now

the goal is to take a couple of these

primary colors and put them within our

globals.css which will act as the theme

for our application. You can see the

theme that Shad Cn created already, but

we don't need none of that. So you can

remove it and instead click the video

kit link down below. find crypto pools

and right below here you can find the

snippets that I've prepared for you. So

simply copy the globals.css and paste it

right here. It might seem like a lot but

most of it is just setting the theme as

well as specifying some helper utility

classes that we'll use later on

throughout the application such as the

containers badges headers and so on. The

main goal of this app is to help you

understand nextg features like streaming

and data fetching not tailwind and CSS.

If you want to learn Tailwind, I've

already created a full video on it. I'll

leave a link down in the description so

you can check it out if you're not

comfortable with it yet. Still, of

course, I'll explain the styles as we

go. I just won't be writing them myself.

Let me show you what I mean. We'll

create our first component of the day.

So, right here within the root of our

application, create a new folder and

call it

components.

Within components, create a new file

called header.tsx.

You can see that webtorm automatically

asks me whether I want to add it to git.

I'll say don't ask again. And for now,

we don't need to add it. We'll do that

manually.

Within it, you can run rafce to quickly

spin up a new header component. And then

we want to import that header within our

layout because the header will be

showing on every single screen. So we

want to display it right here above the

children by simply referring to the

header component which will also autoimp

import it from components header. And

another important change we have to make

within our layout is to apply a class

name set to dark to the entire HTML

website. If you do that, you'll notice

that the background will immediately

turn over to dark mode. Now head over to

the header and let's get it implemented.

I'll start by turning this into a

semantic HTML 5 header tag. Within the

header, we'll define a div that'll have

a class name set to main-container

and it'll also have a class name of

inner. Now, this is not a main shaden

class name, but the one that I created

before. So to be able to see what it

actually means, you can search your

codebase for main container and you'll

find this layer components main

container where we're applying a padding

Y of six to give it some vertical space.

I'm also making it more responsive for

medium devices and small devices. Giving

it some max width and some spacing. Now

within it we can render a link component

coming from next link that'll have an

href pointing to forward slash which is

typically the homepage and within it we

want to display our logo. So I will

import the image component coming from

next image with a source of

for/assets/logo.svg

and an all tag of coin pools logo.

Finally, we'll give it a width of about

132 and a height of about 40 pixels. If

you save it, you'll see that we cannot

yet find the Coin Pool's logo. So, the

way you can get it is by going over to

the Figma design, clicking a few times

right here until you get to the logo and

export it in SVG. You can actually grab

the whole part, not just the image, but

actually the entire frame containing the

word coin pulse. Alongside exporting

that, I'll also export this little icon

right here, which is going to be used

for our currency converter. So, go ahead

and click until you get to the image and

then export it right here also as an

SVG. Once you export both, you can head

over to your public folder and delete

all the files that are within it and

simply drag and drop the two new icons

that you downloaded.

One is going to be the logo and the

second one is going to be the exchange

icon which you can rename to converter.

SVG. Now if you do that you can just

remove the assets part of the logo

because the logo is directly within the

public folder and it'll show up. Nice.

Now we no longer need this coin pools

text right here. Rather we can return an

empty div for now. Now back within our

header, let's continue with the main

part of our navigation. Still within the

same div, I'll create a new nav tag

within which I'll create a new link.

This link will have an href pointing to

forward slash. Yep, it'll still be the

homepage and it'll simply say home. Then

below it, I'll do a p tag that'll say

search modal, which will be a trigger

for opening the search modal. We'll work

on that soon. And then also another link

that'll have an href pointing to

for/coins which will open up the

research page for all of the tokens. So

we can say all coins. Now we have to

figure out which one is currently

active. And to be able to do that we

have to use browser's URL

functionalities. But Nex.js pages by

default are serverside rendered which

means that they don't have access to the

URL. So if you want to use the

functionality something like const path

name is equal to use path name coming

from next navigation you also have to

add a use client directive at the top to

turn this into a client side rendered

component. Now that we have it we can

head over into each one of these links

such as this one pointing to the home

and open up a new class name within it.

I'll use CN which is short for class

names which allows us to put dynamic

links. It'll always have a class name of

nav link but then dynamically we can

apply the is active

class name only if path name is set to

the forward slash and I'll also apply

the is home class name which will be set

to true in this case. So now you can see

that on the smaller devices it won't be

here. But if we go larger it'll be

there. We can do the same thing for the

coins page. So I will simply copy this

class name and paste it to the coins

link. But this time is active will be

true only when we are on the coins page.

There we go. Of course if you click to

it now you'll see a four or four. But

you can see that it is active when we

are on that page. And when we're on home

you can see that this one is white. And

with that, we've implemented our first

very simple navigation component. Not a

lot of logic is happening here, but hey,

step by step, we'll get there. This

concludes our navigation feature. And

with that also the navigation branch.

So, if you open up your terminal, we can

now commit the changes that we've

implemented by running get addit

commit-m and I'll say implement

navigation

and run get push. Since this is the

first push on the new branch, we'll have

to copy and paste this set upstream

method. Once that is done, you'll see

that our navigation branch had recent

changes 13 seconds ago. So, even though

this is a super small example, it is a

perfect opportunity for me to show you

how the rest of the workflow of this

great application will look like. We

open up a branch, start developing the

features. Once they're done, we compare

and open up the pull request, create

that pull request, and if you added Code

Rabbit to this repo, it'll very quickly

start repairing the report for you. In

this case, it has just one to do to find

more bugs. So, you need to give it a

minute. I think in this case, since it's

a super small PR, it might take just a

couple of seconds. And immediately,

you'll get a walkthrough of the changes

that were implemented. And once again,

you should always start reviewing those

changes from the start. so new bugs

don't sneak in. And I'm glad that we

have a super simple example to show you

how all of this works. In this case,

we're simply introducing a new header

component with navigation, integrating

it into the main layout with dark mode

styling, expanding the global CSS with

comprehensive color variables and UI

component styles. And we simplify the

homepage to an empty div. We see the

summary of changes per file or per

cohort of files. You get the estimated

code review time. In this case, it's

moderate because this globals.css does

contain quite a few class names. And

then we have a simple header. In this

case, I'm assuming we won't get any

major bugs, but a couple of nitpicky

comments such as these ones. But would

you look at that? There is one huge

potential issue. And it says that for

assets in the public folder, Nex.js

expects an absolute path starting with a

forward slash. So using just logo.svg

SVG may cause a 404 or resolve

incorrectly depending on the current

route. Okay, this is actually huge. It

then gives you a proposed fix so we can

fix it. In this case, it cannot be any

simpler, but rather just adding a simple

character and then it also provides you

with a commitable suggestion in case you

want to do it right away. But if it's a

bit of a more complex fix and you want

to run it by somebody else, it also

gives you a prompt for an AI agent to

fix. In this case, it might feel really

silly to try that out because we only

have to add one character. Come on,

we're not that lazy. So, back within the

code, I'll head over into our header.tsx

and I will add a starting forward slash.

Then, I will simply run get add dot

getit commit and say fix code rabbit

suggestion

and get push. As soon as you push this

PR should update. The code should be

rechecked. But in this case, I believe

we're more than safe to merge this pull

request and continue developing the

other features of our application. All

of which are going to be about crypto

market data.

In this lesson, we'll set up the Coin

Gecko API so it's easier to develop the

UI alongside displaying the real data.

Coin Gecko is my go-to source for crypto

market data and it's been a trusted

standard in the space since 2014 and

they're kindly sponsoring this video. So

besides learning XJS using this API,

you'll also learn how to develop tools,

dashboards, and screening monitors to

discover market insights, track trends,

and understand how realworld crypto data

is analyzed in production applications.

You can start using Coin Gecko by

heading over to API pricing. Then, if

you want to try it out before

subscribing, you can create a free

account and you'll be able to develop so

many of the functionalities from this

application entirely with a free

account. You get 10,000 calls a month

with a rate limit of 30 per minute. I'll

show you how to make the most of the

demo API, but also later in the project,

I'll show you how to use the analyst

plan that'll give you access to 10

websockets, which we'll use to build a

realworld crypto screener focusing on

real time data. For now, go ahead and

start with a demo account by clicking

create free account right here. I'll

leave the link down in the description

and then simply join in with Google or

Apple. To create your API key, simply

click your profile and then developers

dashboard. And here you can add a new

key. You can give it a label such as

Coin Gecko and click create. Then you

can simply copy it and add it within

your application specifically within a

new file that we'll create in the root

of our application that I'll

call.env.local.

So here we can create a new coin gecko

API_key

which will be equal to the key you just

copied. We'll also duplicate this and

allow it publicly so we can access it

from a next public endpoint which will

give it access on the client side as

well. Finally also define the coin gecko

base URL by making it equal to https

col//pro-api.cocko.com.

at coiningo.com/api/v3.

We'll use this later on. And now that

you have your own coin gecko API key, we

can turn this into this. So immediately

in the next lesson, let's dive right

into implementing our homepage.

Now that we've got the API key, you can

head over to your app page and we can

get started developing it. We'll first

develop the layout. So I'll turn this

div into a main tag and give it a class

name set to main container. Then within

it I'll create a new section. And that

section will have a class name set to

home grid. So we can create the grid of

our homepage. Within it we can start

creating the layout by creating a couple

of different P tags. We'll have our coin

overview which is going to show the main

information about the coin. Then we'll

have another P tag that'll show all of

the trending coins. And finally below

this section, we'll create another

section that'll have a class name set to

W full. So this one is going to take the

full width of the screen with a margin

top of seven to divide it from the

previous section and a space Y of four

in between the elements. And this one

will render the name of the category

that's going to be well categories. So

it'll show different categories of

cryptocurrencies. So now on small

devices, you can see they all show up

one below another. But if you go to a

desktop screen, you'll see that the coin

overview and trending coins will show

one next to another, whereas the

categories will take the full width of

the screen exactly like it does on the

final application. Now we can create the

UI for the coin overview by removing a P

tag and turning it into a div that'll

have an id of coin or view.

Then within it we can display another

div that'll have a class name set to

header.

Within the header we can display an

image. And for the source for now we'll

make it static but later on we'll make

it dynamic depending on which coin we're

checking out. So right here, the source

will point to https

col/assets.coin.comward

slashcoins

slashim images

slash one large bitcoin.png.

So for now, we're going to obviously

display bitcoins logo. So that's exactly

what I'll type right here. and you'll

get an error saying that you cannot yet

display this image right here. That's

because within our next config, we have

to allow the assets.cocko.com

endpoint to be able to display images.

So simply say images

remote patterns

and then within it add one that has a

protocol of HTTPS and it has the host

name set to assets.cocko.com.

If you do this and add a width and a

height to this image, such as 56 and 56,

you'll be able to see a Bitcoin logo

appear right here. Then, right below it,

let's also render another div that'll

have a class name set to info. And

within it, we can display a P tag

that'll say the full name of the coin

such as Bitcoin and then BTC, which is

the ticker, and then an H1, which is

going to render the current price of

Bitcoin. At the time of the recording,

it is about 89K.

So, I'll set it right here. And we can

also give this div a class name of

header, but alongside it, a padding top

of two to make it look good. And that's

it for the primary coin display. But

later on below this Bitcoin, let's spell

it properly, will display an entire

chart which will be updated in real

time, allowing you to choose the period

as well as the update frequency. But for

now, let's move on to developing the

trending coins. Throughout this

application, there's going to be so many

different tables. We're going to have

one here, one there, and there's going

to be another one in all coins. That

means that it makes sense to take some

time and really try to approach the data

table component in a way that it's

reusable and that it looks good on all

the different places where it's used.

That way we'll avoid writing the same

boilerplate code over and over again. So

first let's install a table component

coming from chats UI. We can install it

by running this command right here that

is mpx chat at latest add table. Once we

add it, we can create a new component

for it within the components folder

where I'll create a new file and call it

data table.tsx.

And within it, we can follow the steps

needed to recreate a chassen table. And

then we'll modify it to our use case.

First, I'll copy all the imports, then

run rafce,

and then copy the actual usage of the

table right here. What you can do then

is simply import it within your page.

So, right here below trending coins, I

will import the data table

coming from our application. And if you

get back, you'll be able to see this

demo table coming from SHAN. This table

right now just displays one table. So if

we reuse it on a second page, it'll

still show the same data. We have to

somehow extract that data and we need to

be able to pass it into the component to

show different data depending on where

it's getting called. That means that

we'll have to pass all the new columns,

the data to fill in those columns, the

row key, which is a function to generate

a unique key for each row, an optional

table class name in case we want to

style it differently, a header row class

name, a header cell class name, a body

row class name, and finally a body cell

class name. Now, since we're defining

all of these different props, first of

all, they have to be within curly braces

as we're dstructuring them from props.

And then we have to define the type of

all of these properties. So something

like defining that columns is going to

be maybe an array. Then data is going to

be an array of different objects. And

then we have to define the types of all

of these properties. So instead of

writing it all right here, what you can

do is create a new file called type d.ts

within the root of the application. This

is a special file and d stands for

declaration which means that we'll

declare all of our types right here.

Within it, you can start defining

different interfaces. Interfaces are

simply object-like types. So interface

you can call it data table props and

within it you can for example say that

the table class name is optional and of

a type string and then you have to

repeat this for all of the other class

names and then you'll be able to declare

all of these types directly by referring

to the prop. So data table props like

this. Of course right now it doesn't

know about all of these other ones

because we haven't yet declared them.

So, just so you don't have to write all

of these types yourself, I have actually

gone ahead and provided them for you

within the video kit link down in the

description. So, under snippets, you can

find types.d.ts

and simply copy and paste them here.

There you'll see the data

table props containing the data table

column, the data itself, row key, and

all of the other class names.

If needed, occasionally I'll go back to

this file and explain exactly how I came

to these types. One thing that we also

have to do is make this data table

accept an additional type that we're

then passing over into the data table

props. Now, in this case, we also have

to pass an additional prop called T into

the data table props. You can do that

like this. Define it here and here. Now

this file and our entire application

knows exactly what type of columns is

going to be the format of the data the

row key which we have to spell properly.

Same thing for the body row class name

and now we can use them across our

application. If you want me to do a

fully typed version where we write all

the types from scratch, just let me know

down in the comments below and we'll do

a proper TypeScript crash course. Now,

with that in mind, let's turn this basic

table into a table that's fully

reusable. First, I'll give it a class

name set to CN. So, we can pass multiple

class names into it. The first one will

be custom scroll bar. So, we give it

that hint of green. Don't forget to

import CN coming from lib utils. And we

can also pass this new class name that

we'll create called table class name. In

this case, we can skip the table

caption. But for the table header, we

can simply provide a new class name of

header class name. And I think we

actually missed this one when defining

all the props that we'll need to pass.

Then right beneath the header, we have

the row. So let's give a new class name

to this row of CN on hover. We want to

change the cover to transparent. So I'll

say bgt transparent exclamation mark.

And then we'll also apply the header row

class name within it. You can see that

currently we're displaying a couple of

different table heads such as the

invoice status method and the amount. In

this case, we'll want to map over all

the columns that will dynamically pass

over through props. So let's remove

these table heads and instead let's map

over the columns by saying columns.m map

where we get each individual column and

its index. And for each one we

automatically return a table head that

will then render the column header

information.

So when we're calling the data table

specifically right now that is within

our homepage we'll have to pass in the

columns data and for now I'll set it to

an empty array. Later on we'll fill it

with real data. This table header needs

to have a key since we're mapping over

it. And that's going to be an index for

now. And a class name set to we'll do uh

CN so we can provide multiple class

names.

We'll provide a bg dark of 400,

text-purp,

padding y of four.

Only the first element will have a

padding left of five. And the last

element will have a padding right of

five as well. You cannot see those yet

because our column headers are empty.

But if I go back here and provide a

header for our first column to something

like let's do a title of the coin. You

can see how this is going to look like.

And then we can duplicate it and provide

a second one which is going to be maybe

the price of the coin. And you can see

how that's going to look like right

here. Then right below the table row for

the table headers, we can go down and

focus on the table body. Within here,

we'll map over the data by saying data.m

get each row and its index. And for each

one, we can automatically return a table

row. Each table row will also map over

the columns. So I'll say columns.m map

where we'll display a table cell. Each

table cell will then render its contents

by saying column dot cell will pass over

the data for the row and the row index.

This row index is coming from here.

Of course, data doesn't yet exist. So

very soon when we get the real data

coming from this table, we'll also need

to pass along to the columns the data to

fill in those columns which is also

going to be an array. Then since we're

mapping over our table rows, let's

provide a key to each one. And to make

it super unique, we'll pass it into this

row key function where you pass the row

and the row index. Then we can give it a

class name set to CN. And we'll pass

some class names like overflow hidden

rounded-l

border-b so we can see the

differentiation between each row

border-purp

on hover. We'll change it to background

dark 400 over 30.

And it's very important to make it

relative. That way it's tracking your

cursor and you can actually see as

you're hovering over different rows.

After all of these class names, I'll

also provide the body row class name.

This one is going to be unique depending

on what we pass in the props. And

finally, we'll do a similar thing for

the columns. I'll rename this I to

column index. And we'll provide this

table cell a key of column index as well

as a class name of CN. And then we can

pass a padding Y of four to create some

vertical spacing.

will give to the first element a padding

left of five and to the last of padding

right of five. This is going to make so

much more sense once you actually see it

on the screen. So now that we have this

what seems to be a reusable table, we

can head back over to our homepage and

actually put it to use. We'll need to

create a format for the data that we

need to pass into this table. So let's

do it right here above the page. const

columns

of a type data table column which will

take in the trending coin coming from

types specifically an array. It'll be

equal to an array where each specific

column will contain a header.

For example, the first one will be the

name of the coin. Then it'll contain the

cell class name that'll be set to name

dash- cell. And it'll contain the cell

information itself, which in this case

will be set to a function where we

accept the information about the coin.

And then let's actually put this into

multiple lines so it's easier to see.

Once we get it, we want to extract that

item that we're displaying. So that's

going to be coin item. And then we want

to return in this case not just a title

saying the coin name but rather we'll

link to the details page of that coin.

So we'll have a complete link

coming from next link with an href of

forward slashcoins

slash item id. Of course we have to turn

this into a dynamic template string just

like this. And then within this link, we

can render an image with a source of

item.large.

An al tag can be the name of that coin.

So that's going to be item.name. A width

of about 36. A height of 36 as well. So

far, we have no data to display, but

trust me, it'll appear right here soon.

And finally, below the image, we can

render the actual name of that coin. So

that's going to be within a p tag

where we're going to render the

item.name. Now we can go below this cell

right here and we can add another

column. This one will have a header of

24-hour

change.

So how did the price move in those 24

hours? And finally, what will display

within that cell? We'll get the

information about the coin. And then

we'll open up a function block within

which we can extract that item from coin

item once we actually fill it with data.

And we'll figure out whether it's

trending up or down. So const is

trending up is equal to item data.

Underscore change percentage_24

hours.USD.

And if it's greater than zero, that

means that it is trending up. Finally,

that gives us the info to return a div

displaying the corresponding change. So,

I'll give it a class name of CN and

it'll say price change. So, that's going

to be the general class name. But within

the CN, if it's trending up, if it's

trending up, then it'll have a class

name of text- green 500. else it'll have

a class of text- red 500 and don't

forget to import CN because we're now in

a different file within it we can

display a P tag within which if it is

trending up in that case we'll display

an icon coming from Lucid React so let's

install that package it's maybe the most

popular icons package on mpm it's called

lucid react

and once you install it you can just

start typing trending up and simply

import it from Lucid React. We can give

it a width of about 16

as well as a height of 16 as well. And

likewise, I'll duplicate it. Now, we

want to see what's going to happen if

it's trending down. In that case, we can

just say trending down and import that

icon from Lucid React. Of course, this

import has to come all the way at the

top. trending up and trending down.

Let's make sure to properly close it.

And again, we have no data yet, but

we'll have it very soon. Just one more

header to show, and that header is the

price. So another object with a header

called price, a cell class name of price

cell and then a cell itself which

gathers the information about a coin and

automatically returns the price of coin

item

data.

This one is a bit simpler than the

others, right? Okay, great. So now is

the time that we feed some kind of data

into the table to be able to see it.

We're going to gather tons of data from

the Coin Gecko API, which means that

we'll create a reusable fetcher function

in a new file to fetch everything in a

super simple way. But before we dive

into implementing that, I still want to

see how this table would look like with

some fake data, just until the real data

comes in. And this is one of those cases

where AI can help you in a matter of

seconds. In this case, I'll be using

Juny. So, if you haven't yet installed

it, click the link down in the

description and just install it and open

it up. And once it's there, let's tell

it something like review app page.tsx

and add a local dummy

trending coin array

data set

matching the trending coin type. So

you'll be able to use our TypeScript

types to define that data set. Use

existing local image assets for thumb

and large. So images resolve. Wire the

dummy data into the data table. So the

table renders rows. I think if you stop

and retype this into Juny, it should be

able to create some kind of a data set

for us. Let's see how well it does. It

looks like it's understanding what we're

doing. So it's updating its own task

progress. The objective is to add dummy

data to the data table. It managed to

find the file and update it. There we

go. It's editing the page as we speak

right now, adding the dummy trending

coins such as Bitcoin and Ethereum in

this case. And it should also be able to

automatically put them into the table.

There we go. It added the dummy trending

coins with the columns, the row key, and

the table class name. Wonderful. So if I

collapse this right now, would you look

at that? We can already see the data

within the table. Under name, it shows

Bitcoin. And it looks like it used the

coin computer logo as the logo instead

of the actual Bitcoin logo, which is

totally fine for now. We're going to

replace this later on once we get the

real data. And then it's also displaying

the 24hour change, whether it's trending

up or down. Wait, is it just me or did

Juny just fix this part as well? Because

here before I don't think I used the

absolute value and two fixed percentage.

I believe we just had it written like

this which is not as precise. So this is

definitely better. So now that we have

the homepage that looks like this but

still displays dummy data, it deserves

to get the real data fetched from the

Coin Gecko API. So in the next lesson,

let's build a fetcher function that

allow us to do just that.

In this lesson, we'll start fetching

real data and display it on our

homepage, and we'll do that with Coin

Gecko's demo API. I'll leave all the

relevant links down in the description,

but in a nutshell, this demo API allows

you to call many different endpoints.

Everything from a simple ping to

checking the prices of coins, as well as

listing all of the supported coins and

their markets. There's a lot of stuff to

explore, so let's dive right into it.

First things first, I'll install an

additional package that will help us

with creating different URLs. MPMI

query-string.

It'll allow us to stringify URLs. Then

we can create a new file within the lib

folder. It'll be called coin

gecko.actions.ts.

This will be a server file. So we can

use the use server directive because

it's only going to be called from the

server. And within here, we'll implement

all the data fetching logic for all the

different Coin Gecko API endpoints. I'll

also import QS from query string so we

can stringify our URLs later on. And

let's also get access to our coin gecko

base URL by saying const base URL is

equal to and we already stored it in our

process.env

under coin gecko_base

URL. We can just check it to verify it

is Coin Gecko base URL. And we need to

do the same thing with the Coin Gecko

API key. So I'll duplicate this. Go to

the process.env

Coin Gecko API key. And I'll rename this

to API key.

If we don't have access to the base URL,

that means that we cannot do anything.

So let's immediately throw a new error

saying couldn't get a base URL and I'll

duplicate that and do the same thing

with the API key if there is no API key

could not get API key. Perfect. So this

will save us in case we cannot properly

get it from environment variables. And

now we can focus on the most important

function of this file. The one that's

going to be responsible for fetching all

of the different endpoints. I'll export

it. So, export async function and I'll

call it fetcher. And I'll define this

new dynamic type that we'll pass into it

of t depending on what we're fetching.

And it'll take in a couple of

parameters. It'll take in the endpoint

that we're trying to fetch of a type

string. It'll also take the params that

are going to help us fetch specific

things. These are going to be optional

and of a type query params. And finally,

we want to revalidate it. So I'll say

revalidate to 60 seconds in case we

don't revalidate it sooner. Finally,

this function will return a promise

because we're making an asynchronous

call. And then we can open it up right

here. So first things first, we have to

figure out which URL we're trying to

call. It's not just as simple as

defining URL and making it equal to the

base URL. We have to construct the URL.

So that's why we're using this QS as in

query string where we can stringify a

URL by connecting together different

parts. First we pass the URL object that

contains the URL itself which is going

to be a concatenation of the base URL

and the endpoint that we're trying to

call and then to it we can also append

additional queries which are going to be

params. So essentially we're

constructing this coin gecko starter

part and appending the endpoint like

coins as well and potentially passing

some additional params like I don't know

the ID of our account or the API key

equal to the API key. I'll show you how

we're going to connect it all very soon.

And we can also pass an additional

options object right here that's going

to say skip empty string and set it to

true so that we don't have to manually

remove the parameter keys if we pass

empty values as well as skip null values

set to true. Perfect.

Now we have to make a call to this URL

and for that we'll use a regular fetch

object. So I'll say const response is

equal to await fetch the URL and then

we're going to fetch it but at the same

time we're going to pass a few headers.

We need these headers to be able to make

a valid request such as XCG Pro API key

which we're going to set equal to the

API key that we got from the Coin Gecko

API and then also the content type which

we'll set to application JSON as that's

how APIs most commonly communicate. Now

I'll define the type of these headers.

It'll be a record of a string and string

pair. Finally, we can define the next

object in the response and we'll pass in

the revalidate in case we want to

revalidate the response in a specific

amount of time. Finally, we have to

check if the response went okay. So, if

it's not an okay response, in that case,

we can extract some kind of an error

body which is going to be of a type coin

gecko error body equal to await

response.json. And then on this

response.json, JSON. We can also chain a

catch that looks like this and then

returns some information. Finally, we

can throw a new error that'll say API

error and it'll include the response

status so we know what happened as well

as

error body error or if that doesn't

exist it can also include the response

status text. So this way we for sure get

something back. And finally, if the

response is okay, we're going to return

the response.json.

So what we're doing here is creating an

abstraction that allow us to much more

easily make every single endpoint call

later throughout the application. So for

now, we want to implement the first one,

the one that's going to fetch the data

for Bitcoin, what we already got the

dummy data for. To do that, we can head

over to the Coin Gecko API reference for

the demo API. And here you can check how

to fetch the coin data by ID. This

endpoint allows you to query all the

metadata, including the images,

websites descriptions address and

market data as well, such as the price,

all-time high, exchange stickers, and

more. The only thing we have to do is

call the forward slashcoins slash ID. So

if you press the try it button right

here, you'll see how the request will

work. You have to feed it with your API

key. Thankfully, we have ours. We have

already stored it in our application. So

I'll simply copy it and paste it right

here. And then you have to pass the coin

ID. In this case, we can go with

Bitcoin. As soon as you do that, you'll

see that we get back this kind of an

information. an object containing the

ID, the symbol, the name, the web slug,

and much more information about Bitcoin,

even how it's called in different

languages. This is pretty cool, but what

I care about is the price. So, you can

see here the market data and the current

price in all the different currencies in

the world. This is amazing.

And yeah, it contains a lot of data. So,

now we want to implement it within our

code. I'll head back over here and since

we've built a fetcher, we can actually

just make a simple call directly within

our homepage, which is where we need to

actually call the data. So right here on

the home, I'll turn this page into an

asynchronous page. So we can await calls

right here. And then I'll say const coin

is equal to await.

We're going to import the fetcher that

we have created in our coin gecko

actions.

We'll define the type that we're

expecting this to return. So it's going

to be the coin details data. And what

are we doing here with TypeScript? Well,

if you remember in the fetcher function,

we defined that we're going to pass a

specific type T. And when this function

is resolved, it'll return T type. So

since fetcher will call different API

endpoints like an API endpoint for coin

details but maybe sometimes it's going

to be the entire coin list or it's going

to be market or all the different data

we cannot yet know to define it at this

time. We have to define the type at the

time when we call the fetcher and that's

in this case returning the coin details

data which is exactly what you've seen

from the coin gecko demo API directly in

their playground. So now we know that

this coin will actually contain the coin

details data which is going to be the

ID, name, symbol and so on. So if we try

to do something that doesn't exist like

coin.est, we'll immediately know that

test doesn't exist on coin data details.

But if we try to do something like

coinid, you'll see that this one is okay

and it's of a type string. That's the

beauty of TypeScript. Now the endpoint

for this one is going to be forward

slashcoins slash bitcoin

and we also need to pass an additional

options object right here of

dex_pair_mat

which I'll set to symbol. What this does

is it allows us to return back a simple

human readable token symbol like for

example BTC for bitcoin instead of the

entire address. Okay. And now that we

have done this, you see that we're

getting an error. And that's good

because that means that our fetcher

error handling is working, telling us

that we got a 401 unauthorized. And

that's being thrown directly from this

line right here in the fetcher. That

immediately makes me think that we have

an issue with our API key or in the way

that we set our API key. Yep, right

here. We should have put CG as Coin

Gecko, not CH.

And as soon as you do that, you can see

that the error is gone. And for the

request, we get back a 200. So the only

thing we have to do now is properly use

the data of the coin that we're getting

right here. So right in the header, we

can remove this image right here. At

least remove the static decoration of it

and say that the source is equal to coin

image.large.

The al tag will be set to coin.

Then for the name of the coin, we can

set it to coin.name

forward slashcoin

dos symbol.2

uppercase. And then finally the price

which is under coin domarket

data.currencore

priced.

I knew it's going to be here because I

tried it before within the coin gecko

playground. Now, as soon as you do this,

you'll see that we're going to get an

invalid source prop because Coin Gecko

images are not yet supported under our

next config. So, copy this host name and

head over to our next config, which is

right here. And then on top of the

assets Coin Gecko, go ahead and add

another one

that's going to be the host name of

coin-im images.cocko.com.

If you do that, it'll be able to

properly pull the image from Coin Gecko.

And now we can go back to our homepage.

We can also format the price in a bit of

a better way. Again, AI tools are

perfect for this. So I'll just select

it, press command shiftp, and open up

juni. And I'll tell it to create a

utility functions

within the utils file that'll properly

format

a number in a currency format and then

apply it within homepage. And I'll even

paste this part where we're using it.

Let's see how well it does. So, I need

to update a currency formatting utility.

Okay, it already edited utils.ts

and it updated the homepage, the price

cell. Oh, I can see a change right here

on the homepage immediately. And that's

it. Check this out. So, it created the

format currency function within our

utils file which is right here within

the lib. And then it imported it at the

top format currency. And then it even

used it by wrapping this price right

here. And now we have commas, the dollar

sign, and everything else. Wonderful.

Now on the same page, we also want to

fetch the trending coins. So we can

display them right here. We can do that

with the trending search list API

endpoint, which is also a part of the

demo API. It allows you to query

trending search coins, NFTts, and

categories on Coin Gecko in the latest

24 hours. So to try it, the only thing

you need is a demo API key and you get

back the data. We can implement it very

easily by making another fetcher call

right here. const trending coins is

equal to a weight. We use the same

fetcher utility function. And then we

pass the type of what we're expecting to

get back. In this case, we're expecting

to get back coins, which is going to be

an array of trending coin type. And

specifically we're making a call to

forward slash search/trending.

For the second parameter which are the

options we can pass undefined because we

don't have any parameters. But then we

have the revalidate key which we can set

to 300. Now think about what's wrong

here. What you've built is exactly how

most developers and even AI would

approach this. It's correct, readable,

and works just fine. you would now be

able to map over these coins and display

them on the homepage. But when you think

about performance, scalability, and user

experience, this pattern can cause

problems as your app grows. And let me

break down why. In modern web

development, speed isn't just about how

fast your code runs. It's about when

your users see the content. When

building apps with Nex.js GS and React

server components, it's easy to

accidentally create something known as a

waterfall, which is a common

architectural bottleneck that slows down

your application. A waterfall happens

when data requests are executed one

after another rather than

simultaneously.

In a standard asynchronous function, if

you have one await call in front of the

other, it's going to wait for it. So the

coin data is fetched first and then only

after it resolves the trending coin

starts fetching the data and then it

gives the response. If each request is a

couple hundred milliseconds then the

users will definitely notice. So what's

the solution? Well the quickest way to

break a waterfall is to trigger requests

in parallel using a promise all. This

tells JavaScript to fire off all

requests at once and then wait for the

group to complete. The advantage is that

it's significantly faster than the

waterfall as both of these requests

happen at the same time. But the

limitation is that while it's faster,

it's still a blocking operation. The

server will not stream in any HTML to

the client until the entire promise all

has resolved. If one request is slow, it

holds the entire page hostage. Not good.

So, finally, there's suspense. Suspense

is a revolutionary way of handling

asynchronous dependencies. Instead of

waiting for the data to be ready before

rendering the page, suspense allows you

to render the page in chunks. You can

deliver the static parts of your page

like your navigation, layout, sidebars

immediately while you stream in the data

that comes in as soon as it does. How

does that work? Well, you have to wrap

your data fetching component, in this

case the homepage, directly within

something known as a suspense boundary.

Then you have to provide a fallback

which is usually a skeleton like a demo

version of that page without the data.

And then you have to stream send the

data to it. So think of this as a mini

master class on streaming as well. And

let me show you how it works. Right

within our components folder, I'll

create another folder and I'll call it

home. Within home, I'll create a new

file called coin overview.tsx

and simply initialize it using rafce.

Then to it, copy and paste the fetcher

for the coin details. This is going to

be it coin and paste it right here at

the top. Of course, make this one

asynchronous as well. And also move the

part that actually uses that data.

That's going to be this div that says

coin overview. Thankfully, it has a

nicely descriptive class name. So, you

take it from here, you move it into here

and you return it as its own component.

Similarly, we want to create another

component for the trending coins part.

So, also within home, create a new

component, call it trending coins.tsx.

Run rafce and then also copy the fetcher

part that we have added within our

homepage. Const trending coins. We can

now remove these ones from the home and

simply paste them in the trending coins

at the top. Then we have to do the same

thing with the JSX. So grab the

declaration of how a table is supposed

to look like. These columns right here.

You can just copy them

and remove the dummy trending coins for

now. And then just move that part over

to the trending coins. We can add them

right here at the top below where we

fetch the coins. Don't forget to also

make this one asynchronous. And finally,

paste the part where we actually display

the trending coins. That's going to be

this one. A P tag that says trending

coins. And then a div that actually

covers them, but not including the

category section. So, just the inner

part. Once you do that, you can paste it

right here. And you'll see that our

homepage has gotten pretty empty. Oh,

and since we pasted this, we also have

to wrap it in a React fragment because

we cannot have two adjacent properties,

one next to another. And we can use this

trending points data and pass it as the

data. But you can see that my

indentation is not that good because we

did a lot of copy pasting. And for that

I think it makes sense to set up

prettier and eslint. I don't like doing

those manually. So I'll call Juny to

help me. And I'll say setup eslint

and prettier within this project.

So let's see how well it does. It's

going to open up package JSON. check

whether we have it already and

potentially create some eslint

configuration and prettier configuration

files. It can even run terminal commands

for you to check how is your

installation looking. There we go. It's

going to run the lint command and then

format it. And take a look at this. It's

going to fix some errors and maybe

you'll have to do it a couple of times.

It even removed the unused import

statements and additional stuff that

wasn't necessary. And there we go. It

did it. Now I just think I have to

enable it on save. So I will search for

eslint right here within the settings.

I'll turn on the manual configuration

and detect it directly from my project

and point to the configuration file

which is right here within the coin

pulse. And I'll repeat the same thing

with prettier. So it's going to be a

manual configuration pointing to

prettier and we will run it on save.

So now if you make some changes or

indentations or anything like that and

then you press save, it'll format it

automatically for you. Wonderful. So now

we have these trending coins right here.

But we have unfortunately cleaned up our

homepage entirely. So it's not showing

any data. But we did clean it up a bit

because now we have separated the

concerns. Each one is fetching its own

thing. It looks like we have one warning

right here within our trending coins.

Let's actually make this a div with an

id of trending dashcoins and render this

as an h4 trending coins. Now it looks

like data is complaining about the

format that we're receiving these

trending coins in. So what I'll do is

I'll say trending coins dotcoins dots

slice and we'll only get the first six

or pass an empty array in case we cannot

fetch them. And now we can actually put

them to use back within our homepage,

which is now much cleaner. It doesn't

have anything. So, first things first,

we're starting with the home grid. And

within the home grid, we'll use this

suspense thing coming from React.

Suspenses need fullbacks as I explained.

So fullback for now can simply be a

keyword of loading within a div. And

then once it loads, we want to show the

coin overview. Then we want to duplicate

this right below. And instead of

rendering the coins, now we're going to

render the trending coins.

Here we can say loading trending. And

here we can say loading overview.

And now if you save it, you'll see that

basically they load instantly. But if it

actually did take some time for them to

load, oh, there we go. You saw it for

half for like a millisecond. It said

loading something. And we can also style

this trending coins table a bit better

by giving it a header cell class name of

padding Y of three like this as well as

a body

cell class name which is going to be set

to a padding Y of two like this. So

check this out. First of all, it looks a

bit weird because here we have to

display our full chart but bear with me.

Both of these two containers render

their own data. And if you open up

inspect element, head over to network

and turn on a slower network, not even

super slow, but like fast 4G. And you do

a hard reload. Maybe we have to go a bit

slower like a slow 4G or maybe even

slower like 3G because this is super

fast. You can see that they still load

pretty much instantly even if we disable

the cache. But having this fallback of

loading is a bit weird because you can

see this flashing text, right? If I keep

repeating and then it falls into place

and this messes with browser's

cumulative shift because it breaks the

layout while it's loading. So we have to

add a proper fallback to both of these

components. I think this is another one

of those opportunities where AI tools

like Juny can really shine. I'll open it

up and we can tell it something along

the lines of create a let's call it

fallback.tsx

tsx file with coin overview fallback and

trending coins fallback skeleton UIs

that match the existing and now I'll

refer to the class names that I have in

the CSS which is going to be

hashcoin-overview

fallback and hashtrending

coins fallback

CSS rules

using data table for the trending table

layout. And then we also wanted to

update the page.tsx

to use these components as suspense

fallbacks. I think I was super precise.

Uh I think it would have been able to do

it even if I was less precise. But let's

see just how well it does. So, it's

going to get the structure of the

project. Check out the CSS and then

it'll start creating the skeletons

within the file that we told it to do it

within. There we go. It understood the

task. It's going to check the structure

immediately create a component that acts

as the fallback element. So, now it

should actually Oh, wait. It did it. So,

if I reload, check this out. I keep

pressing reload. And as it's reloading,

we can see that we have empty skeleton

containers for where the data is

supposed to be as soon as it loads. So

that nothing on the screen shifts. And

then as soon as I stop pressing my

keyboard like a maniac, we immediately

see the data stream in right where it

should be. So let's see exactly how

we've done that. Basically within

suspense we have added these fallbacks

that are basically just empty divs with

some styling that replicate the

structure but not data of the website.

And again if you like go to a super slow

network. I'm not even sure if we'll be

able to notice this given just how quick

Coin Gecko's APIs are. But if we disable

cache and go to like 3G and reload. Yep.

You can see how fast that was. And I'm

going to switch it to something like a

4G 4D images to stream in as well.

Beautiful. This is already amazing.

We're utilizing two different endpoints

from Coin Gecko API. And even though we

still have this huge empty space in the

middle, which we'll implement in the

next lesson once we add our candlestick

chart, we first want to push this over

to GitHub to do a bit of a recap of what

we've done and see if we have made any

errors on the way. So to do that, I'll

head back to the terminal and I'll run

get status to check which branch we're

on. And it looks like we are still on

the feed navigation branch, which is

fine for now. We could have used better

naming for implementing the homepage,

but for now I'll do a push. And then we

can open up a BR. So get add get

commit-m

and we're going to say implement coin

overview and trending coins UI and

functionality

using the fetcher utility function

and get push. Now back on our GitHub

repo, you'll see that the feed

navigation had recent pushes. So let's

go ahead and compare them with the main

by creating a pull request. There we go.

There's no conflicts, which we know

because we're the only ones working in

the project. But let's wait about a

minute for Code Rabbit to check whether

we have some bugs or inconsistencies. In

this lesson, we've established a

cryptocurrency dashboard foundation with

tooling configuration with ESLint and

prettier, a serverside API integration

layer for Coin Gecko data, and a

reusable table component architecture

with homepage components such as coin

overview and trending coins. We have

made the changes across all of these

different files. This was quite a

complex review because we've added a lot

of code since the initial PR. So, let's

review Code Rabbit suggestions. We have

a couple of nitpicky comments such as

the search model currently being a

placeholder and it immediately tells us

that it can create an issue to track the

implementation of the search model

feature. This is amazing. We also have

the util where we can maybe shorthand it

in coin gecko actions. Instead of catch,

we can also add a dot then. And this is

a nice one. This is a redundancy where

we use the slice or an empty array

because slice always returns an array

never null or undefined. Okay, this is

also a great way to learn new things and

how they behave. But let's take a look

at more important errors that we have

right here. The first critical one comes

from the coin overview.tsx

where it's suggesting that we add error

handling for the data fetching

operations. This async fetch operation

has no error handling and if the API

request fails the error will propagate

and crash the page render. We need to

wrap it in a try and catch block or rely

on an error boundary at a higher level.

So it suggested a plan where we simply

wrap it in a try and catch and then

return a fail div if it doesn't work. I

believe it's going to suggest the same

thing for the trending coins. This is

great. So we can actually use a prompt

that they suggested to try this out. And

back within the code, I'll just open up

Juny,

paste it in, and then I'll say also do

the same thing for trending coins

because we know that the same issue is

happening there. Now, while it's solving

the issue, we can take a look at the

other issues that we have right here.

One of which is a duplicate ID. Okay,

this is definitely an issue that we have

right here with the trending coins. So,

let's head over into trending coins. And

yeah, it looks like we have a duplicate

ID. The table itself doesn't need to be

within a div. When it comes to the

catch, we don't have to close it right

here, but rather it's enough to only

wrap this part with try and catch. And

we can extract this trending coins at

the top. So, if we do it like that,

trending coins, then redeclare them

right here, we can then use them later

on without being afraid that something

will break. And let's check out the

changes that happened right here within

the coin overview. While this is an

interesting solution, I definitely

prefer wrapping just the call itself

within a try and catch block. So I will

add it right here and end the return

regularly. Of course, we have to extract

the coin declaration above so that we

can actually use it. Perfect. With that

in mind, we just fixed a couple of very

critical issues. So with that, let's

push our changes by running get add dot

get commit-m

fix code rabbit critical issues and get

push. As soon as it recognizes the

changes, we can go ahead and merge our

PR. Perfect. The next lesson will be all

about implementing this candlestick

chart. So let's prepare ourselves for

that by opening our terminal, checking

out to the main branch to pull all the

latest changes from the main branch. And

then we can create and check out to a

new branch by running get checkout-b

feet candlestick

chart.

Perfect. That means that in the next

lesson we can start implementing it.

In this lesson, we'll create a

candlestick chart that shows how a coin

is performing over a specific period of

time. You can check out today's

performance, drag it around, and zoom it

if you need to, or maybe check out how

it performed over the last year.

This is looking amazing. You can even

increase or decrease the range as well

as the date range as well. This is

pretty cool. We'll start by installing

Trading View's lightweight charts. So

you can simply run mpm install--save

lightweight charts. In a matter of

seconds, it's going to be installed and

we can start using it. We can create a

new component within the components

folder and we can call it candlestick

chart.tsx

and run our AFCE. We'll reuse this chart

whenever we need to show some kind of a

market data. But since this is going to

be used on the client side only and has

to be rendered that way, we'll pass

server components such as the coin

overview as its children. So you get the

best of both worlds, keeping the other

data server side rendered and only

rendering the chart on the client side.

Let me show you what I mean by that.

First, I'll head over to our home coin

overview component. Within it, we want

to fetch some additional data alongside

just fetching the coin data details.

We'll use another one of Coin Gecko's

endpoints called the OLC chart. Open,

high, low, close of a coin based on a

particular coin ID.

It'll give us all the data needed to

create a chart. So, we simply need to

follow this endpoint. We can do it right

here in the try block after getting the

regular coin data. So, I'll still call

the fetcher. We'll define the type of

the data we're trying to get. OHLC data

specifically an array of those data

endpoints and then we can go to coins

Bitcoin OLC

and then we can provide an object with

additional options such as the versus

currency. We're going to do everything

in USD. The days can be set to one by

default. Interval can be set to hourly.

And we can also decide which precision

do we want to get. In this case, I'll go

with the full precision. So here we're

making another call and we're getting

back the coin OHLC data. So I'll create

a new variable for it. Let coin OHLC

data like this. And then we can set it

right here by awaiting our fetcher call.

Now keep in mind as before we're calling

these one after another but instead we

can call them in parallel as these two

pieces of data don't depend on one

another. So what we can do instead is

use promise that all. So right here I'll

say const dstructure the data such as

the coin and the coin ohlc data and call

it like this await promise.all at all

and then into it we simply need to pass

the two functions like this. This is

going to be the first one

and then the second one is going to be

this one. That way both of these are

going to be happening at the same time

and only when both are done it's going

to fill in these variables with data.

What we're doing here is declaring them.

So there's no need to declare them

above. So one thing that we can do if we

want to directly use the data is we can

put this return statement directly

within this try block. So if it's

successful go ahead and return this data

immediately

else return the coin overview fallback.

And now the question is how do we use

this candlestick chart as I told you it

has to be rendered on the client but we

want the rest of it to remain server

side rendered. So, inside of the coin

overview, we will call the candlestick

chart. And by the way, if you're

wondering why is it called a candlestick

chart, if you check out the final

version of the application and maybe

zoom in a lot, you'll see that these

seem like candles, but rather they show

you the high and the low price that that

coin has reached during this specific

period of time. For example, here each

candlestick shows one hour and you can

see that during this hour right here,

the lowest price has been here and the

highest has been here. It is red because

it is lower than the previous price

right here. So, we have this chart and

we're going to pass this part as

children to the candlestick chart. I'll

simply pass it right here. That way it's

not going to appear immediately. But

when we pass the data to it such as data

is equal to coin ohc data and we pass

the coin id in this case bitcoin. We can

head over into the candlestick chart and

implement it by giving this div an id of

candlestick chart. Within it we can

render another div that'll render the

chart header. So it'll have a class name

of chart dash header. Within it, we can

render a div with a class name set to

flex-1.

And here we're going to render the

children that we're passing over as

props. So right here we can dstructure

the children as well as the additional

data that we're passing over into the

chart. So that's going to be children,

data, the coin ID, maybe even the height

of the chart that we want to display,

which by default can be set to 360

pixels, and maybe the initial period,

which by default we can set to daily.

And this will be of a type candlestick

chart props. Perfect. So now we can

still see this overview which loads

nicely with the skeleton. But now we'll

also be able to display a clientside

render chart. So we can give this a use

client directive. First I'll start with

creating the JSX for the chart. So still

within the chart header below the

children, I'll render a div that'll have

a class name set to button group. This

one will keep track of different buttons

for the periods that we want to

manipulate our charts to show the data

for. So I'll render a span that'll say

period and we can give it a class name

set to text-sm

margin x of two to give it a bit of

margin on left and right. Font- medium

text-purp.

I found this color to work great as it's

not so much in your face. And then we

actually want to show the buttons. These

buttons are going to look something like

this. Each one is going to be a button.

It'll have a key. For example, this one

will be for 1 hour. And then it'll have

a class name whether it's active or not.

For now, I'll give it just a regular

config button class name. It also has to

have an on click. So on click will later

on have to trigger the period change.

And if we're loading the data for that

specific period, we want to set it to

disabled. So it'll be disabled if we're

currently loading. And that loading will

of course be a new state that we can

create and track right at the top of

this component. So I'll say use state

loading set loading and at the start set

to false. And within the button we can

say something like one hour. There we

go. So now we can see the button for one

hour. And we want to have multiple of

these buttons like one day, one week and

so on. But instead of duplicating it all

here, we can create a constants file.

This is a new file which we can create

in the root of our application inside of

which we'll create all sorts of

different constants that we can reuse

across the application. So I'll create a

new file called constants.ts.

And inside of it, you can export a new

constant called period buttons

like this. We typically use uppercase

letters and an underscore in between to

denote that this will not change and is

a constant. This will be an array where

each button will have a value of

something like daily and a label which

will be just one d to keep it short.

We can then duplicate this and make it

weekly as well. And here we can say 1 W.

And now we could go ahead and add more

of these. Within the constants file, you

also want to add some data for the chart

like the colors, the height, the width,

and so on. Just so we don't have to

write these by hand, I'll provide them

for you in the video kit down below.

It's constants.ds. Just copy it and

paste it right here. You'll see that we

get our period buttons. So they go from

daily all the way to yearly and then

max. And we also have our period config.

So we can track the period. Here we also

have some information for the chart such

as the background color, text, grid, and

all the colors to make it look good with

the theme of our application. Now that

we have created those buttons, we can

simply map over them by creating a new

dynamic block of code and saying period

buttons dom where we get each individual

button from which we can dstructure the

value and the label. And for each one,

we can automatically return the button

like the one I've created right here.

But instead of simply rendering 1 hour

for every single button, it'll have a

key set to the value. So it's unique and

it'll render its label. So now you can

see 1D, 1 week, 1 month, 3 months, 6

months, 1 year, and max. Amazing. We

also want to know which one is currently

active. So to be able to track that, we

can create a new function called handle

period change right here at the top.

Const handle period change is equal to a

callback function

that accepts a new period that you

select when clicking on it of a type

period and it checks if new period is

the same as the current period. In that

case we don't have to do anything. It's

already set. But else we actually want

to update it. And then here we can

update it. We'll do that later on once

we can actually visualize the chart. So

I'll say update period

and that period will of course be

another state that we can keep track of.

So I'll say use state

period set period and at the start set

to the initial period which is daily by

default. And now let's also give it an

active state. For example, by default

daily is selected. So under class names

we can say if period is triple equal to

the value that is selected in that case

we can render the config button active

else we'll render the config button. So

now we can see that one day is selected

and we cannot change it yet but we can

at least try by calling the handle

period change and passing the value that

we want to change to. If you do that and

here if you actually update the period

like set period to be equal to new

period you'll also be able to see that

we can now swap the period even though

this doesn't mean absolutely anything

yet as we can't yet see the chart. So

that is the next part that we have to

implement. Right below all of these

divs, below the final closing div, I'll

render a self-closing div within which

we're going to insert the chart. To be

able to do that, we have to give it a

reference. A ref equal to chart

container ref, which we'll define above

a class name set to the chart, as well

as a style that includes the height. So

let's create this chart container ref

just above. I'll do it at the top of the

component. const chart container ref is

equal to use ref. We can even give it a

type of HTML div element or null if it

doesn't yet exist. And we'll pass in the

null value at the start. Don't forget to

import use ref from React so we can

actually use it. And we'll also need a

couple of other refs to be able to

display the chart properly. First one is

to the DOM element that will host the

chart. But then we have a ref to store

the chart instance across renders. So

I'll create another one called const

chart ref is equal to use ref of a type

i chart API or null and at the start set

to null. This I chart API is coming

directly from the package we installed

i chart API and that's going to be a

lightweight charts. And finally we'll

need a third ref to track the instance

of the candlestick series. So I'll say

const candle series ref is equal to use

ref i series API like this. It's not

uppercased. I made a mistake right here.

It's just regular letters. That way

it'll autoimp import it for you right

here. And IER API also coming from

lightweight charts. Specifically the

type of the chart that is candle stick

like this or null.

So make sure to properly close it,

properly type it. And at the start it's

equal to null. And now we have to

refetch the data for the chart whenever

the period changes. So let's create a

new use state right here that we'll call

OLC

data. That's the data for the chart. And

set that data. The data will be of a

type OLC

data. Specifically, an array of those

data points. And it'll start as the data

that we receive through props or just an

empty array. That way we can initialize

it as the data coming through props. But

then if it changes we can actually

accommodate for those changes.

We can do that by creating a new

function const fetch oc data which is

going to be equal to an asynchronous

function that accepts a selected period

of a type period. And then we can open

up a new try and catch block. And here

we can do something similar to what

we've done when we initially fetched it

right on the homepage or rather that's

going to be within the home coin

overview

where we fetched this data right here.

So we'll simply copy the part where we

initially fetched it and paste it right

here in the try block. So what's

happening here is we first have to get

access to the selected period but

specifically we need to look into our

constants where we have the period

configuration. So we can't simply say 1

day or 1 week. We have to provide both

the days and the interval and the name

of that specific config. So that's why I

created this nice configuration object

from which we can then extract the

proper configuration structure. So we

can say const config is equal to period

config and then into it or from it we

select the right period. Once we have

the configuration we can simply fetch

the data by saying const new data is

equal to await fetcher. Same as before

this time it doesn't have to be bitcoin

rather it's going to be whichever coin

ID we're fetching the details for. So

we're going to make this a template

string. The currency versus is going to

be USD and days. Now it's going to be

dynamic. It'll depend on config. days.

And same thing right here. The interval

will be coming from config.interval.

You can shorten this a bit by

automatically dstructuring the days and

the interval from the config like this.

And then you can just shorten this part.

And if both key and the value are the

same, you can just keep the former. So

it'll look like this. Finally, if the

data changes, we can say set OHLC data

to be equal to new data or if that

doesn't exist to an empty array just so

our app doesn't break. And in the catch

block, I will console.

And say failed to fetch OHLC data and

also render the error. Wonderful. Now

whenever we try to change the period we

can refetch the data. And in this case

we can also start something known as a

transition. This is a new react hook

called use transition that transitions

the state but keeps the UI responsive

during async updates. To do that you can

do it right here. Const is pending. So

the change of the period and then

instead of set pending it gives you a

start transition function where you can

just use transition coming from react

make sure to import it and then right

here in handle period change where we

need to update the period. We can start

the transition before we actually set

the period. So I'll say start

transition.

It's going to be an async callback

function within it. And then I'll set

the period to be equal to new period.

And at the same time, we'll fetch the

data by saying await fetch OHLC data.

And we'll pass in the new period that we

want to fetch the data for. Finally, we

have to create a use effect to take that

data and to actually append it to the

chart. We can do that with, as I said, a

use effect. So I'll open up a new

callback function within it. And as the

dependency array, we'll only take the

height of the chart. So if the height

changes, we can properly reposition it.

Now the way you feed this data into the

chart is you first get the container

which is going to be the chart container

node. So you can say const chart

container ref.curren.

Then if there is no container, we simply

exit out of the use effect. Else we need

to decide whether to show time labels

based on the period. So I'll say const

show show time and then it's going to be

daily. We can also display weekly and we

can do monthly if it includes the period

that we're choosing. And with that we

are ready to create the chart by saying

const chart is equal to create chart

coming from chart API to which we pass

the container where to create it and

then some potential options such as we

can spread the get chart config which

you also have to import and into it pass

the height as well as the show time and

we can also provide the width set to the

container.client client width. So it

takes the full width of the screen. If

you reload now, you should be able to

see something that looks like a

container for a chart, but nothing

within it just yet. So that means that

now we have to add a series, a series of

candlesticks or a series of data points.

So say const series is equal to

chart.add series

candlestick

series like this. and get candlestick

config like this. I'll actually collapse

this a bit more so we can see the full

code in one line. Once we do that, we

have to convert and set the initial data

into the series. This is where it starts

getting exciting. So, type series dot

set data and into it we need to pass the

OHLC data like this. But the format that

data is within is not going to work

right off the bat. We have to make it

work specifically for the chart. So, if

you head over into our utils, like lib

utils, we need to create a special

function that'll make it work for the

chart. I actually prepared a couple of

functions that we'll use throughout the

rest of this course. So, you can find

the complete utils.ts file in the video

kit down below. Just copy it and paste

it here. One of these is going to be the

format price, which I believe we renamed

to format currency. So, make sure to fix

that. And then you'll see that the other

ones include the format percentage,

trending classes, time ago, but more

importantly the convert OHLC data. To be

honest, I created this with an AI agent

and it just makes sure to take the OLC

data that we're getting from Coin Gecko

and it properly formats it into the data

that the chart accepts. So now we can go

here and we can wrap the data with the

convert OHLC data function. Just like

this. And there we go. For the first

time in our application, we are starting

to see some real candlesticks data

chart. The period is not going to change

just yet, but the initial candlestick

chart is right here. So, what else do we

need to do now? Well, you know how if I

reload, it's not going to fit in

immediately. It's going to feel a bit

weird taking the right portion of the

screen. So what we can do is say

chart.time

scale and we can use the fit content

function to make it fit initially in the

whole screen of the chart. Now we can

store this chart instance in ref for

later updates or cleanups by saying

chartref.curren

is equal to the chart we created. And we

can do the same thing with the series.

So candle series ref.curren is equal to

the series we just created. and set up.

Now, this is an interesting thing. We

have to manually handle the observer. Uh

the observer is specifically for

resizing. So, I'll say new resize

observer that takes in the resizing

entries.

And whenever something happens, it's

going to also resize the chart. So, I'll

say if no entries.length

simply return. But if the width of the

container changes, we also have to apply

the change of the width to the chart.

Right now, if I do that, you can notice

that it says the same. This is not good

for a responsive application. So

instead, what we can do is say

chart.apply

options where we pass in the width,

which is going to be equal to entries

zero dot content rect. width. So it's

going to dynamically see the change in

the width. Now we have to use this

observer by saying observer.observe.

And what are we observing the changes

within? Well, the container that keeps

track of the chart. So if I save this

and reload, now if we try to drag and

drop, notice how it takes the full width

of the container even when it switches

to a desktop mode where it actually has

less width than it had here. Wonderful.

Finally, we have to clean everything up

at the end. So I'll say return a

callback function observer.isconnect

chart.

move. So, we're destroying the chart

instance to prevent memory leaks. And we

want to do the same thing with the refs.

Chartre ref.curren

is set to null. As well as candle series

ref, we also set it to null. And

finally, we have to make this chart work

with different periods. To do that we

have to create another use effect but

this time it has to react on the OLC

data that we provide that will be

modified depending on the period that we

click on.

So we want to check if there is no

candle series ref right now that means

the chart hasn't even been initialized

in that case we can't modify the data

but if the chart is there in that case

we can say const converted to seconds is

equal to hlc data do map where we get

each individual item of data and for

each one we return an array where we can

provide all the different data points

that a candlestick needs. First is going

to be math.f floor

of item zero divided by 1,000. The

second one is going to be the open price

of that item, so item one. Then it's

going to be the high price of the item,

item two. Then it's going to be the low

price of that specific candle. And then

it's going to be the close price of the

candle. See, even though this

candlestick chart seems like just a

regular line chart, each one of these

candlesticks contains so many more data

points. Some are necessary for the

color, some for the width and the height

of the candle and so on. So now that we

have all of these data points, I'll say

as OHLC data to make sure that

TypeScript is happy. And once we have

this data, we can say const converted

is equal to convert OHLC data

and pass in converted to seconds. Then

we're going to re-update the candle

series ref by saying candle series

ref.curren dot set data to convert the

data. And we want to update the chart to

refit the content by saying

chartref.curren

question mark. time scale and finally

dot fit content. Same as what we've done

before. Let's properly use this variable

right here. Looks like converted to

seconds is complaining a bit here.

Saying that this argument doesn't work

here. Oh, that's because I have an array

within an array. We only want to have

one array that we're returning right

here. So, map and then map.f floor and

all these things within it. Perfect.

Type script really saved us here. So, if

I reload the page now, you'll see that

it'll look good. But if I change it to 1

week, it'll actually update and give us

more data while at the same time fitting

on the screen. We can also change it to

1 month, 3 months, or 6 months. It's

really cool because you get access to

all of this data within the chart. And

even if you're in a max period, you can

still zoom in and manually get back only

to, for example, the last month and

really explore it in detail. So you can

see that changing the periods actually

works and resets the charts. It is still

very active and you can move it. And

most importantly, if you go to full

screen and reload, you can see that now

this chart actually takes more of the

screen. The only little fix that we'll

make later on is that the height of the

coin or view container including the

chart is the same as the height of the

trending coins. So that way we don't see

this empty space. We'll fix that later

on. But now we can open up our terminal

and run git status to see where we are.

So we have actually modified the coin

overview and the utils as well as added

this new candlestick chart directly on

the new branch. So now that the chart is

done, we are ready to push all of these

changes and see whether we have some

bugs. So I'll run git add dot get

commit-m

implement candle stick chart and get

push. We'll of course have to connect it

to our upstream origin. Press enter. And

now we can open up a PR directly within

our GitHub. Back within our repo, you'll

see that we can compare and open up a

pull request. So let's do just that. And

let's wait for Code Rabbit to come up

with a code review. And there we go. In

just a couple of minutes, we got our

update. There is one minor potential

issue happening in our candlestick

chart. And it says the loading state is

never updated. So we should use is

pending instead. Yep, we created this

use loading before to disable the state

of the button. So definitely the fix is

to just replace this and use is pending

instead. We can make that change in the

code easily by heading over to our

candlestick chart removing the is

loading state right here and instead

using the is pending right here on the

disabled prop of the button. There we

go. One issue fixed. Now in this case we

are adding only height as a dependency

to the use effect but it says that it

uses OLC data and period inside as well.

This means that when OHLC data changes

the chart won't reinitialize. This is

handled by the second use effect. So

this is okay. But when the period

changes show time calculations uses

stale period value. The period

dependency is needed for the time scale

visibility to update correctly. This is

also a good fix. So I'll simply go ahead

and add the period right here. There's

also another major issue in the

candlestick chart saying that there's

inconsistent time conversion between

initial mounts and updates. On initial

mount this convert to HLC data is called

without converting milliseconds to

seconds, but on data updates we convert

milliseconds to seconds before calling

it. So the proposed fix is to also apply

the same conversion in the first use

effect. So let's go ahead and copy this

part. head over into our first use

effect. And before we pass this data, we

can remove these plus and minus signs,

convert it to seconds, and then pass in

the data that is already converted.

Perfect. That's another nice save. And

finally, there is one minor one. It is

in the coin overview saying that we can

remove the redundant await inside of

promise. Yep, this is amazing. The

fetcher function already returns a

promise. So, we no longer have to add a

weight in front of it. So if I head over

to the coin overview, we can just remove

the await right here. And it looks like

there's some kind of a warning right

here saying that avoid constructing JSX

within try and catch. And that instead

we should use an error boundary. This is

coming from ESLint. And we can look into

this later on. But for now, I believe

this is more than fine because either

way we returning some code. So even if

it fails, the component will still

return the data properly. Great. So with

that in mind, we've made our changes.

I'll do get add dot get commit-m

implement fixes suggested by code rabbit

and then run get push.

With that in mind, we are ready to merge

this PR back to main. And then within

the code, we can check out back to the

main branch, which didn't yet have the

chart at this point in time. But now if

we run gitpool to pull the latest

changes, you can see the chart and

everything we just implemented.

Wonderful. In the next lesson, let's

scroll down and implement the categories

part of our application which looks like

this. It'll show us different categories

of cryptocurrencies and tokens and so

on. For example, layer 1 tokens like

Bitcoin, Ethereum and so on. Proof of

work and proof ofstake coins, coins made

in USA, stable coins and so on. So let's

display this table next. To do that, I

will first create a new branch by

running git checkout-b

top categories. So let's dive right into

it.

To build this table of all the different

categories and let me actually expand it

so you can see it a bit better will be

very similar to the approach that we

used for the trending coins. You already

know the flow. fetch the data, create

columns, and then match the styling and

layout using data table. The goal here

is to prove you can transfer the pattern

to a new data set and make it feel

consistent with the rest of the

homepage. Treat this as your chance to

work independently because you're not

just learning new tools, you're

strengthening your muscle memory by

applying what you've already built. So,

let me help you a bit. And then if at

one point you're ready to continue on

your own, that's great. First, you need

to create a new component within the

components folder. It'll also be within

the home folder and you can call it

categories.tsx.

You can use rafce and very easily

imported within our app. That's going to

be right here. So instead of just a text

that says categories, you can now render

the actual categories component. Great.

So back within our application, you

should be able to see a little

categories right here. And don't forget

that you can also wrap it in suspense.

So right here, create a suspense with a

fallback saying something like let's do

a P tag that says loading categories dot

dot dot. And then within it, you render

the categories component. And now the