ProManager - Design Project Management Dashboard

A high-quality, scalable, and production-ready dashboard application built with Nuxt 3, TypeScript, and Tailwind CSS.

Architecture

This project follows an enterprise-grade Nuxt 3 structure:

• app.vue: Main entry point.
• components/: Modular and reusable UI components.
  • layout/: Sidebar, Header, and layout-specific components.
  • ui/: Base UI elements (Buttons, Inputs, Badges).
• pages/: File-based routing for Dashboard, Projects, Tasks, etc.
• layouts/: Shared page structures.
• stores/: State management using Pinia.
• types/: Centralized TypeScript interfaces.
• utils/: Shared helper functions.
• constants/: Mock data and application constants.
• assets/: Global styles and static assets.

Tech Stack

• Framework: Nuxt 3
• Styling: Tailwind CSS 4
• Icons: Lucide Vue Next
• State Management: Pinia
• Utilities: VueUse
• Language: TypeScript

Features

• Responsive Sidebar: Collapsible navigation with active state tracking.
• Dashboard Overview: Key metrics, recent projects, and team activity.
• Project Management: Grid and list views for project tracking with progress indicators.
• Task Tracking: Status-based task filtering and priority management.
• Modern UI: Clean visual hierarchy, premium feel, and smooth transitions.
• Production Ready: Typed models, scalable folder structure, and optimized performance.

Setup

1. Install dependencies:

   npm install

2. Run development server:

   npm run dev

3. Build for production:

   npm run build

Design Reference

Based on the "Design Project Management Dashboard" Figma design.

• Layout: Sidebar-driven with top header.
• Color Palette: Indigo primary, slate neutrals, emerald/rose/amber accents.
• Typography: Inter (Sans-serif).