A modern, reactive ticket management system built with Vue 3, showcasing the Composition API, reactive data binding, and composables for reusable logic.
- ✅ Wavy SVG hero background
- ✅ Decorative circle overlays
- ✅ Max-width 1440px container layout
- ✅ Card-based design with shadows and rounded corners
- ✅ Consistent footer across all pages
- ✅ Fully responsive (mobile → tablet → desktop)
- ✅ Login/Signup with form toggle
- ✅ Session management using localStorage
- ✅ Protected routes with automatic redirect
- ✅ Session expiry notifications
- ✅ Secure logout functionality
- ✅ Create - Add new tickets with validation
- ✅ Read - View all tickets with status badges
- ✅ Update - Edit tickets via modal forms
- ✅ Delete - Remove tickets with confirmation dialog
- ✅ Real-time statistics (Total, Open, In Progress, Closed)
- ✅ Color-coded status indicators
- ✅ Quick action buttons
- ✅ Dynamic data updates using computed properties
- ✅ Real-time form validation
- ✅ Inline error messages
- ✅ Toast notifications for all actions
- ✅ Status values:
open,in_progress,closed - ✅ Color coding: Open=Green, In Progress=Amber, Closed=Gray
| Technology | Purpose |
|---|---|
| Vue 3 | Progressive JavaScript framework |
| Composition API | Modern reactive data handling |
| Vue Router v4 | Client-side routing |
| Tailwind CSS | Utility-first styling |
| Lucide Icons | Icon library (CDN) |
| Vite | Build tool & dev server |
- Node.js 16+
- npm or yarn
- Clone the repository
git clone https://github.com/DevBytes-J/ticketflow-vue.git
cd ticketflow-vue- Install dependencies
npm install- Start development server
npm run dev- Open in browser
http://localhost:5174
npm run buildUse these credentials to test the application:
| Field | Value |
|---|---|
admin@ticketflow.com |
|
| Password | admin123 |
| Device | Breakpoint | Layout |
|---|---|---|
| Mobile | < 640px | Single column, stacked |
| Tablet | 640px - 1024px | 2-column grid |
| Desktop | > 1024px | 4-column grid |
- Open: Green (#10B981)
- In Progress: Amber (#F59E0B)
- Closed: Gray (#6B7280)
This application follows WCAG 2.1 AA standards:
- ✅ Semantic HTML5 elements
- ✅ ARIA labels for screen readers
- ✅ Keyboard navigation support
- ✅ Focus visible states on all interactive elements
- ✅ Color contrast ratio ≥ 4.5:1
This project is part of a multi-framework challenge. View the other implementations:
| Framework | Repository | Live Demo |
|---|---|---|
| React | GitHub | Live Demo |
| Twig | GitHub | Live Demo |
Joanna Bassey
📧 Email: joannabassey19@gmail.com
🔗 GitHub: @DevBytes-J
Built with ❤️ for HNG Internship - Frontend Stage 2