{"id":29617640,"url":"https://github.com/thanhdaon/tickpath","last_synced_at":"2026-05-09T06:02:53.115Z","repository":{"id":305308772,"uuid":"1022526092","full_name":"thanhdaon/tickpath","owner":"thanhdaon","description":"full-stack ticketing system built with React and TypeScript","archived":false,"fork":false,"pushed_at":"2025-07-30T05:05:12.000Z","size":1618,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-30T07:16:23.990Z","etag":null,"topics":["drizzle-orm","orpc","react","react-query","shadcn","tanstack-start"],"latest_commit_sha":null,"homepage":"https://tickpath.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thanhdaon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-19T09:05:39.000Z","updated_at":"2025-07-30T05:12:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"131a83b1-7fc3-4c88-947f-780f93d34893","html_url":"https://github.com/thanhdaon/tickpath","commit_stats":null,"previous_names":["thanhdaon/tickpath"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/thanhdaon/tickpath","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thanhdaon%2Ftickpath","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thanhdaon%2Ftickpath/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thanhdaon%2Ftickpath/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thanhdaon%2Ftickpath/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thanhdaon","download_url":"https://codeload.github.com/thanhdaon/tickpath/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thanhdaon%2Ftickpath/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32809147,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"online","status_checked_at":"2026-05-09T02:00:06.633Z","response_time":123,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drizzle-orm","orpc","react","react-query","shadcn","tanstack-start"],"created_at":"2025-07-21T02:01:12.200Z","updated_at":"2026-05-09T06:02:53.108Z","avatar_url":"https://github.com/thanhdaon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TickPath - Modern Ticketing System\n\nTickPath is a modern, full-stack ticketing system built with React and TypeScript. It provides a comprehensive solution for issue tracking, user management, and project organization with real-time collaboration features.\n\n## 🚀 Tech Stack\n\n### Frontend\n\n- **[React 19](https://react.dev/)** - UI library with latest features\n- **[TypeScript](https://www.typescriptlang.org/)** - Type-safe JavaScript\n- **[TanStack Router](https://tanstack.com/router)** - Type-safe routing with file-based routing\n- **[TanStack Start](https://tanstack.com/start)** - Full-stack React framework\n- **[TanStack Query](https://tanstack.com/query)** - Server state management\n- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework\n- **[shadcn/ui](https://ui.shadcn.com/)** - Re-usable component library\n- **[Lucide React](https://lucide.dev/)** - Beautiful icons\n- **[Sonner](https://sonner.emilkowal.ski/)** - Toast notifications\n\n### Backend \u0026 Data\n\n- **[ORPC](https://orpc.dev/)** - Type-safe API layer\n- **[Drizzle ORM](https://orm.drizzle.team/)** - Type-safe SQL ORM\n- **[MySQL](https://www.mysql.com/)** - Relational database\n- **[Better Auth](https://www.better-auth.com/)** - Authentication solution\n\n### Development Tools\n\n- **[Vite](https://vitejs.dev/)** - Build tool and development server\n- **[pnpm](https://pnpm.io/)** - Fast, disk space efficient package manager\n- **[Docker](https://www.docker.com/)** - Containerization for database\n- **[@t3-oss/env-core](https://env.t3.gg/)** - Environment variable validation\n\n## 📁 Project Structure\n\n```\ntickpath/\n├── src/\n│   ├── components/          # Reusable UI components\n│   │   ├── issue/          # Issue-specific components\n│   │   ├── layout/         # Layout components\n│   │   └── ui/             # shadcn/ui components\n│   ├── db/                 # Database related files\n│   │   ├── schema.ts       # Database schema definitions\n│   │   ├── db.ts           # Database connection\n│   │   ├── drizzle.config.ts # Drizzle configuration\n│   │   └── seed.ts         # Database seeding\n│   ├── hooks/              # Custom React hooks\n│   ├── lib/                # Utility libraries\n│   │   ├── auth.ts         # Authentication configuration\n│   │   ├── env.ts          # Environment variables\n│   │   ├── theme.ts        # Theme management\n│   │   └── utils.ts        # Utility functions\n│   ├── orpc/               # API layer\n│   │   ├── router.ts       # API route definitions\n│   │   └── react-query.ts  # Query client setup\n│   ├── routes/             # File-based routes\n│   │   ├── __root.tsx      # Root layout\n│   │   ├── index.tsx       # Home page\n│   │   └── api/            # API routes\n│   ├── styles/             # Global styles\n│   └── routeTree.gen.ts    # Generated route tree\n├── docker-compose.yml      # Docker services\n├── package.json            # Dependencies and scripts\n├── vite.config.ts          # Vite configuration\n└── tsconfig.json           # TypeScript configuration\n```\n\n### Key Directories Explained\n\n- **`src/components/`** - Contains all reusable React components\n  - `issue/` - Components specific to issue management (assignee selector, status icons, etc.)\n  - `layout/` - Application layout components (sidebar, navigation)\n  - `ui/` - Base UI components from shadcn/ui\n- **`src/db/`** - Database layer with Drizzle ORM\n- **`src/routes/`** - File-based routing structure\n- **`src/orpc/`** - Type-safe API layer using ORPC\n\n## 🛠️ Features\n\n### Issue Management\n\n- ✅ Create, read, update, and delete issues\n- ✅ Issue status management (e.g., Todo, In Progress, Done)\n- ✅ Priority levels (e.g., Low, Medium, High, Critical)\n- ✅ Label/tag system for categorization\n- ✅ User assignment and reassignment\n- ✅ Issue descriptions and titles\n\n### User Management\n\n- ✅ User authentication and authorization\n- ✅ Role-based access control\n- ✅ User presence indicators (online, away, offline)\n- ✅ User profiles with avatars\n\n### Real-time Features\n\n- ✅ Live user presence status\n- ✅ Real-time updates via TanStack Query\n\n### UI/UX\n\n- ✅ Dark/light theme support\n- ✅ Responsive design\n- ✅ Toast notifications\n- ✅ Loading states and error handling\n- ✅ Type-safe navigation\n\n## 📋 Prerequisites\n\nBefore you begin, ensure you have the following installed:\n\n- **Node.js** (version 18 or higher)\n- **pnpm** (recommended package manager)\n- **Docker** (for running MySQL database)\n- **Git**\n\n## 🚀 Getting Started\n\n### 1. Clone the Repository\n\n```bash\ngit clone \u003cyour-repository-url\u003e\ncd tickpath\n```\n\n### 2. Install Dependencies\n\n```bash\npnpm install\n```\n\n### 3. Environment Setup\n\nCreate a `.env` file in the root directory:\n\n```bash\ncp .env.example .env\n```\n\nConfigure the following environment variables:\n\n```env\n# Database\nDATABASE_URL=\"mysql://root:root_password@localhost:3306/demo\"\n\n# Authentication\nBETTER_AUTH_URL=\"http://localhost:3000\"\nBETTER_AUTH_SECRET=\"your-secret-key-min-10-chars\"\n```\n\n### 4. Start the Database\n\nRun MySQL using Docker:\n\n```bash\ndocker-compose up -d\n```\n\nThis will start a MySQL database on port 3306 with:\n\n- Database: `demo`\n- Username: `root`\n- Password: `root_password`\n\n### 5. Database Setup\n\nPush the database schema:\n\n```bash\npnpm run db:push\n```\n\nSeed the database with initial data:\n\n```bash\npnpm run db:seed\n```\n\n### 6. Start the Development Server\n\n```bash\npnpm run dev\n```\n\nThe application will be available at [http://localhost:3000](http://localhost:3000)\n\n## 📜 Available Scripts\n\n### Development\n\n- `pnpm run dev` - Start development server\n- `pnpm run build` - Build for production\n\n### Database Management\n\n- `pnpm run db:push` - Push schema changes to database\n- `pnpm run db:generate` - Generate migration files\n- `pnpm run db:reset` - Reset database schema\n- `pnpm run db:studio` - Open Drizzle Studio (database GUI)\n- `pnpm run db:seed` - Seed database with sample data\n\n### Authentication\n\n- `pnpm run auth:generate` - Generate Better Auth files\n\n## 🗄️ Database Schema\n\nThe application uses the following main entities:\n\n### Core Entities\n\n- **Users** - User accounts with authentication\n- **Issues** - Main ticketing entities\n- **Statuses** - Issue status types (Todo, In Progress, Done, etc.)\n- **Priorities** - Issue priority levels\n- **Labels** - Categorization tags for issues\n\n### Supporting Entities\n\n- **Sessions** - User authentication sessions\n- **Accounts** - OAuth account linking\n- **User Presence** - Real-time user status\n- **User Roles** - Role-based permissions\n\n### Relationships\n\n- Issues belong to statuses and priorities\n- Issues can be assigned to users\n- Issues can have multiple labels (many-to-many)\n- Users can have multiple roles (many-to-many)\n\n## 🎨 UI Components\n\nThe project uses **shadcn/ui** components which provide:\n\n- Consistent design system\n- Accessibility features\n- Dark/light theme support\n- Customizable styling with Tailwind CSS\n\nKey components include:\n\n- `Button`, `Input`, `Dialog` - Basic form elements\n- `Sidebar`, `Sheet` - Layout components\n- `Avatar`, `Badge` - User interface elements\n- `Command`, `Popover` - Interactive components\n\n## 🔧 Configuration Files\n\n### Core Configuration\n\n- **`vite.config.ts`** - Vite bundler configuration with TanStack Start\n- **`tsconfig.json`** - TypeScript compiler options\n- **`components.json`** - shadcn/ui component configuration\n- **`tailwind.config.ts`** - Tailwind CSS configuration (if exists)\n\n### Database Configuration\n\n- **`src/db/drizzle.config.ts`** - Drizzle ORM configuration\n- **`docker-compose.yml`** - MySQL database container setup\n\n## 🔐 Authentication\n\nThe application uses **Better Auth** for authentication, which provides:\n\n- Session-based authentication\n- OAuth provider support\n- Email verification\n- Password reset functionality\n- Role-based access control\n\nAuthentication configuration is located in `src/lib/auth.ts`.\n\n## 🌐 API Routes\n\nThe application uses **ORPC** for type-safe API routes:\n\n### Available Endpoints\n\n- **Issues** - CRUD operations for issues\n- **Statuses** - Retrieve all issue statuses\n- **Priorities** - Retrieve all priority levels\n- **Labels** - Retrieve all labels\n- **Users** - User management with presence status\n\nAPI routes are defined in `src/orpc/router.ts` and automatically provide:\n\n- Full TypeScript type safety\n- Input validation with Zod\n- Automatic serialization\n\n## 🎯 Development Guidelines\n\n### Code Organization\n\n- Use TypeScript for all new code\n- Follow the established folder structure\n- Components should be small and focused\n- Use custom hooks for reusable logic\n\n### Database\n\n- Use Drizzle ORM for all database operations\n- Define relationships in schema files\n- Use migrations for schema changes\n- Always validate input with Zod schemas\n\n### Routing\n\n- Use file-based routing (TanStack Router)\n- Define loaders for data fetching\n- Use type-safe navigation\n- Implement proper error boundaries\n\n### Styling\n\n- Use Tailwind CSS for styling\n- Leverage shadcn/ui components\n- Maintain design system consistency\n- Support dark/light themes\n\n## 🚀 Deployment\n\n### Production Build\n\n```bash\npnpm run build\n```\n\n### Environment Variables\n\nEnsure all environment variables are properly set in your production environment:\n\n- `DATABASE_URL` - Production database connection\n- `BETTER_AUTH_URL` - Production app URL\n- `BETTER_AUTH_SECRET` - Secure secret key\n\n### Database Migration\n\nBefore deploying, ensure your database schema is up to date:\n\n```bash\npnpm run db:push\n```\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 📝 Additional Resources\n\n- [TanStack Router Documentation](https://tanstack.com/router)\n- [TanStack Start Documentation](https://tanstack.com/start)\n- [Drizzle ORM Documentation](https://orm.drizzle.team/)\n- [Better Auth Documentation](https://www.better-auth.com/)\n- [shadcn/ui Documentation](https://ui.shadcn.com/)\n- [ORPC Documentation](https://orpc.dev/)\n\n## 📄 License\n\nThis project is licensed under the ISC License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthanhdaon%2Ftickpath","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthanhdaon%2Ftickpath","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthanhdaon%2Ftickpath/lists"}