https://github.com/devhabeeblateef/ticketwebapp-react
Ticket Web App Built with React
https://github.com/devhabeeblateef/ticketwebapp-react
Last synced: 7 days ago
JSON representation
Ticket Web App Built with React
- Host: GitHub
- URL: https://github.com/devhabeeblateef/ticketwebapp-react
- Owner: devhabeeblateef
- Created: 2025-10-26T22:39:55.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-10-28T16:53:16.000Z (7 months ago)
- Last Synced: 2025-10-28T18:34:24.837Z (7 months ago)
- Language: JavaScript
- Size: 51.8 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎫 TicketApp - React 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.
This is the **React 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 Tboy during election season
## 🛠️ Frameworks and Libraries Used
- **React 18.x** - The chosen one for building user interfaces
- **Vite 5.x** - Build tool that's faster than your excuses
- **React Router DOM 6.x** - For navigation smoother than butter
- **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-react** - Vite plugin for React support
- **@eslint/js** - JavaScript linting rules
- **globals** - Global variables for different environments
## 🎮 Setup and Execution Steps
### Prerequisites
- **Node.js 18+** (the newer the better, like fine wine or memes)
- **npm or yarn** (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/devhabeeblateef/ticketwebapp-react.git
cd ticketwebapp-react/react-app
```
2. **Install dependencies (brace yourself):**
```bash
npm install
# or if you're feeling fancy
yarn install
```
3. **Fire up the development server:**
```bash
npm run dev
# or
yarn dev
```
4. **Build for production (when you're ready to face the real world):**
```bash
npm run build
# or
yarn build
```
5. **Preview production build:**
```bash
npm run preview
# or
yarn 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 React implementation is part of a multi-framework project. To explore other versions:
- **React Version** (you're here): `https://github.com/devhabeeblateef/ticketwebapp-react`
- **Vue.js Version**: `https://github.com/devhabeeblateef/ticket-web-app-vue`
- **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)
## 🏗️ UI Components and State Structure
### Component Architecture
```
src/
├── components/
│ ├── Footer.jsx # Consistent footer across pages
│ ├── hero-wave.jsx # SVG wavy background component
│ ├── ProtectedRoute.jsx # Route protection wrapper
│ └── Toast.jsx # Notification system
├── pages/
│ ├── Landing.jsx # Hero page with wavy background
│ ├── Login.jsx # Authentication form
│ ├── Signup.jsx # Registration form
│ ├── Dashboard.jsx # Statistics overview
│ └── Tickets.jsx # CRUD operations
├── context/
│ └── AppContext.jsx # Global state management
└── utils/
├── auth.js # Authentication helpers
└── storage.js # localStorage utilities
```
### State Management Philosophy
- **Context API**: Global state for authentication and notifications
- **Local State**: Component-specific state with useState hooks
- **localStorage**: Persistent storage for sessions and data
- **No Redux**: Because sometimes simple is better (and we're rebels)
### Key State Patterns
```javascript
// Authentication state in AppContext
const { addToast, clearSession, isLoggedIn, toasts } = useApp();
// Ticket management state
const [tickets, setTickets] = useState([]);
const [isEditMode, setIsEditMode] = useState(false);
const [editingTicket, setEditingTicket] = useState(null);
```
## 🎪 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
### 📊 Dashboard
- Admire your ticket statistics like a proud parent
- Watch numbers change as you create/close tickets
- Feel the power of data visualization
### 🎫 Ticket Management
- **Create**: Spawn new tickets like a ticket-generating machine
- **Edit**: Change your mind with the edit button (pencil icon)
- **Delete**: Send tickets to the digital graveyard
- **Status Toggle**: Click the status badge to cycle through states
## 🎨 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
## ♿ 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
- **Alt text**: Images have descriptive alternative text
### 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 (Vite 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
### Performance Notes
- Initial load includes all components (could be optimized with code splitting)
- No image optimization (all graphics are CSS/SVG based)
- localStorage operations are synchronous (consider async patterns for large datasets)
## 👤 Test User Credentials
For testing purposes, you can use these pre-configured accounts or create your own:
### Demo Users
```
Email: neo@matrix.com
Password: redpill123
Email: trinity@matrix.com
Password: matrix456
Email: morpheus@matrix.com
Password: bluepill789
```
### Creating Test Data
1. **Sign up** with any email/password combination
2. **Create sample tickets** with different statuses:
- "Website broken" (Status: Open)
- "Coffee machine not working" (Status: In Progress)
- "Universe.exe has stopped working" (Status: Closed)
3. **Test CRUD operations**:
- Edit ticket titles and descriptions
- Toggle status by clicking status badges
- Delete tickets with confirmation modal
### 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 React implementation meets all specified requirements:
### ✅ Layout Consistency
- **Wavy hero background**: Implemented with SVG component
- **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**: ProtectedRoute component guards 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
- **Read**: Dashboard statistics and ticket list display
- **Update**: Edit functionality with form pre-population
- **Delete**: Confirmation modal prevents accidental deletion
- **Status management**: Click-to-toggle status workflow
### ✅ Error Handling
- **Form validation**: Real-time feedback for required fields
- **Toast notifications**: Success/error messages for all operations
- **Invalid credentials**: Clear error messages for login failures
- **Protected route access**: Automatic redirects with user feedback
### ✅ 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 code review gods)
### Development Guidelines
- Follow the existing code style (ESLint will remind you)
- 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
## 🔗 Related Repositories
- **Main Repository**: [ticketwebapp](https://github.com/devhabeeblateef/ticketwebapp) - Root README and shared assets
- **Vue.js Implementation**: [ticketwebapp-vue](https://github.com/devhabeeblateef/ticketwebapp-vue) *(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.
## 🎭 Credits
- **Developer**: Lateef Habeeb (probably, at least some parts)
- **Designer**: The intersection of caffeine and CSS
- **QA Tester**: Rubber duck on desk
- **Project Manager**: HNG interns flooding my notification
## 🚨 Disclaimer
No actual matrices were harmed in the making of this application. Side effects may include: increased productivity, decreased sanity, and an inexplicable urge to solve all problems with React components.
---
*Made with 💖, ☕, and an unhealthy amount of AI visits*
**Remember**: There is no spoon... but there are tickets! 🥄❌🎫✅