Analytica

Analytica is a true multi-page Next.js app — not a single-page React app with tab switching. Each dashboard section (Overview, Revenue, Users, Reports, Settings) is a dedicated route under a shared persistent layout. The sidebar renders once and persists across navigation while page content swaps via the App Router, giving the demo the feel of a production SaaS product rather than a component showcase.

All data visualisations are powered by Recharts, configured with custom tooltip components, gradient fills, and responsive containers that adapt from full-width desktop panels to compact mobile cards. The revenue chart uses a ComposedChart combining Area and Bar layers to display both absolute values and month-over-month trends in a single view — a pattern common in real analytics tools that required careful dual-axis alignment to implement without visual clutter.

Dark and light mode are implemented via a CSS class toggle on the root element, with all colour values — including chart fills, tooltip backgrounds, and sidebar hover states — defined as CSS custom properties. This means every colour switches simultaneously on mode change without any flash-of-unstyled-content, and the selected theme persists across sessions via localStorage.