Ticket Management System / Help Desk

Project Overview:

React web based application for ticket management and ticket submission. Refer to './DEV_NOTES.txt' for more information.

Try it out here: TICKET-SYSTEM

NOTE: Please reach out to the developer for sample authentication to login and test the application.

Features

• Help Desk / Ticket Management: Keep track of your tickets in an organized dashboard; sorting ticket status by "new", "in progress", and "resolved".
• User-Friendly Ticket Submission: Simple and easy ticket submission process that ensures a smooth and effortless experience for users.
• Shared Sign-in Platform for Users and Admin: Shared sign-in platform for both users and adminstrators, providing a streamlined authentication process for accessing ticket submission form and admin ticket dashboard.
• Firebase Authentication: Leveraging Firebase Authentication's built-in support for email and password-based authentication, allowing users convenient sign-in access without the need for third-party authentication providers (Dev note: Security rules can be applied to control access based on user authentication and roles).
• Intuitive Interface and Responsive Design: Application is optimized for different screen sizes, providing users with a consistent and intuitive experience.

File Structure

TicketManagementSystem/TicketManagementSystem
 ├── src
 |	├── assets
 |		├── Dashboard.scss
 |		├── DetailsModal.scss
 |		├── Login.scss
 |		├── TicketCard.scss
 |		├── TicketColumn.scss
 |		├── TicketForm.scss
 |		├── UpdateModal.scss
 |	├── components
 |		├── modals
 |			├── DetailsModal.jsx
 |			├── UpdateModal.jsx
 |		├── Dashboard.jsx
 |		├── Login.jsx
 |		├── TicketCard.jsx
 |		├── TicketColumn.jsx
 |		├── TicketForm.jsx
 |	├── services
 |		├── api.jsx
 |	├── App.css
 |	├── App.jsx
 |	├── index.css
 |	├── main.jsx
 ├── index.html

Prerequisites

In order to run this application and connect to Firestore, you'll need to provide your own Firebase configuration information. Follow the steps below to set up Firebase for this application or refer to the offical documenations here: https://firebase.google.com/docs/web/setup

1. Create a Firebase project:

   • Go to the Firebase Console.
   • Click on "Add project" and follow the prompts to create a new Firebase project.

2. Add Firebase to your web app:

   • Once your project is created, click on "Add app" and select the web platform.
   • Follow the instructions to register your app and obtain your Firebase configuration object (save it for step 4).

3. Enable Firestore:

   • Go to the "Firestore Database" section in your Firebase project.
   • Click on "Create database" and follow the prompts to set up Firestore.

4. Update Firebase configuration:

   • In this project, navigate to './TicketManagementSystem/src/services/api.jsx' and locate the 'firebaseConfig' object and replace it's placeholder values with your Firebase configuration values (refer to step 2).

5. Start the application:

   • After updating the Firebase configuration, you can now run the application and interact with Firestore.

Getting Started

# Clone the repository
gh repo clone your-username/TicketManagementSystem

# Navigate to the project directory
cd TicketManagementSystem/TicketManagementSystem

# Install the dependencies
npm install

# Start the development server
npm run dev