Table of Contents
This app is build with the existing knowledge of the React basics, and give you further practice working with React context, Chart Js, Firebase, MUI, codebase linting, component testing, Git-Flow workflow, and TypeScript. A user should, at the bare minimum, be able to view all the Top 100 list of Cryptocurrencys based on their market capital , Shows the trending coins over the last 24 hour,Search for a particular coin from the list and Shows a Historical chart of a specfic coin with a detail information on a daily ,monthly and year base and additionaly a user can learn and read on the latest update on the News section. For a specfic user with login credential the user can add a coin to his the watch list and remove the coin from the watch list when ever he wantes.
A few of the frameworks/libraries that were used to build the project are:
- React
- Context API
- Chart Js
- Typescript
- MUI
- Firebase/Google authentication
- Axios
- React Router
- React Testing Library
- EsLint AirBnb and Prettier
To install CRYPTO-TRACKING-APP, follow these steps:
-
npm
npm install npm@latest -g
Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services.
- Clone the repo
git clone https://github.com/Ermiass/crypto-tracking-app
- Install NPM packages
npm install
- Get a free API key from Firebase By Siging up and Enter your API_KEY link in your
.env
file
REACT_APP_FIREBASE_API_KEY = 'ENTER YOUR API KEY';
REACT_APP_FIREBASE_AUTH_DOMAIN = 'ENTER YOUR FIREBASE_AUTH_DOMAIN';
REACT_APP_FIREBASE_PROJECT_ID = 'ENTER YOUR FIREBASE_PROJECT_ID';
REACT_APP_FIREBASE_STORAGE_BUCKET = 'ENTER YOUR FIREBASE_STORAGE_BUCKET';
REACT_APP_FIREBASE_MESSAGING_SENDER_ID = 'ENTER YOUR FIREBASE_MESSAGING_SENDER_ID';
REACT_APP_FIREBASE_APP_ID = 'ENTER YOUR FIREBASE_APP_ID';
- npm start to start the app.
Can be used to track the price of top cryptocurrencies, historical chart and detail information on coins. Additionaly you can get the latest news on cryptocurrencies, cryptomarkets, NFTs and useful teaching videos.
- Display List of TOP 100 cryptocurrencies By Market Capital
- Display List of trending coins over the last 24 hour
- User Can Change the Currency Type Of Any Coin
- USD
- EUR
- Able To Search For particular coin
- Shows a detail Information on a Particular Coin
- Shows a Historical chart of a coin
- News Update on crpocurencies and NFT
- IF User Logged In/Sign Up
- Able to add coins to User watchlist
- Remove coins from User watchlist
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Ermias Mahtemu - emahtemu@alphaworks.tech
Project Link: https://e-crypto-tracking.netlify.app/