Project Dashboard

A project management dashboard built with Next.js and Strapi for tracking delivery across brands, properties, and teams with live updates and flexible views.

Preview

Features

• Dual project views with a sortable table and Gantt timeline
• Role-aware dashboard experience for managers and team members
• Multi-brand and multi-property organization across a shared workspace
• Real-time project and notification updates over Socket.IO
• Rich project detail workflows including team assignment, notes, and external links
• User management flows for adding people, avatars, and roles
• Fast filtering by property, brand, team, status, and date range
• Responsive UI with light and dark theme support

Tech Stack

Frontend

• Next.js for SSR, routing, and API endpoints
• React for interactive UI
• Tailwind CSS for styling
• Headless UI and Heroicons for accessible interface primitives
• qs for query serialization

Data and Realtime

• Strapi as the headless CMS and auth-backed content layer
• Axios for API communication
• Socket.IO for live dashboard updates
• cookies-next for auth cookie handling

Tooling and Delivery

• Docker and Docker Compose for containerized deployment
• GitHub Actions for image build and release automation
• ESLint for code quality checks

Local Setup

Requirements

• Node.js 16+
• A running Strapi backend
• Docker, if you want to run the container image locally

Install

git clone https://github.com/yourusername/project-dashboard.git
cd project-dashboard
npm install
cp .env.example .env
npm run dev

Open http://localhost:3000 after the dev server starts.

Environment

API_URL=http://localhost:1337
IMAGES_URL=http://localhost:1337
SITE_URL=http://localhost:3000
VERSION=local

Variable	Purpose
API_URL	Base URL for the Strapi API
IMAGES_URL	Base URL for media and socket connections
SITE_URL	Base URL for frontend links and redirects
VERSION	Version label shown in the UI

Project Shape

• pages/ contains the Next.js routes and API handlers
• components/ contains dashboard, modal, auth, and management UI
• public/screenshots/ contains README preview assets
• styles/ contains global styling
• docker-compose.yml and Dockerfile cover container deployment

Scripts

npm run dev
npm run build
npm run start
npm run lint