Skip to content

Latest commit

 

History

History
153 lines (90 loc) · 6.47 KB

README.md

File metadata and controls

153 lines (90 loc) · 6.47 KB
Raw

Crypto-Portfolio-App

Status Version

Logo

Live Link

Explore the live version of the Crypto-Portfolio App here: Live Link

Crypto-Portfolio Banner

Tech Stack

The app is powered by the latest technologies, ensuring performance, scalability, and a top-notch user experience:

  • Frontend: React.js Material-UI Chart.js
  • Blockchain Interaction: Web3.js Ethers.js
  • Backend: Firebase
  • Deployment: Vercel

Overview

Welcome to Crypto-Portfolio App — your ultimate solution for managing, tracking, and transferring cryptocurrency assets with ease. Whether you're a seasoned crypto enthusiast or just getting started, our app provides an intuitive and feature-rich platform to keep your investments on track.

Key Features

  • Wallet Connection: Securely connect your Metamask wallet address.
  • Watchlist Management: Keep an eye on your favourite tokens with real-time balance updates.
  • Historical Data: Access and visualize historical balances with our interactive chart and date picker.
  • Allowance Checks: Quickly verify token allowances for various intelligent contracts.
  • Token Transfer: Effortlessly transfer tokens to any address with a few clicks.

Visual Experience

Historical Balance Chart

Historical Chart Screenshot

Token Transfer Form

Token Transfer Form

User Side Bar & Transaction history

User Side Bar & Transaction history

Video Demo

Get a live feel of the Crypto-Portfolio App in action! Watch the demo:

Crypto-Portfolio Video Demo

Getting Started

Follow these steps to set up the Crypto-Portfolio App locally:

1. Clone the Repository:

git clone https://github.com/your-username/crypto-portfolio-app.git
cd crypto-portfolio-app

2. Install Dependencies:

npm install

3. Configure Environment Variables:

Create a .env file in the root directory and add your environment variables (e.g. API keys)

4. Run the App:

npm start

Code Structure

Our app is designed with a modular architecture, ensuring maintainability and scalability. Here’s a quick overview of the key components:

  • CryptoContext.js: Manages global state, blockchain interactions, and Firebase operations. This includes handling user data, token history, and real-time updates.
  • Header.js: A consistent navigation bar with currency selection. Features include logo navigation, currency dropdown, and authentication options.
  • CoinTable.js: A dynamic table for cryptocurrencies with search, sort, and pagination. Provides an interactive interface to view and filter cryptocurrency data.
  • SelectButton.js: A customizable, reusable button component for various UI elements like selecting tokens or other options.
  • UserSidebar.js: Displays user-specific information and options when logged in. Includes features like account details and settings.
  • Token.js: Handles token-specific functionalities such as viewing details, transfer operations, and allowance checks.
  • CoinsPage.js: A page that presents detailed information about selected cryptocurrencies, including historical data and current market stats.
  • Banner.js: Contains the app's main visual elements and promotional content, such as featured tokens or market news.
  • AuthModal.js: Provides a modal interface for user authentication and registration.
  • Homepage.js: The landing page of the app, featuring an overview of the key functionalities and a navigation to other sections.
  • TokenPage.js: Dedicated page for managing individual tokens, including balance viewing, transaction history, and transfer functionalities.
  • SelectButton.js: A reusable button component used for selecting tokens or other options, with a customizable style to indicate selection.

Contribution Guidelines

We welcome contributions from developers worldwide! Here’s how you can get involved:

  1. Fork the repository.
  2. Create a new branch for your feature or bug fix.
  3. Submit a pull request with a detailed description of your changes.