TrayDesk

Multi-Framework SaaS Ticket Management System

A modern, enterprise-grade ticket management system showcasing feature parity and consistent design across three different frontend frameworks.

Getting Started · Architecture · Contributing · Report Bug

---

✨ Features

Core Functionality

• ✅ Full CRUD Operations - Create, Read, Update, Delete tickets
• 🔐 Secure Authentication - Session-based authentication
• 📊 Real-time Dashboard - Live ticket statistics
• 🎨 Premium UI/UX - Modern design with glassmorphism
• 📱 Fully Responsive - Mobile-first design approach
• ♿ WCAG Accessible - Semantic HTML and ARIA labels

Design System

• Max Width: 1440px centered layout
• Wavy Backgrounds: SVG-based hero sections
• Glassmorphism: Modern UI effects
• Status Colors: Green (open), Amber (in progress), Gray (closed)
• Smooth Animations: Polished transitions
• Dark Mode Ready: Theme support

---

🚀 Quick Start

# Clone and install
git clone https://github.com/Trayshmhirk/traydesk.git
cd traydesk
pnpm install

# Run your preferred framework
pnpm dev:next   # Next.js (Port 3200)
pnpm dev:vue    # Vue.js (Port 5173)
pnpm dev:twig   # Twig/PHP (Port 8000)

👉 See Full Setup Guide for detailed instructions

---

🏗️ Technology Stack

Framework	Language	Styling	State Management
Next.js 16	TypeScript	Tailwind + shadcn/ui	Zustand
Vue 3	TypeScript	Tailwind CSS	Pinia
Twig	PHP 8+	Tailwind CSS	PHP Sessions

---

📁 Project Structure

traydesk/
├── apps/
│   ├── next-app/      # Next.js implementation
│   ├── vue-app/       # Vue.js implementation
│   └── twig-app/      # Twig/PHP implementation
├── docs/              # Documentation
└── packages/          # Shared packages (future)

---

📖 Documentation

• 📘 Getting Started - Setup and installation guide
• 🏛️ Architecture - Design decisions and structure
• 🤝 Contributing - How to contribute to the project

---

🎨 Screenshots

Coming soon! Screenshots will be added once the UI is finalized.

---

🧪 Demo Credentials

Use these credentials to test the authentication:

Email: [email protected]
Password: admin123

---

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Quick Contribution Steps

# 1. Fork and clone
git clone https://github.com/YOUR_USERNAME/traydesk.git

# 2. Create a branch
git checkout -b feature/my-feature

# 3. Make changes and commit
git commit -m "feat(next-app): add new feature"

# 4. Push and create PR
git push origin feature/my-feature

---

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

👨‍💻 Author

Osunbajo Micheal (Trayshmhirk)

• GitHub: @Trayshmhirk
• Email: [email protected]

---

🙏 Acknowledgments

• Design inspiration from modern SaaS applications
• shadcn/ui for beautiful React components
• The open-source community for continuous support

---

⭐ Show Your Support

Give a ⭐️ if this project helped you!

---

Built with ❤️ to demonstrate multi-framework expertise

⬆ Back to Top