Analytics Dashboard 🚀📊

Overview ✨

Interactive Data Dashboard is a full‑stack project that demonstrates my ability to integrate multiple APIs into a modern web application. The dashboard visualizes real‑time data from various sources, including:

• Bitcoin Prices: 30‑day historical prices sourced from CoinGecko 💰
• USD to EUR Exchange Rates: 30‑day historical rates sourced from Frankfurter 💱
• Melbourne Weather Data: Hourly relative humidity, temperature, and wind speed sourced from Open‑Meteo ☀️🌧️🌬️

This project not only features sleek visualizations but also highlights robust API integration, data processing, and responsive design.

Features 🔥

• Full‑Stack API Integration:
  Connects to multiple public APIs to fetch dynamic data in real‑time. 🔌
• Modern Frontend:
  Built with React, TypeScript, Vite, Tailwind CSS, and shadcn‑ui for a polished, responsive UI. 💻
• Interactive Charts:
  Visualizations powered by Recharts and react‑query provide smooth updates and user interactions. 📈
• Responsive Design:
  The dashboard adapts perfectly to any screen size, ensuring optimal viewing on all devices. 📱💻
• Clean Architecture:
  A clear separation between backend and frontend, demonstrating strong full‑stack development skills. 🛠️

💡 Pro Tip: If you fork this project, please give it a star in the original repository!

Getting Started 🚀

Prerequisites

• Backend:

  • Python 3.9 or higher
  • pip (Python package installer)

• Frontend:

  • Node.js (v14+ recommended)
  • npm or yarn

Installation

Backend Setup

1. Clone the Repository:

   git clone https://github.com/your-username/interactive-data-dashboard.git
   cd interactive-data-dashboard/backend
   

2. Create a Virtual Environment & Activate It:

   python3 -m venv venv
   source venv/bin/activate  # On Windows: venv\\Scripts\\activate
   

3. Install Dependencies:

   pip install -r requirements.txt
   

4. Run the Flask Application:

   python app.py
   

   The backend will be available at http://localhost:5000.

Frontend Setup

1. Navigate to the Frontend Directory:

   cd ../frontend
   

2. Install Dependencies:

   npm install
   # or if you use yarn:
   yarn install
   

3. Run the Development Server:

   npm run dev
   # or:
   yarn dev
   

   The frontend will be available at http://localhost:8080.

Tech Stack 🛠️

Backend:

• Python
• Flask

Frontend:

• React
• Vite
• TypeScript
• Tailwind CSS
• shadcn-ui
• Recharts
• react-query

External APIs 📡

• CoinGecko API: Provides cryptocurrency market data. 💹
• Frankfurter API: Provides historical exchange rate data (USD → EUR). 💱
• Open-Meteo API: Provides weather data for Melbourne (humidity, temperature, wind speed). 🌦️

Contributing 🤝

Contributions are welcome! If you'd like to improve the project or add new features, please open an issue or submit a pull request on GitHub.

License 📜

This project is licensed under the MIT License.

Contact 📫

Discord: JoshMann15

Email: JoshMann15Dev@gmail.com

GitHub: JoshMann15

✨ Built with passion and designed to showcase my full-stack development skills with APIs and modern web technologies. ✨