https://github.com/devhabeeblateef/ticket-web-app-vue
Vue
https://github.com/devhabeeblateef/ticket-web-app-vue
Last synced: 3 months ago
JSON representation
Vue
- Host: GitHub
- URL: https://github.com/devhabeeblateef/ticket-web-app-vue
- Owner: devhabeeblateef
- Created: 2025-10-28T22:52:47.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-10-29T01:08:48.000Z (7 months ago)
- Last Synced: 2025-10-29T01:12:39.738Z (7 months ago)
- Language: Vue
- Homepage: https://ticket-vue-web-app-habeeb.netlify.app/
- Size: 65.4 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎫 TicketApp - Vue.js Implementation
*"Welcome to the Matrix... of customer support tickets!"* 🕶️
## 🚀 What Is This?
TicketApp is a support ticket management system that looks like it was designed by Neo himself after he took the red pill and discovered the true nature of customer support. This isn't your grandmother's ticket system, unless your grandmother has excellent taste in UI design and knows Vue 3 Composition API.
This is the **Vue.js implementation** of TicketApp.
### 🎭 Features That'll Make You Go "Whoa!"
- **🌊 Wavy Backgrounds**: Because flat design is for flat people
- **✨ Glowing Effects**: More bloom than your relationship life
- **🎯 Responsive Design**: Works on everything from your Nokia 3310 to your neighbor's smart fridge
- **🔒 "Secure" Authentication**: Uses localStorage because who needs real security anyway? *(Don't use this in production, please)*
- **📊 Dashboard Stats**: Numbers that go up and down, just like your sanity during debugging
- **✏️ Edit Tickets**: Change your mind faster than politicians during election season
- **🍞 Toast Notifications**: Professional notification system that won't burn your bread
- **⚡ Real-time Updates**: Dashboard syncs faster than your Wi-Fi drops
## 🛠️ Frameworks and Libraries Used
- **Vue 3.x** - The progressive framework for building user interfaces
- **Vite 5.x** - Build tool that's faster than your excuses
- **Vue Router 4.x** - For navigation smoother than butter
- **Pinia** - State management that actually makes sense
- **Tailwind CSS 3.x** - Utility-first CSS framework (utility classes longer than CVS receipts)
- **ESLint** - Code quality enforcer (the strict teacher you never had)
### Development Dependencies
- **@vitejs/plugin-vue** - Vite plugin for Vue support
- **@vue/eslint-config-prettier** - Code formatting that won't drive you insane
- **PostCSS** - CSS transformation pipeline
## 🎮 Setup and Execution Steps
### Prerequisites
- **Node.js 18+** (the newer the better, like fine wine or memes)
- **npm or yarn or pnpm** (we don't judge... much)
- **A sense of humor** (mandatory for reading this README)
### Installation Steps
1. **Clone this digital masterpiece:**
```bash
git clone https://github.com/your-username/ticket-app-vue.git
cd ticket-app-vue
```
2. **Install dependencies (brace yourself):**
```bash
npm install
# or if you're feeling fancy
yarn install
# or if you're really fancy
pnpm install
```
3. **Fire up the development server:**
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```
4. **Build for production (when you're ready to face the real world):**
```bash
npm run build
# or
yarn build
# or
pnpm build
```
5. **Preview production build:**
```bash
npm run preview
# or
yarn preview
# or
pnpm preview
```
6. **Open your browser and navigate to the URL shown in terminal**
- Usually `http://localhost:5173` for dev
- Usually `http://localhost:4173` for preview
- If it's different, blame Vite, not us
## 🔄 Switching Between Framework Versions
This Vue.js implementation is part of a multi-framework project. To explore other versions:
- **Vue.js Version** (you're here): `https://github.com/devhabeeblateef/ticket-web-app-vue`
- **React Version**: `https://github.com/devhabeeblateef/ticketwebapp-react`
- **Twig Version**: `https://github.com/devhabeeblateef/ticketwebapp-twig`
Each implementation maintains the exact same:
- **Layout structure** (wavy hero, glowing circles, card boxes)
- **Max-width constraint** (1440px)
- **Visual design** (cyberpunk aesthetic)
- **Functionality** (authentication, CRUD operations)
## 🏗️ Vue Components and State Structure
### Component Architecture
```
src/
├── components/
│ ├── HeaderNav.vue # Navigation component
│ ├── HelloWorld.vue # Welcome component
│ ├── Toast.vue # Individual toast component
│ └── ToastContainer.vue # Toast management system
├── views/
│ ├── Landing.vue # Hero page with wavy background
│ ├── AuthLogin.vue # Authentication form
│ ├── AuthSignup.vue # Registration form
│ ├── Dashboard.vue # Statistics overview
│ └── Tickets.vue # CRUD operations
├── stores/
│ └── auth.js # Pinia store for authentication
├── composables/
│ └── useToast.js # Toast notification composable
├── router/
│ └── index.js # Vue Router configuration
└── style.css # Global styles
```
### State Management Philosophy
- **Pinia**: Global state for authentication and user sessions
- **Composition API**: Component-specific state with reactive refs
- **localStorage**: Persistent storage for sessions and ticket data
- **Composables**: Reusable logic for toast notifications and data management
### Key State Patterns
```javascript
// Authentication state in Pinia store
const auth = useAuthStore()
const { login, logout, session } = auth
// Ticket management with Composition API
const tickets = ref([])
const showForm = ref(false)
const editingTicket = ref(null)
// Toast notifications with composable
const { success, error, warning, info } = useToast()
```
## 🎪 How to Use This Digital Circus
### 🏠 Landing Page
- Marvel at the aesthetics
- Click "Continue" if you're already in the system
- Click "Get Started" if you're new to the Matrix
### 🔐 Authentication
- **Sign Up**: Create an account (we promise not to sell your data for Boli)
- **Login**: Use those credentials you hopefully didn't forget
- **Auto-redirect**: New users automatically go to dashboard after signup
### 📊 Dashboard
- Admire your ticket statistics like a proud parent
- Watch numbers change in real-time as you create/close tickets
- Feel the power of data visualization
- Use quick action buttons to jump to ticket management
### 🎫 Ticket Management
- **Create**: Click "New Ticket" to spawn tickets like a ticket-generating machine
- **Edit**: Click the edit button to change your mind
- **Delete**: Send tickets to the digital graveyard (with confirmation modal)
- **Status Management**: Select from Open, In Progress, or Closed
- **Real-time Updates**: See changes instantly without page refresh
## 🎨 Design Philosophy
We believe in:
- **Dark themes** - Because we're not savages
- **Glowing effects** - If it doesn't glow, it doesn't go
- **Responsive design** - From phone screens to IMAX theaters
- **Cyber aesthetics** - Making Excel sheets look exciting since 2024
- **Vue-first approach** - Composition API all the way
## ♿ Accessibility Features
We believe everyone should be able to enter the Matrix of ticket management:
- **Semantic HTML**: Proper heading hierarchy and landmarks
- **ARIA labels**: Screen reader friendly button descriptions
- **Keyboard navigation**: Tab through everything like a keyboard ninja
- **Color contrast**: High contrast ratios (WCAG AA compliant)
- **Focus indicators**: Visual focus states for all interactive elements
- **Responsive text**: Scales properly with browser zoom
- **Form validation**: Clear error messages and field requirements
### Accessibility Testing
- Tested with screen readers (NVDA, JAWS)
- Keyboard-only navigation verified
- Color blindness simulation tested
- Mobile accessibility validated
## 🐛 Known Issues (Features, Not Bugs)
### Current Limitations
- **localStorage Security**: Don't use this authentication pattern in production
- **No SSR**: Client-side rendering only (SPA limitation)
- **Limited Error Boundaries**: Could use more comprehensive error handling
- **No Offline Support**: Requires internet connection
- **Browser Compatibility**: Modern browsers only (IE is not invited to this party)
### Visual "Features"
- The logout button is so powerful it might log you out of life itself
- Toast notifications may cause sudden cravings for actual toast
- The wavy background has been known to cause motion sickness in sensitive users
- Users may experience an uncontrollable urge to wear sunglasses indoors
- Glowing effects may temporarily blind users in dark rooms
- Vue's reactivity might make you question the nature of reality
### Performance Notes
- Initial load includes all components (could be optimized with lazy loading)
- No image optimization (all graphics are CSS/SVG based)
- localStorage operations are synchronous (consider async patterns for large datasets)
- Toast notifications stack infinitely (because why not?)
## 👤 Test User Credentials
For testing purposes, you can create your own accounts - the system stores everything in localStorage:
### Demo Workflow
```
1. Go to Sign Up page
2. Create account with any email/password
3. You'll be automatically logged in and redirected to dashboard
4. Create sample tickets to see the system in action
```
### Sample Test Data
Create tickets with these scenarios:
- "Website broken" (Status: Open)
- "Coffee machine not working" (Status: In Progress)
- "Universe.exe has stopped working" (Status: Closed)
- "Vue is too reactive" (Status: Open)
- "Tailwind classes too long" (Status: In Progress)
### Session Testing
- Sessions persist across browser refreshes
- Logout clears session and redirects to landing
- Protected routes redirect to login when unauthenticated
- Session tokens are mock timestamps (don't use in production!)
## 📋 Acceptance Criteria Compliance
This Vue.js implementation meets all specified requirements:
### ✅ Layout Consistency
- **Wavy hero background**: Implemented with CSS gradients and shapes
- **Decorative circles**: CSS-based glowing orbs with animations
- **Card-based boxes**: Rounded corners, shadows, and hover effects
- **Max-width 1440px**: Applied to all major containers
- **Responsive design**: Mobile-first approach with Tailwind breakpoints
### ✅ Authentication & Security
- **Protected routes**: Router guards protect Dashboard/Tickets
- **Session tokens**: Mock JWT-style tokens stored in localStorage
- **Route protection**: Automatic redirects for unauthenticated users
- **Session persistence**: Maintains login state across browser sessions
### ✅ Ticket CRUD Operations
- **Create**: Form validation with required fields and reactive updates
- **Read**: Dashboard statistics and ticket list display with real-time sync
- **Update**: Edit functionality with form pre-population
- **Delete**: Confirmation modal prevents accidental deletion
- **Status management**: Dropdown selection for ticket status
### ✅ Error Handling & UX
- **Form validation**: Real-time feedback for required fields
- **Toast notifications**: Success/error/warning/info messages for all operations
- **Invalid credentials**: Clear error messages for login failures
- **Protected route access**: Automatic redirects with user feedback
- **Reactive updates**: Changes reflect immediately across components
### ✅ Responsive Design
- **Mobile-first**: Tailwind CSS responsive utilities
- **Flexible layouts**: Grid and flexbox for all screen sizes
- **Touch-friendly**: Adequate button sizes for mobile interaction
- **Accessibility**: WCAG AA compliance for color contrast and navigation
## 🤝 Contributing
Want to contribute? Great! Here's how:
1. Fork it (the repo, not your dinner)
2. Create a feature branch (`git checkout -b feature/mind-blowing-feature`)
3. Commit your changes (`git commit -m 'Add mind-blowing feature'`)
4. Push to the branch (`git push origin feature/mind-blowing-feature`)
5. Open a Pull Request (and pray to the Vue devtools gods)
### Development Guidelines
- Follow the existing code style (ESLint will remind you)
- Use Composition API consistently (Options API is so Vue 2)
- Maintain the cyberpunk aesthetic (glowing effects are mandatory)
- Test on multiple screen sizes (your phone, tablet, and desktop)
- Keep the humor alive in comments and documentation
- Write composables for reusable logic
## 🔗 Related Repositories
- **Main Repository**: [ticketwebapp](https://github.com/devhabeeblateef/ticketwebapp) - Root README and shared assets
- **React Implementation**: [ticketwebapp-react](https://github.com/devhabeeblateef/ticketwebapp-react) *(coming soon)*
- **Twig Implementation**: [ticketwebapp-twig](https://github.com/devhabeeblateef/ticketwebapp-twig) *(coming soon)*
- **Shared Assets**: Located in main repository `/assets` folder
All repositories are set to "Anyone with the link can view" for easy access.
## 📜 License
This project is licensed under the "Do Whatever You Want But Don't Blame Us" License.
*Also known as MIT License - see LICENSE file for boring legal details.*
## 🙋♂️ FAQ (Frequently Asked Quandaries)
**Q: Why does everything glow?**
A: Because normal things are for normal people, and we are not normal people.
**Q: Is this production-ready?**
A: As ready as a student the night before finals, technically functional but probably not recommended.
**Q: Can I use this for my actual business?**
A: You *can* use a spoon to dig a hole, but that doesn't mean you *should*.
**Q: What's with all the Matrix references?**
A: We took the red pill and saw that customer support tickets are just another form of the Matrix.
**Q: Why Vue instead of React?**
A: Because Vue's reactivity system is so good, it makes React developers question their life choices.
**Q: Why Composition API?**
A: Because Options API is like using Internet Explorer - it works, but why would you?
## 🎭 Credits
- **Developer**: Lateef Habeeb (probably, at least some parts)
- **Designer**: The intersection of caffeine and Tailwind CSS
- **QA Tester**: Vue DevTools browser extension
- **Project Manager**: The voices in our head saying "one more feature"
- **Toast Consultant**: Every breakfast lover ever
## 🚨 Disclaimer
No actual matrices were harmed in the making of this application. Side effects may include: increased productivity, decreased sanity, an inexplicable urge to solve all problems with Vue components, and sudden understanding of reactive programming.
Vue 3's Composition API may cause developers to question why they ever used class components. Pinia state management may lead to dependency on centralized state for everything, including grocery lists.
---
*Made with 💖, ☕, Vue 3, and an unhealthy amount of Stack Overflow visits*
**Remember**: There is no spoon... but there are tickets! And they're reactive! 🥄❌🎫✅⚡