A responsive web activity dashboard built with Next.js, TailwindCSS, and React. Track visits, browser usage, searches, and recent activity, with optional Telegram bot integration for quick API tests and reminders.

• React + Next.js 13 – Modern server & client-side rendering.
• Config-driven – Data is fetched dynamically from /api/dashboard.
• Dark mode – GA-style light/dark theme toggle.
• Charts & stats – Visits, browser usage, and searches over time.
• Activity feed & table – Full history of visited websites with timestamp and browser.
• Responsive & accessible – Works on both desktop and mobile.
• Telegram integration (optional) – API testing and reminders.

git clone <repo-url>
cd web-dashboard
npm install
npm run dev

Run Next.js on localhost:3001.

Open your browser and navigate to / for the home page.

Explore Analytics, Reports, and Settings.

Use the dark mode toggle and available date range selection in the header.

Key npm packages used in this project:

• next – React framework for SSR/ISR and routing
• react / react-dom – UI library
• tailwindcss – utility‑first CSS framework
• recharts – charting library for React components

web-dashboard/
├── LICENSE
├── README.md
├── app
│   ├── page.tsx           # Home
│   ├── analytics/page.tsx
│   ├── reports/page.tsx
│   ├── settings/page.tsx
│   ├── globals.css
│   └── layout.tsx
├── components
│   ├── Layout
│   │   ├── Header.tsx
│   │   ├── Footer.tsx
│   │   └── Sidebar.tsx
│   ├── Dashboard
│   │   ├── StatCard.tsx
│   │   ├── ChartCard.tsx
│   │   ├── ActivityFeed.tsx
│   │   └── ActivityTable.tsx
├── utils
│   └── analytics.ts       # groupByDayAndBrowser
├── pages
│   └── api
│       └── dashboard.ts
├── public
├── docs
│   └── screenshots        # Screenshot placeholder
└── package.json

GET /api/dashboard – returns the dashboard data:

{
  "visits": 12,
  "errors": 0,
  "searches": [],
  "browsers": [
    { "name": "Chrome", "count": 5 },
    { "name": "Firefox", "count": 3 }
  ],
  "activity": [
    { "timestamp": 1766497702790, "url": "https://example.com", "browser": "Chrome" }
  ]
}

• visits – total number of visits
• errors – detected errors
• browsers – browser usage stats
• activity – list of visits with timestamp, URL, and browser

• Home – main stats: visits, errors, browsers, searches.
• Analytics – interactive charts: visits over time, browser usage.
• Reports – feed and table of visited websites, sortable and filterable.
• Settings – tracking options, data retention, feature toggles.

• Dark mode toggle – in the top-right header, persisted on the client.
• Date range picker – filters charts and activity feed.
• Skeleton loaders – animated placeholders while data is being fetched.
• Micro animations – hover effects on links/cards, chart fade‑ins.
• Responsive sidebar – always visible on desktop, collapsible on mobile.

• No sensitive data stored on the client.
• API filters out localhost and extension URLs.
• Logs kept in-memory on the server, for demo/analytics purposes only.

Can be extended with a Telegram bot for:

• Quick API testing
• Reminders
• Request snippets

It uses the same endpoints as the dashboard.

MIT License © 2025 Gabriele A. Tambellini
See LICENSE for details.