Vista Analytics — Business Dashboard MVP

A modern, responsive sales analytics dashboard. Upload a CSV file and get immediately useful revenue, product, category, customer, and transaction insights—without a database or authentication layer.

Features

• CSV upload with drag-and-drop, progress feedback, validation, and clear errors
• Sales analytics API: revenue, order count, products sold, average order value, best-selling product, top products/customers, category and monthly analysis
• Responsive dashboard with KPI cards, line, bar, pie, and area charts
• Latest transactions, top customers, and top products tables
• Data is retained in browser local storage for the current workspace

Tech stack

• Frontend: React, Vite, Tailwind CSS, Axios, Recharts, React Icons
• Backend: Node.js, Express, Multer, csv-parser, CORS, dotenv

Folder structure

business-dashboard/
├── backend/
│   ├── controllers/       # HTTP request handlers
│   ├── middleware/        # Multer configuration
│   ├── routes/            # API route definitions
│   ├── services/          # CSV parsing and analytics business logic
│   ├── utils/             # Shared backend helpers (reserved)
│   ├── uploads/           # Temporary uploads (not committed)
│   └── server.js
├── frontend/
│   └── src/
│       ├── components/    # Reusable UI components
│       ├── layouts/       # Application shell
│       ├── pages/         # Dashboard and upload pages
│       └── services/      # API client
├── .env.example
└── package.json

Installation

Prerequisites: Node.js 18 or later.

npm install
npm run install:all

Create backend/.env from backend/.env.example (or simply use the default port):

PORT=5000

How to run

Start both the frontend and backend together from the project root:

npm run dev

Open http://localhost:5173. The API runs at http://localhost:5000.

Alternatively, run npm run dev --prefix backend and npm run dev --prefix frontend in two terminals.

Sample CSV format

Headers are case-insensitive, but all six fields are required. Price is the unit price; revenue is calculated as Quantity × Price.

Date,Product,Category,Quantity,Price,Customer
2026-01-10,Wireless Mouse,Electronics,2,29.99,Acme Inc
2026-01-22,Office Chair,Furniture,1,249.00,Northstar Co
2026-02-04,Notebook Set,Stationery,5,12.50,Acme Inc

API documentation

POST /api/upload

Uploads and analyzes a CSV file.

• Content type: multipart/form-data
• Form field: file
• Max file size: 10 MB
• Success: 201 Created, including { message, fileName, analytics }
• Errors: 400 for a missing file, 422 for no valid data, and 500 for malformed inputs

Analytics contains summary, topProducts, revenueByProduct, revenueByCategory, monthlyRevenue, topCustomers, and latestTransactions.

GET /api/health

Returns { "status": "ok" } for service health checks.

Future improvements

• Persist uploads and analytics in a database
• Add filters for date, product, and category
• Support multiple currencies, exports, and scheduled reports
• Add authentication and workspace-level access controls
• Add CSV column mapping and richer data-quality reports