TicketingReact

A modern React-based ticketing system migrated from Angular, built with TypeScript, Vite, and React Router v6.

Features

• Authentication: Secure login/logout with JWT tokens
• Ticket Management: Create, view, update tickets with status tracking
• Role-based Access Control: Customer, Agent, and Admin roles
• Real-time Updates: Modern React patterns for state management
• Responsive Design: Mobile-friendly interface
• File Attachments: Upload/download ticket attachments
• Audit Logging: Track all system changes (Admin only)

Tech Stack

• Frontend: React 18 with TypeScript
• Build Tool: Vite
• Routing: React Router v6
• HTTP Client: Axios with interceptors
• State Management: React Context API
• Styling: CSS with custom properties
• Authentication: JWT-based auth

Prerequisites

• Node.js 18+
• npm or yarn
• Backend API running on https://localhost:7079

Installation

1. Clone the repository:

git clone <repository-url>
cd TicketingReact

2. Install dependencies:

npm install

3. Set up environment variables:

cp .env.example .env
# Edit .env with your API URL

4. Start the development server:

npm run dev

The application will be available at http://localhost:5173

Environment Configuration

Create a .env file in the root directory:

VITE_API_URL=https://localhost:7079/api

Default Credentials

For testing purposes, you can use these default credentials:

• Admin: admin@ticketing.com / Admin123!
• Agent: agent@ticketing.com / Agent123!
• Customer: customer@ticketing.com / Customer123!

Project Structure

src/
├── components/          # Reusable components (ProtectedRoute, RoleRoute)
├── contexts/           # React contexts (AuthContext)
├── core/              # Core business logic
│   ├── models/        # TypeScript interfaces and enums
│   └── services/      # API service classes
├── features/          # Feature modules
│   ├── auth/         # Authentication pages
│   ├── tickets/      # Ticket management
│   ├── clients/      # Client management
│   ├── team/         # Team management
│   └── audit-logs/   # Audit log viewing
├── shared/            # Shared resources
│   ├── components/    # Shared components (Pagination)
│   └── layout/        # Layout components (Header, Sidebar, MainLayout)
├── services/          # HTTP client setup
└── index.css          # Global styles

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

API Integration

The application communicates with a backend API through the following services:

• AuthService: Login, logout, registration
• TicketService: CRUD operations for tickets
• UserService: User management operations
• AuditLogService: Audit log retrieval

All API requests are automatically authenticated with JWT tokens stored in localStorage.

Role-based Access

• Customers: Can create and view their own tickets
• Agents: Can manage tickets and view clients
• Admins: Full access including team management and audit logs

Styling

The application uses CSS custom properties for theming with a professional color scheme:

• Primary: Blue (#1E4D92)
• Status colors: Blue, Yellow, Green, Gray
• Priority colors: Green, Yellow, Orange, Red
• Responsive design with mobile breakpoints

Development

Adding New Features

1. Create feature module in src/features/
2. Add models to src/core/models/
3. Create API service in src/core/services/
4. Update routing in src/App.tsx

State Management

The application uses React Context API for global state:

• AuthContext: User authentication state and methods
• Local component state for UI-specific data

API Patterns

All API services follow consistent patterns:

• Async/await for promise handling
• Error handling with user-friendly messages
• Request/response interceptors for auth tokens
• TypeScript interfaces for type safety

Production Deployment

1. Build the application:

npm run build

2. Deploy the dist folder to your web server
3. Ensure the API is accessible and CORS is configured
4. Set up appropriate environment variables

📸 Screenshots

DeepWiki moraisLuismNet/TicketingReact