React Website Tutorial: Build Feature Rich Crypto Screener App with Tailwind CSS

Overview

I wanted to create one project for all the beginners and intermediate React learners where I could implement some concepts such as state, useEffect, useRef, react-router, Context API etc. After spending some time I have created this tutorial where I'm creating a fully featured Crypto Screener application that uses an Crypto APIs provided by CoinGecko. This application will allow you to search, sort, and view details about various cryptocurrencies, including their charts and data. Before starting this video you can checkout the following demo link👇

Link🔗: Crypto screener application built in ReactJS

What You'll Learn

By watching this video tutorial, you will learn the following:

• How to use Tailwind css in a ReactJS applications.
• How to fetch APIs using fetch.
• How to create beautiful and interactive charts in React JS.
• How to ue Context API to store states globally.
• How to create pagination component.
• How to add searching and sorting functionalities.
• Leverage the INTL API of the browser to use different currency formats.

Key Features of This Crypto Screener Application

• It shows detail regarding almost all the cryptocurrency.
• Checkout the real-time data that comes from an API.
• Unique design.
• Mobile Responsive.
• Functionalities such as search, sort, filter etc.
• You can bookmark any cryptocurrency to check it's price later.
• Trending page which shows currently trending crypto coins.
• You can convert the price in your local currency

Tools and Libraries Used

For this project, you will use the following libraries:

• React JS (CRA)
• Tailwind CSS for styling
• React Context API
• React Router
• Recharts to add interactive charts
• CoinGecko Cryptocurrency APIs

Code Links

You can find the starter code for this project at: Crypto screener application starter code. And, for the final code, there are two links available:

Link-1: Github All code used in the video tutorial 👉 Crypto screener application final code. (Give ⭐ to this repo if you like it)

Link-2: Gumroad: Code with rough figma design, responsive components, error handling with loading screens 👉 responsive crypto screener application final code.

Resources

You can find all the resources used to make this website from the following:

• Fonts from Google fonts.
• Icons from Iconify.
• API from Coingecko.

Time Stamps

The video tutorial has the following time stamps for you to follow along:

• Channel Intro @00:00:00
• Intro + Demo @00:00:10
• Setup @00:08:30
• React-Router Setup @00:18:22
• Creating Layout Component @00:26:36
• Logo Component @00:30:20
• Navigation Component @00:35:10
• Crypto Page @00:45:10
• API Introduction @00:54:15
• What is Context API? @00:57:35
• Filter Component @01:26:26
• Search & Sorting Component @01:29:30
• Pagination Component @02:26:47
• Crypto Details Component @03:13:46
• Chart Component @04:16:42
• Trending Page @05:04:03
• Saved Page @05:27:00