CryptoBase Web App

A simple application to track the price of your favorite Cryptocurrencies.

About the project

CryptoBase is a website that allows users to search for information about various cryptocurrencies in real time. The website is designed to provide users with accurate and up-to-date information about the price, market cap, trading volume, and other vital metrics of cryptocurrencies.

The website is connected to the Coingecko API, a popular public data source for cryptocurrency information. Using this API, the website provides users with real-time information about the latest cryptocurrency prices and market trends.

Features and Interfaces

1. Landing Page and Market Update

• Seamless landing page with Sign In and /Sign Up buttons for user Login using Firebase Authentication.

  

• List of Top 10 crypto coins based on market capitalization with a search functionality

  

• Witness the most trending crypto coins 📈

  

2. Dashboard Page

• A Sign out button along with the Watchlist section.

  

• Toggle between dark-light using the moon icon, according to your preference

  

3. CryptoCoin Page

• Dedicated page for each coin to display more details

  

• A graphical representation of price updates of the crypto coin in real time

  

Tech stack

Frontend

• React JS
• Tailwind CSS

Backend

• Firebase ( Auth )
• Firestore Database

Instructions to run Locally

1. Clone the project
   • git clone https://github.com/Mohith234/CryptoBase-Web.git
2. Navigate to the project directory
   • cd CryptoBase-Web/
3. Install node dependencies
   • npm install
4. Replace Firebase API keys with your configurations
   • Get your keys from here
5. Create a .env file and set the following variables

  REACT_APP_FIREBASE_API_KEY
  REACT_APP_FIREBASE_STORAGE_BUCKET
  REACT_APP_FIREBASE_PROJECT_ID
  REACT_APP_FIREBASE_AUTH_DOMAIN
  REACT_APP_FIREBASE_MESSAGING_SENDER
  REACT_APP_FIREBASE_APP_ID

6. Start the app
   • npm run start
7. The app is now running 🥳

Useful Links

• Project Demo Web version
• GitHub Link (Feel free to Star ⭐ the repo)

Need help?

Feel free to contact me on LinkedIn