<aside> 💡 In this chapter, we will use our learnings from Act 1 - Project Setup and Act 2 - Understanding the Elrond API to build a website which serves live data from the Elrond API. Make sure you go through the previous acts before reading this one!
</aside>
Again, make sure that you followed Act 1 - Project Setup step by step in order to continue here
We will delete a few folders/files, but also create new ones. Let’s do it all beforehand. Create and delete files until your folder structure looks like this:
.
├── pages/
│ ├── _app.tsx
│ ├── index.tsx
│ └── nfts.tsx
├── src/
│ ├── components/
│ │ ├── BackgroundLoadingSpinner.tsx
│ │ ├── Card.tsx
│ │ ├── ErrorCard.tsx
│ │ ├── Layout.tsx
│ │ └── LoadingSpinner.tsx
│ ├── hooks/
│ │ ├── useElrondStats.ts
│ │ └── useUserNFTs.ts
│ ├── lib/
│ │ └── useElrondApi.ts
│ └── services/
│ └── number.service.ts
├── styles/
│ └── globals.scss
└── ...
Components are at the heart of modern websites. They are reusable building blocks used in multiple pages of your website. Since they are not the focus of this tutorial, I suggest you just copy them from below and paste them to the respective places:
Services provide helpful functions to support your application. For example, we will have a service that converts big numbers to better readable numbers:
// services/number.service.ts
export const formatNumber = (
num: number,
options: Intl.NumberFormatOptions = {}
) => {
const numberFormatter = new Intl.NumberFormat(undefined, {
notation: 'compact',
maximumFractionDigits: 2,
...options,
})
return numberFormatter.format(num)
}
/*
Usage example
const number = 1100000000
const formattedNumber = formatNumber(number, {
style: 'currency',
currency: 'USD',
currencyDisplay: 'narrowSymbol',
})
console.log(formattedNumber) // $1.10B
*/