DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for ⭐Build A Feature Rich Crypto Screener App with React JS + Tailwind CSS
CodeBucks
CodeBucks

Posted on

⭐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 πŸ˜‰

Top comments (0)

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.