Modern Bitcoin tracking dashboard with beautiful interactive charts and real-time data
π¨ 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
- 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
# Clone the project
git clone <repository-url>
cd BitFlow-Dashboard
# Install dependencies
npm install
# 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
# Development mode
npm run dev
# π http://localhost:3000
# Production build
npm run build
npm run start
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
# Start the entire environment with one command
npm run docker:up
# Stop
npm run docker:down
# Rebuild images
npm run docker:build
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
Method | Endpoint | Description |
---|---|---|
GET |
/api/price |
π° Current Bitcoin price |
GET |
/api/historical |
π Historical data by periods |
GET |
/api/health |
β€οΈ System health check |
# 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
# Start entire environment with one command
npm run docker:up
# Stop
npm run docker:down
# Rebuild images
npm run docker:build
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
- Node.js 18+
- PostgreSQL 14+
- npm or yarn
- Docker (recommended)
# 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
- β 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
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes (
git commit -m 'Add amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
This project is licensed under the GNU AGPL v3. See LICENSE file for details.
Made with β€οΈ for the crypto community