Helpdesk Prototype

This is the frontend of a Helpdesk system designed to assist company departments in creating and managing support tickets.

🚀 Features

• Stack: Full-Stack TypeScript with GraphQL
• Built with: React + TypeScript
• API Calls: Apollo GraphQL
• Real-time Notifications: Uses GraphQL subscriptions & Redis
• Role-based Access Control: Admins can assign roles to users
• Ticket Management:
  • Create tickets with descriptions, priorities, attachments, and chat logs
  • Support staff updates ticket status and resolves issues
  • Users can rate support performance (1-5 stars)
• Filtering & Dashboard:
  • Filter tickets by status, priority, date, etc.
  • View summary stats via dashboard
• User & Group Management:
  • Create user groups
  • Manage departments and ticket categories
• Checklists: Track progress with checklist items inside a ticket

📸 Screenshots

---

🎯 Live Demo

🔗 (available here)

---

🏆 My Role

I was responsible for both frontend and backend development. This repository contains the frontend part of the project, built with React + TypeScript. Backend part (available here).

Key Contributions:

• Developed full-stack features using React, NestJS, and TypeScript
• Implemented UI components and state management in React
• Integrated Apollo GraphQL for efficient API communication
• Designed and implemented role-based access control (RBAC)
• Developed real-time notifications using GraphQL subscriptions & Redis
• Built dashboard features and advanced filtering functionality
• Created cron jobs for scheduled checklist generation

---

📌 Notes

The backend is required for full functionality. Redis is needed for real-time notifications. If you are using a different API URL, update the .env file accordingly.

---

📄 License

This project is for portfolio purposes. Do not use it for commercial projects without permission.

---

🛠 Setup & Installation

# Clone the repository
git clone https://github.com/Usagi5677/helpdesk-prototype-frontend.git
cd helpdesk-prototype-frontend

# Install dependencies
npm install

# Create a .env file in the root directory with the following:
echo "REACT_APP_API_URL=http://localhost:4000/graphql
REACT_APP_WEBSOCKET_URL=ws://localhost:4000/graphql
REACT_APP_RETURN_URL=http://localhost:3002
REACT_APP_APP_ID=
PORT=3002" > .env

# Start the development server
npm run dev