A modern crypto portfolio tracker built with React.js and Tailwind CSS.
This project was developed as Task 5 of the Future Interns Program, demonstrating skills in frontend development, API integration, and responsive UI design.
- 🎨 Dark & Trendy Dashboard with smooth hover effects
- 🖥 Sidebar + Main Layout for easy navigation
- 📊 Portfolio Overview with total value and P/L calculation
- 🪙 Add / Edit / Delete Assets
- 📈 Live Prices Integration (CoinGecko API-ready)
- 🔔 Price Alerts Feature
- 🧠 Gemini AI Integration Ready for future insights
- 📱 Responsive & User-Friendly UI
- Node.js (v14 or higher)
- npm or yarn
-
Clone the repository:
git clone https://github.com/0xsherlocks/FUTURE_BC_05.git cd FUTURE_BC_05 -
Install dependencies:
npm install
-
Start the development server:
npm start
-
Open http://localhost:3000 in your browser.
| Command | Description |
|---|---|
npm start |
Runs the app in development mode |
npm run build |
Builds the app for production |
npm test |
Runs the test suite |
FUTURE_BC_05/
│
├── src/
│ ├── Components/
│ │ └── UI/ # Reusable UI components
│ ├── App.js # Main app with routing
│ ├── App.css # App styles
│ └── index.js # Entry point
│
├── public/
│ └── index.html # HTML template
│
├── tailwind.config.js # Tailwind CSS configuration
├── package.json # Dependencies and scripts
└── README.md
- React.js – Frontend framework
- Tailwind CSS – Styling and responsive design
- React Router – Multi-page navigation
- React Icons – Icon set for UI
- Recharts – Data visualization and charts
- TSParticles – Particle effects for background
- CoinGecko API (Future) – Live crypto prices
- Gemini API (Future) – AI-powered insights
Try it out: CryptoHub
Gulshan Raj
If you find this project helpful, please give it a star!
