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/
- 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.
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.
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.
- 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}`)
})- 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}`)
})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,
}- 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.