GearGuard is a full-stack maintenance management system built with Next.js and Tailwind CSS. It helps organizations manage equipment, coordinate maintenance teams, and handle repair requests through a role-based workflow.
Many organizations struggle to keep maintenance work organized when equipment data, repair requests, and team assignments are scattered across spreadsheets, chat messages, and email threads.
GearGuard solves this by providing:
- Centralized equipment tracking
- Role-based workflows for Employees and Maintenance Teams
- Kanban request management for corrective maintenance
- Calendar view for preventive maintenance
- Dynamic, interactive UI with real request flow
- Equipment inventory and maintenance team management
- Employee role for creating and tracking requests
- Maintenance team role for scheduling, updating, completing, or scrapping requests
- Drag-and-drop Kanban board for request workflows
- Preventive maintenance calendar planning
- Scrap logic for unusable equipment
- Dashboard cards and charts for real-time status insights
- Frontend: Next.js (App Router), React, Tailwind CSS
- UI: Radix UI, DnD Kit, Recharts, Framer Motion
- Backend: Next.js API routes
- State: Zustand, React Hook Form, Zod
- Data model: In-memory mock store simulating a MongoDB-backed API
Note: The current implementation uses in-memory API routes and mock store data. It is designed as a production-style app that can be extended with MongoDB or another database.
- Employee: create equipment maintenance requests and monitor status
- Maintenance Team: manage ticket flow, schedule repairs, complete work, or scrap broken equipment
app/— Next.js pages, routes, and API endpointscomponents/— reusable UI components and feature widgetslib/— app state, mock data, models, and shared utilitiespublic/— static assetsstyles/— global styling files
- Install dependencies
pnpm install
- Start the development server
pnpm dev
- Open your browser at
http://localhost:3000
pnpm dev— start local development serverpnpm build— build production apppnpm start— serve built apppnpm lint— run ESLint checks
- Real full-stack application using Next.js App Router
- Custom Kanban board with drag-and-drop support
- Role-based UI and request lifecycle management
- Clear maintenance and preventive planning workflows
- Clean component structure with reusable design system elements
- Production-ready architecture that can be extended with a real database
- Add MongoDB integration for persistent storage
- Implement authentication and role-based access control
- Add notifications and activity history
- Support bulk equipment import/export
Built as a maintenance management demo with a focus on usability, workflow design, and enterprise-style functionality.
Thank you for checking out GearGuard. This repository is a strong showcase of end-to-end maintenance workflow design and modern React application architecture.