Food AI Dashboard

A React + Vite analytics dashboard with an Express + SQLite backend for exploring food sales data, tracking KPIs, generating AI-style insights, and answering natural-language business questions.

Repository Summary

• Frontend: React 19 + Vite
• Backend: Express + SQLite
• Data: bundled demo SQLite database plus CSV seed files
• Use case: KPI tracking, operational signals, AI-style analysis, forecasting, and drill-down analytics

What It Does

• Shows core KPIs:
  • Total Sales
  • Orders
  • Average Order Value
• Shows dashboard status context for:
  • Backend availability
  • Active filters
  • Last AI request context
• Supports dashboard filters for:
  • Time period
  • Product
  • Channel
  • Customer
  • Warehouse
• Includes AI-style features:
  • Ask AI question box
  • On-demand analytics overview charts
  • Root cause analysis
  • Sales forecasting
  • Auto insight cards
  • Side-by-side comparisons
  • Lightweight AI memory/context awareness
  • Forecast and chart panels that appear only when requested

Current UI

• Editorial dashboard-style landing section with system status and context summary
• Control surface for time, product, channel, customer, and warehouse filtering
• KPI cards with animated value transitions
• AI workspace with prompt suggestions and structured response panels
• Signal area for automated insight cards and anomaly alerts
• Forecast and chart views that appear only when requested
• Responsive layout with extra handling for long numbers and text overflow

Tech Stack

• Frontend:
  • React 19
  • Vite
  • Chart.js
  • react-chartjs-2
• Backend:
  • Express
  • SQLite3

Project Structure

food-ai-dashboard/
|- src/                 # React app
|- public/              # Static assets
|- backend/             # Express + SQLite backend
|  |- server.js
|  |- database.js
|  |- data/
|  `- database.db
|- package.json         # Frontend scripts
`- README.md

Getting Started

1. Install frontend dependencies

npm install

2. Install backend dependencies

cd backend
npm install
cd ..

3. Optional environment files

Root .env values for the Vite app:

VITE_API_BASE_URL=

Backend backend/.env values:

PORT=5000
CORS_ORIGIN=http://localhost:5173

Leave VITE_API_BASE_URL empty for local development with the built-in Vite proxy.

4. Start the backend

From the project root:

npm run server

The backend runs on:

http://localhost:5000

5. Start the frontend

npm run dev

The frontend runs on Vite's local dev server, typically:

http://localhost:5173

6. Start both together

npm run dev:all

Verification Commands

From the project root:

npm run lint
npm run build
npm run smoke

From the backend folder:

npm run test:api
npm run test:dates

Available Frontend Commands

npm run dev
npm run dev:all
npm run dev:client
npm run server
npm run smoke
npm run build
npm run preview
npm run lint

Backend Commands

From the project root:

npm run backend:install
npm run smoke
npm run seed:sales
npm run seed:enriched

Or from the backend folder:

npm install
npm start
npm run smoke
npm run test:api
npm run test:dates
npm run seed:sales
npm run seed:enriched
npm run reset:demo-data

AI Features

The Ask AI section can answer questions such as:

• Give me an analytics overview
• What is the average order value?
• Compare average order value by channel
• Compare channel performance
• Compare customer performance
• Compare warehouse performance
• Which product sells the most?
• Which product sells the least?
• Why did sales drop?
• What is tomorrow's sales forecast?
• Show sales trend
• Show warehouse distribution
• Show customer distribution

The backend uses rule-based intent detection plus filtered SQL/data aggregation to return structured responses for:

• summaries
• trends
• forecasts
• root cause analysis
• comparisons
• chart requests

Notes

• Some AI answers depend on the quality and shape of the SQLite data already loaded into the backend.
• backend/database.db is included so the dashboard works immediately after cloning.
• backend/database.db is treated as bundled demo data for this repo. If you want to rebuild it from the CSV sources, run npm run reset:demo-data --prefix backend.
• The backend loads backend/.env quietly, so local startup stays clean unless there is a real error.
• CORS is open by default for local development. Set CORS_ORIGIN in backend/.env to a comma-separated allowlist when you want stricter browser access.
• Large generated folders like node_modules and local .env files are ignored for GitHub uploads.
• The backend currently uses lightweight in-memory AI memory for context awareness, so memory resets when the server restarts.
• If you change backend logic, restart node backend/server.js to pick up the update.
• A lightweight health endpoint is available at http://localhost:5000/api/health.
• Run npm run smoke while the backend is running to smoke-test the key API routes before a demo or submission.
• Run npm run test:api --prefix backend for a small end-to-end API regression check.
• Run npm run test:dates --prefix backend to verify the relative date windows used by KPI and insight filters.

Before Uploading To GitHub

• This folder is not currently initialized as a Git repository, so if you plan to push from the terminal you will need to run git init first.
• Do not upload node_modules, dist, .env, or backend/.env. The current .gitignore already covers those.
• If you upload through the GitHub website instead of using git, make sure you exclude node_modules and dist manually.
• Keeping backend/database.db in the repository is intentional here because it acts as bundled demo data.

Suggested First Git Commands

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin <your-repo-url>
git push -u origin main

Current Highlights

• KPI cards with count-up animation
• Warm editorial dashboard theme with status and context framing
• Forecast panel with 7-day moving-average projection
• Auto insight cards for drop, growth, and warehouse signals
• Clear filters button to return to the combined base view
• Smarter Ask AI responses with better intent handling
• On-demand analytics canvas and forecast cards
• Frontend error boundary for safer demos
• UI layout hardening for long numbers and text visibility