OTickets – Ticket Support System

OTickets is a ticket support web application that simplifies the management of support tickets and provides a platform to handle frequently asked questions (FAQs) to enhance visitor and client experience.

Demo

You can check out the live demo of the application here.

Features

• Implements a responsive design to ensure a good user experience on all devices.
• Utilizes the Repository Pattern and Services for maintainability.
• Follows clean code and Separation of Concerns principles.
• Uses reusable components and layouts to avoid duplication of code.
• Implements input validation and data encryption to protect user data.
• Sanitizes user input to prevent XSS attacks.
• Optimizes database performance by avoiding the N+1 problem.
• Uses Laravel Queues to send notifications asynchronously via email and database.
• And more…

Languages and Tools

Frontend

• TypeScript 5
• Vue.js 3 (Composition API)
• Vue Router 4
• Pinia 2 (State Management)
• Tailwind CSS 3
• Headless UI

Backend

• PHP 8
• Laravel 10 API
• Laravel Sanctum (Authentication)

Database

• MySQL

Tools

• Git
• GitHub
• NPM
• Composer

Installation

Requirements

• PHP 8
• Composer
• Node.js
• NPM

Installation Steps

1. Clone the repository

   git clone https://github.com/omaghd/otickets.git

2. Install the dependencies

   cd path/to/backend && composer install

   cd path/to/frontend && npm install

3. Create a copy of your .env file

   cd path/to/backend && cp .env.example .env

4. In the .env file in the backend, add database information to allow Laravel to connect to the database

   DB_CONNECTION=mysql
   DB_HOST=
   DB_PORT=
   DB_DATABASE=
   DB_USERNAME=
   DB_PASSWORD=

5. Generate an app encryption key

   cd path/to/backend && php artisan key:generate

6. Migrate and seed the database

   cd path/to/backend && php artisan migrate --seed

7. Launch the backend

   cd path/to/backend && php artisan serve

8. Change the .env file in the frontend to point to the backend

   VITE_API_URL='http://127.0.0.1:8000/'
   VITE_API_URL_API='http://127.0.0.1:8000/api/'

9. Launch the backend and frontend in separate terminals

   cd path/to/frontend && npm run dev

   cd path/to/backend && php artisan serve

10. Visit the application

    http://localhost:8000

11. Link the storage folder in the backend

    cd path/to/backend && php artisan storage:link

Usage

Default Credentials

If you ran the database seeder, you can login with the following credentials:

Tests

To run the tests in the backend, run the following command:

cd path/to/backend && php artisan test

Notifications

To listen for queued notifications, run the following command:

cd path/to/backend && php artisan queue:listen

Postman Collection

I made it simple for you to test the API endpoints by providing a Postman collection.

You can download it from here.

User Stories

Visitor

Admin

Dashboard

User Management

Department Management

Client Management

Category Management

FAQ Management

Canned Response Management

Newsletter Management

Ticket Management

Profile Management

Notification Management

Agent

Dashboard

Canned Response Management

Ticket Management

Profile Management

Notification Management

Client

Ticket Management

Profile Management

Notification Management

Author

License

This project is MIT licensed.

GitHub

View Github