Web Dashboard Overview

Web Dashboard Overview

The Merq Web Dashboard is a comprehensive administration panel built as a Single Page Application (SPA) using React. It provides a user-friendly interface for managing all aspects of the Merq platform, from user and project setup to reviewing field submissions and analyzing data.

The dashboard is built with a modern toolchain including Vite for fast development, TypeScript for code quality, and shadcn/ui for a polished and consistent user experience.

Node.js Version

24+

Primary Framework

React 18

Build Tool

Vite

UI Components

shadcn/ui + Tailwind

Core Features & Scope

The web dashboard is the central hub for administrative tasks:

• User & Team Management: Create, update, and manage users, roles, and teams within a workspace.
• Project & Outlet Setup: Configure projects, assign teams, and manage the master list of outlets.
• Data Visualization: Display key metrics and operational data through tables, charts, and maps.
• Server-Side Operations: All data-heavy operations like pagination, sorting, and filtering are handled by the backend to ensure the UI remains fast and responsive.
• Real-Time Data Fetching: Uses TanStack Query to efficiently fetch, cache, and synchronize data with the backend API.
• Form Handling: Employs React Hook Form and Zod for robust and type-safe form validation.
• Map Integration: Utilizes Google Maps to visualize outlet locations, visit routes, and geofencing data.

Key Technical Decisions

The web stack was chosen to deliver a fast, reliable, and developer-friendly experience:

• React: The industry-standard library for building dynamic user interfaces.
• Vite: A next-generation frontend tooling that provides an extremely fast development server and optimized production builds.
• TypeScript: Enforces type safety, reducing bugs and improving code maintainability, especially in a large application.
• shadcn/ui & Tailwind CSS: Provides a set of beautifully designed, accessible, and composable UI components built on top of Tailwind’s utility-first CSS framework. This allows for rapid development of a consistent and professional-looking UI.
• TanStack Query (formerly React Query): The de facto standard for managing server state in React. It handles data fetching, caching, and synchronization automatically, eliminating the need for manual state management with useEffect and useState.
• Jotai: A minimalist and flexible global state management library used for sharing client-side state (like UI toggles or theme settings) across components.
• React Hook Form & Zod: A powerful combination for creating performant and easily maintainable forms with schema-based validation.
• Path Aliases (@/): Used to simplify import paths, making the codebase cleaner and easier to refactor.