🤖 Criptobot Dashboard

A web dashboard for monitoring and managing a cryptocurrency trading bot.

Track operations, balances, strategies and performance — all in one place.

---

📖 Overview

Criptobot Dashboard is the frontend of a cryptocurrency trading bot project. It provides a clean, data-driven interface for:

• 📊 Monitoring the bot's performance and portfolio balance
• 📈 Visualizing trading history and recent operations
• 🧠 Managing trading strategies
• ⚙️ Configuring bot settings from a single dashboard

⚠️ Current status: early development. This repository contains the application skeleton with the planned component structure. The listed features are planned and will be implemented incrementally.

✨ Planned Features

🖥️ Dashboard

Feature	Description
Stats cards	Key metrics at a glance — total PnL, win rate, active trades, balance
Performance chart	Equity curve and profit/loss over time
Recent trades	Latest executed operations, always up to date
Bot toggle	Start / stop the bot directly from the dashboard

💰 Trading

Feature	Description
Currency balance	Per-asset balance overview
Trade history	Full, filterable list of past operations

🛠️ Management

Feature	Description
Strategies	View and configure trading strategies
Settings	Bot configuration — API keys, risk parameters, notifications

🧱 Tech Stack

Layer	Technology
Framework	React (function components + hooks)
Build tool	Vite
Language	JavaScript (JSX)
Styling	CSS Modules + CSS variables
Package manager	npm

🚀 Getting Started

Prerequisites

• Node.js 18+ (or newer)
• npm (shipped with Node.js)

Installation & Development

# 1. Clone the repository
git clone https://github.com/Fellipeg7/frontend.git
cd frontend

# 2. Install dependencies
npm install

# 3. Start the development server
npm run dev

The dev server runs at http://localhost:5173 by default.

Production Build

npm run build    # outputs the production bundle to dist/
npm run preview  # preview the production build locally

📁 Project Structure

frontend/
├── Front-end/
│   ├── public/                 # Static assets (favicon, etc.)
│   ├── src/
│   │   ├── components/
│   │   │   ├── dashboard/      # Dashboard-specific widgets
│   │   │   │   ├── BotToggle.jsx
│   │   │   │   ├── CurrencyBalance.jsx
│   │   │   │   ├── PerformaceChart.jsx
│   │   │   │   ├── RecentTrades.jsx
│   │   │   │   └── StatsCard.jsx
│   │   │   ├── layout/         # App shell (header, sidebar, main layout)
│   │   │   │   ├── Header.jsx
│   │   │   │   ├── MainLayout.jsx
│   │   │   │   └── Sidebar.jsx
│   │   │   └── ui/             # Reusable UI primitives
│   │   │       ├── Button.jsx
│   │   │       ├── Card.jsx
│   │   │       └── Table.jsx
│   │   ├── pages/              # Route-level pages
│   │   │   ├── Dashboard.jsx
│   │   │   ├── History.jsx
│   │   │   ├── Settings.jsx
│   │   │   └── Strategies.jsx
│   │   ├── data/
│   │   │   └── mockData.js     # Sample data for development
│   │   ├── styles/
│   │   │   ├── global.css      # Global styles & resets
│   │   │   └── variables.css   # Design tokens (CSS variables)
│   │   ├── App.jsx             # Root component
│   │   └── main.jsx            # Entry point
│   ├── index.html
│   ├── package.json
│   └── vite.config.js
└── README.md

🗺️ Roadmap

• Wire dashboard components to the mock data
• Integrate with the bot's backend API
• Real-time updates (WebSocket / SSE)
• Authentication and user accounts
• Responsive / mobile layout
• Unit & e2e tests with CI

🤝 Contributing

This project is in its early stages, but contributions are welcome! Feel free to open an issue or submit a pull request.

---

Built with ❤️ by Fellipeg7