Ticketa — Accessible Ticket Management Web App

A production-ready, accessible ticket management web application built with React 18 and Vite. Features a stylish hero with wave and decorative circles, protected authentication (simulated with localStorage), and full CRUD ticket management.

Features

• 🎨 Beautiful, accessible UI with Poppins font
• 🔐 Simulated authentication system
• 📝 Full CRUD operations for ticket management
• 📊 Dashboard with statistics
• 🎯 Status tracking (Open, In Progress, Closed)
• ⭐ Priority levels (Low, Medium, High)
• 📱 Fully responsive design
• ♿ WCAG-compliant accessibility
• 🔔 Toast notifications
• 🎭 Modal dialogs with keyboard support

Tech Stack

• Framework: React 18 + Vite
• Routing: React Router DOM
• Styling: CSS Modules
• State Management: React Hooks
• Storage: LocalStorage (simulated backend)

Getting Started

Installation

npm install

Development

npm run dev

Open http://localhost:5173 in your browser.

Build

npm run build

Preview Production Build

npm run preview

Test Credentials

For testing purposes, you can use the following credentials:

• Email: test@example.com
• Password: 123456

Project Structure

src/
├── components/          # Reusable UI components
│   ├── Modal.jsx       # Modal dialog component
│   ├── TicketCard.jsx  # Individual ticket display
│   ├── TicketForm.jsx  # Ticket create/edit form
│   ├── Toast.jsx       # Toast notification
│   └── ToastContainer.jsx # Toast container wrapper
├── hooks/              # Custom React hooks
│   ├── useAuth.js      # Authentication logic
│   └── useToast.js     # Toast notification management
├── pages/              # Page components
│   ├── Landing.jsx     # Landing/hero page
│   ├── Login.jsx       # Login page
│   ├── Signup.jsx      # Signup page
│   ├── Dashboard.jsx   # Dashboard with stats
│   └── Tickets.jsx     # Ticket management page
├── styles/             # CSS stylesheets
│   ├── Landing.css
│   ├── Auth.css
│   ├── Dashboard.css
│   └── Tickets.css
├── utils/              # Utility functions
│   └── storage.js      # LocalStorage operations
├── App.tsx             # Main app component with routing
├── App.css             # Global styles
├── index.css           # Base styles
└── main.tsx            # App entry point

Component Responsibilities

Core Components

• App.tsx: Main application component, sets up routing and protected routes
• Modal.jsx: Reusable modal dialog with keyboard support and click-outside-to-close
• TicketCard.jsx: Displays individual ticket with status, priority, and actions
• TicketForm.jsx: Form for creating/editing tickets with validation
• Toast.jsx: Individual toast notification with auto-dismiss
• ToastContainer.jsx: Container for managing multiple toast notifications

Pages

• Landing.jsx: Homepage with hero section, wave SVG, and decorative circles
• Login.jsx: User login with email/password authentication
• Signup.jsx: User registration with validation
• Dashboard.jsx: Overview page with ticket statistics
• Tickets.jsx: Full CRUD interface for managing tickets

Hooks

• useAuth.js: Manages authentication state, login, signup, and logout
• useToast.js: Manages toast notifications with auto-dismiss

Utils

• storage.js: LocalStorage operations for tickets and users, includes seed data

Routes

• / - Landing page with hero and CTA buttons
• /download - Download source code as ZIP file
• /auth/login - Login page
• /auth/signup - Signup page
• /dashboard - Protected dashboard (requires auth)
• /tickets - Protected ticket management (requires auth)

LocalStorage Keys

The app uses the following localStorage keys:

• ticketapp_session: Stores user session (email and token)
• ticketapp_tickets: Array of ticket objects
• ticketapp_users: Array of user objects (for authentication)

Ticket Schema

{
  id: string,
  title: string,
  description?: string,
  status: "open" | "in_progress" | "closed",
  priority?: "low" | "medium" | "high",
  createdAt: timestamp
}

Validation Rules

Tickets

• Title: Required
• Status: Required, must be one of: open, in_progress, closed
• Description: Optional, minimum 10 characters if provided
• Priority: Optional, one of: low, medium, high

Authentication

• Email: Required, valid email format
• Password: Required, minimum 6 characters
• Confirm Password (signup): Must match password

Accessibility Features

• All form inputs have associated labels
• Error messages use aria-describedby and role="alert"
• All interactive elements are keyboard-accessible
• Visible focus states on all interactive elements
• Semantic HTML (header, main, footer, nav, section, article)
• ARIA attributes for screen readers
• Color contrast ratios meet WCAG standards
• Modal traps focus and closes on Escape key

Downloading Source Code

The project includes a built-in download feature:

1. Click Download: Visit /download to access the download page
2. ZIP File: The complete source code is packaged as source.zip (~0.25 MB)
3. Auto-generated: The ZIP is automatically created when you run npm run build
4. Public Access: The ZIP file is accessible at /source.zip for direct download

Creating Custom ZIPs

To manually create the source ZIP file:

npm run create-zip

The script excludes:

• node_modules/
• .git/
• dist/ and build/
• .env files
• Build artifacts

Resetting Data

To reset the app to its initial state:

1. Open browser DevTools (F12)
2. Go to Application → Local Storage
3. Delete all keys starting with ticketapp_
4. Refresh the page

Or run in console:

localStorage.removeItem('ticketapp_session')
localStorage.removeItem('ticketapp_tickets')
localStorage.removeItem('ticketapp_users')
location.reload()

Seed Data

On first load, the app seeds:

Test User

• Email: test@example.com
• Password: 123456

Sample Tickets

1. Fix homepage layout issue (Open, High)
2. Add user authentication (In Progress, Medium)
3. Update documentation (Closed, Low)

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS Safari, Chrome Android)

Design

• Max Width: 1440px (centered)
• Font: Poppins
• Colors:
  • Open status: #28a745 (green)
  • In Progress: #ffc107 (amber)
  • Closed: #6c757d (gray)
• Hero: Wave SVG bottom edge + decorative circles
• Responsive: Mobile-first with breakpoints at 480px, 640px, 768px

Known Issues

None currently. If you find any issues, please report them.

Future Enhancements

• Backend API integration
• Real-time updates with WebSockets
• File attachments for tickets
• Comments/activity log
• Email notifications
• Advanced filtering and search
• Ticket assignment to users
• Dark mode support

License

MIT

Author

Built with Vite + React