⭐Build A Feature Rich Crypto Screener App with React JS + Tailwind CSS

Hi there👋,

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 doing so much work I have created this tutorial where I'm creating a fully featured Crypto Screener application that uses an Crypto APIs provided by CoinGecko.

Here is the Demo Link:
https://crypto-bucks.netlify.app/

For this project I have used these libraries,
▶️ React JS (CRA)
▶️ Tailwind CSS for styling
▶️ React Context API
▶️ React Router
▶️ Recharts to add interactive charts
▶️ CoinGecko Cryptocurrency APIs

First I have created design in Figma, and used some of it's awesome plugins and resources.

Here is the tutorial how I have created this website!

Things that you will learn by building this project,
▶️ 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 componen
▶️ How to add searching and sorting functionalities
▶️ Leverage the INTL API of the browser to use different currency formats

You can use this project and if you want to use it commercially then small credit would be appreciated, just check the license of all icons and other assets before using it commercially.

I will try to improve it's speed and performance.
Feel free to try different designs and animations with it and you can also tag me or share your link in the comments.

Any suggestions are welcomed!

Don't forget to Share your feedback in the comments.

You might also like these website templates:

• A beautiful portfolio template in ReactJS => here
• NFT collection landing page in ReactJS => here

Thanks For Reading😄

Checkout my other article:

How to render 3D model in a React JS application

Feel free to visit my youtube channel:
@CodeBucks

Follow me on Twitter where I share lots of useful resources!
@code_bucks 😉

Comments

[madman]

very nice app well done ! . i am not that expert with coding but if i wanted to change something in the app like add filters to show results of pairs that change percentage in short time frame like 2% in 3m or 5m time frame if you could give me a clue .
and thanks again.

[CodeBucks]

hey, yes you can get the trading pairs, check out this documentation. About the time frame you can check this API endpoint and see how it is updating the data. Check out the timestamps.