A modern, open-source analytics dashboard built with React, TypeScript, and Tailwind CSS. Visualize your business data through an intuitive interface with overview metrics, sales tracking, product analytics, event monitoring, and report generation.
- Overview — Key KPIs, revenue trends, and summary metrics at a glance
- Sales — Sales breakdown, performance tracking, and revenue analysis
- Products — Product-level analytics and inventory insights
- Events — Event timeline and activity monitoring
- Reports — Exportable reports and data summaries
- Responsive sidebar — Collapsible navigation that adapts to your workflow
- Dark / light theme — System-aware theming powered by
next-themes
| Layer | Technology |
|---|---|
| Framework | React 19 |
| Language | TypeScript 5.6 |
| Bundler | Vite 7 |
| Styling | Tailwind CSS 4 |
| UI Components | Radix UI + shadcn/ui |
| Charts | Recharts |
| Animations | Framer Motion |
| Forms | React Hook Form + Zod |
| Routing | Wouter |
| Data Fetching | TanStack Query |
- Node.js 20+
- npm 10+
git clone https://github.com/YOUR_USERNAME/Analytic-Vision.git
cd Analytic-Vision
npm installnpm run devOpen http://localhost:5000 in your browser.
npm run buildOutput is written to dist/public/.
npm run checkAnalytic-Vision/
├── client/
│ └── src/
│ ├── components/
│ │ ├── dashboard/ # Tab-level dashboard components
│ │ └── ui/ # Reusable shadcn/ui primitives
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility helpers
│ ├── pages/ # Route-level page components
│ ├── App.tsx
│ └── main.tsx
├── .github/
│ └── workflows/
│ └── ci.yml # CI pipeline
├── vite.config.ts
├── tsconfig.json
└── package.json
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a feature branch:
git checkout -b feat/your-feature - Commit your changes:
git commit -m "feat: add your feature" - Push to your fork:
git push origin feat/your-feature - Open a Pull Request
Please make sure npm run check passes before submitting a PR.
This project is licensed under the MIT License.