Skip to content

authorless/BitFlow-Dashboard

Repository files navigation

πŸ“ˆ BitFlow Dashboard

Modern Bitcoin tracking dashboard with beautiful interactive charts and real-time data

Bitcoin Nuxt.js TypeScript Tailwind CSS

✨ Features

🎨 Dynamic Charts - colors change based on trend (green for growth, red for decline)
πŸ“Š Interactive Tooltips - detailed information with percentage changes
⚑ Real-time Updates - data updates automatically
🎯 Trend Indicator - visual price direction indicator
πŸ“± Responsive Design - works on all devices
πŸš€ Fast Animations - smooth transitions and modern UI

πŸ›  Tech Stack

  • Frontend: Nuxt 3, Vue 3, TypeScript, Tailwind CSS
  • Charts: Chart.js + Vue-ChartJS with custom gradients
  • Backend: Prisma ORM + PostgreSQL
  • API: Binance API for real-time price data
  • Styling: Modern dark theme with gradients

πŸš€ Quick Start

1. πŸ“¦ Installation

# Clone the project
git clone <repository-url>
cd BitFlow-Dashboard

# Install dependencies
npm install

2. πŸ—ƒοΈ Database Setup

# Copy environment settings
cp .env.example .env

# Edit .env file with your PostgreSQL credentials
DATABASE_URL="postgresql://postgres:postgres@localhost:5432/bitcoin_db"

# Apply migrations
npm run prisma:migrate

# Generate Prisma client
npm run prisma:generate

3. 🎯 Launch

# Development mode
npm run dev
# 🌐 http://localhost:3000

# Production build
npm run build
npm run start

🐳 Automatic Docker Build with GitHub Actions

The project automatically builds and publishes a Docker image on every push to the main branch using GitHub Actions.

The Docker image is published to DockerHub with the tag:

<your_dockerhub>/bitflow-dashboard:latest

You need to set up the secrets DOCKERHUB_USERNAME and DOCKERHUB_TOKEN in your repository settings.

Workflow file: .github/workflows/docker.yml

🐳 Docker (Recommended)

# Start the entire environment with one command
npm run docker:up

# Stop
npm run docker:down

# Rebuild images
npm run docker:build

πŸ“ Project Structure

BitFlow-Dashboard/
β”œβ”€β”€ components/
β”‚   └── BitcoinChart.vue       # Interactive chart with animations
β”œβ”€β”€ pages/
β”‚   └── index.vue              # Main dashboard page
β”œβ”€β”€ server/
β”‚   β”œβ”€β”€ api/                   # REST API endpoints
β”‚   β”‚   β”œβ”€β”€ price.ts           # Current Bitcoin price
β”‚   β”‚   β”œβ”€β”€ historical.ts      # Historical data by periods
β”‚   β”‚   └── health.ts          # System health check
β”‚   β”œβ”€β”€ db/
β”‚   β”‚   └── prisma.ts          # PostgreSQL connection
β”‚   └── services/
β”‚       β”œβ”€β”€ binance.ts         # Binance API integration
β”‚       β”œβ”€β”€ database.ts        # Database operations
β”‚       └── historical.ts      # Historical data logic
β”œβ”€β”€ plugins/
β”‚   β”œβ”€β”€ prisma.server.ts       # Prisma client
β”‚   └── chartjs.client.ts      # Chart.js configuration
β”œβ”€β”€ prisma/
β”‚   └── schema.prisma          # Database schema
└── docker-compose.yml         # Docker environment

πŸ”Œ API Endpoints

Method Endpoint Description
GET /api/price πŸ’° Current Bitcoin price
GET /api/historical πŸ“Š Historical data by periods
GET /api/health ❀️ System health check

Request Examples:

# Current price
curl http://localhost:3000/api/price

# Historical data for one day
curl http://localhost:3000/api/historical?period=day

# Health check
curl http://localhost:3000/api/health

🐳 Docker (Recommended)

# Start entire environment with one command
npm run docker:up

# Stop
npm run docker:down

# Rebuild images
npm run docker:build

βš™οΈ Available Scripts

npm run dev              # πŸš€ Start development
npm run build            # πŸ“¦ Build for production
npm run start            # 🎯 Start production server
npm run prisma:studio    # πŸ” Open Prisma Studio
npm run prisma:migrate   # πŸ—ƒοΈ Create database migration
npm run prisma:generate  # ⚑ Generate Prisma client

πŸ“‹ Requirements

  • Node.js 18+
  • PostgreSQL 14+
  • npm or yarn
  • Docker (recommended)

πŸ”§ Environment Variables

# Database
DATABASE_URL="postgresql://postgres:postgres@db:5432/bitcoin_db"
POSTGRES_HOST=db
POSTGRES_PORT=5432
POSTGRES_DB=bitcoin_db
POSTGRES_USER=postgres
POSTGRES_PASSWORD=postgres

# API keys (if needed)
# BINANCE_API_KEY=your_api_key
# BINANCE_SECRET_KEY=your_secret_key

🎨 What's New in Design

  • βœ… Dynamic Colors - chart changes color based on trend
  • βœ… Modern Gradients - beautiful gradients for chart fills
  • βœ… Smooth Animations - fast and responsive transitions (800ms)
  • βœ… Enhanced Tooltips - show percentage changes
  • βœ… Trend Indicator - visual price direction indicator
  • βœ… Responsive Design - looks great on any screen size

🀝 Contributing

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

πŸ“„ License

This project is licensed under the GNU AGPL v3. See LICENSE file for details.


Made with ❀️ for the crypto community

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •