Maintenance Request Management System - Frontend

📌 Project Overview

This is the frontend for the Maintenance Request Management System, built with Next.js and Apollo Client. It provides an interactive UI for submitting and managing maintenance requests.

✨ Features

✅ Create & Update Requests - Users can submit or edit requests.
✅ Real-time Updates - Instant request status updates via GraphQL subscriptions.
✅ Urgency Auto-Escalation - Visual indication when urgency levels increase.
✅ Optimized UI/UX - Built with Material-UI for a smooth experience.

🛠 Tech Stack

• Frontend: Next.js (App Router), React.js, Apollo Client
• UI Library: Material-UI (MUI)
• State Management: Mobx
• GraphQL Communication: Apollo Client

📂 Folder Structure

📺 frontend
├─├─ 📂 app               # Next.js App Router
├─├─ 📂 components        # Reusable Components
├─├─ 📂 configs           # App Config
├─├─ 📂 constants         # Constants App Variable
├─├─ 📂 contexts          # React Context
├─├─ 📂 enums             # Enums App
├─├─ 📂 hooks             # Hooks App
├─├─ 📂 libs              # Libs App
├─├─ 📂 store             # Mobx State Management
├─├─ 📂 utils             # Utility Functions

🚀 Installation & Setup

1️⃣ Clone Repository

git clone https://github.com/rikopernando/maintenance-request-fe.git
cd maintenance-request-fe
npm install

2️⃣ Configure Environment

Create a .env file:

NEXT_PUBLIC_GRAPHQL_HTTP_URL=http://localhost:4000/graphql
NEXT_PUBLIC_GRAPHQL_WS_URL=ws://localhost:4000/graphql

3️⃣ Start Development Server

npm run dev

Frontend runs on http://localhost:3000.

📌 Usage

1. Open http://localhost:3000 in your browser.
2. Submit a new maintenance request.
3. View real-time updates on urgency status.

🎯 Future Improvements

• Improved error handling and validation.
• Role-based access control for admin users.

🏆 Credits

Developed by Riko Pernando as part of the recruitment task.