Skip to content

An all in one application for tracking everything related to crypto currency and all other info at one place.

Notifications You must be signed in to change notification settings

kaustav202/Cryptosense

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Cryptosense

An all in one application for tracking everything related to crypto currency and all related info at one place. Get general overview of the market, exchange rates, trading values or in-depth details about any specific cryptocurrency, in an interactive dashboard with a great UI.

🔗💻 Vercel    https://cryptosense.vercel.app/


Features

  • Real Time data of specific cryptocurrency trading rates, price caps and daily change ratio.
  • Real Time global metadata of total markets, trade volumes, exchanges and price caps.
  • Line Chart plot of crypto price across given time period providing performance overview in real time.
  • Latest news about any particular cryptocurrency through microsoft bing news integration with the app.
  • Useful statistics, info, history and links to resources for all cryptocurrencies to find out more details.
  • Menu sidebar for navigation across different sections of the applcication at ease.

Tech Stack

  • React js

  • Redux Toolkit

  • React Router

  • Chart js

  • Ant Design

  • Axios


Project Structure

The project is structured following seperation of concerns on each level, broadly comprising of and divided into three main parts. The store is responsible for storing states and data while also providing access globally. The components section contains all the application modules which pertain to the application's UI including both representational and intelligent modules. The services section is for handling communication with 3rd party services, consuming APIs and ensuring the response is stored properly and accessible in a consistent manner.


Front-End Architecture


Cryptosense_Architecture


Services

The following services are created with the help of redux and redux-toolkit for persistence and direct access of dynamic operations and data related to API requests, which allow the endpoints to be passed as objects which can then be destructured and called to get the response data by any component in the application.

   API : coinrankingapi


  • useGetCryptosQuery
    List constaing general data about each cryptocurrencies with limit option to cap the number of crypto currencies fetched.
    getCryptos: builder.query ({
             query: (count) => createRequest(`/coins?limit=${count}`)
        })
  • useGetCryptoDetailsQuery
    Takes the coin id as parameter or query string in the request url, and returns detailed info about that specific cryptocurrency.
    getCryptoDetails:builder.query ({
             query: (coinId) => createRequest(`/coin/${coinId}`)
        })
  • useGetCryptoHistoryQuery
    Object reprenting the time series mapping of any particular cryptocurrency trading price specified by the passed id and a time string.
    getCryptoHistory: builder.query ({
       query: ({ coinId, timeperiod }) => createRequest(`coin/${coinId}/history?timePeriod=${timeperiod}`)
      })

   API : bing-news-search


  • useGetCryptoNewsQuery
    Takes a keyword matched with cryptocurrency name and gets data of latest news aricles related to it, upto the total limit.
 getCryptoNews: builder.query ({
           query: ({newsCategory,count}) => createRequest(`/news/search?q=${newsCategory}&count=${count}`)
      })

Store

The store module in app directory serves as the application's state container and is responsible for storing and maintaining the two services' states. This allows the api services to be managed consistently and predictably.

  • CryptoApi
  • CryptoNewsApi
 reducer: {
            [CryptoApi.reducerPath]: CryptoApi.reducer,
            [CryptoNewsApi.reducerPath]: CryptoNewsApi.reducer,
        }

Additional Details

  • Redux used to store, persist and provide state of api data and services globally.
  • React Router used to render different components and implement routing without navigating to different page.
  • Redux toolkit used to make API calls and create api services to be used in different components.
  • Fully responsive design on all devices also adaptive components based on screen size.
  • Continuos Deployment of master branch and live preview of other branches with vercel.
  • Chart js library line chart component used to dynamically plot crypto currency prices.
  • Fully Single Page Application with internal routing, making it fast and server independent.

About

An all in one application for tracking everything related to crypto currency and all other info at one place.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published