A modern, elegant issue tracking application built with Next.js 15, designed for teams to manage projects efficiently.
- User Authentication: Secure sign-up and sign-in with JWT tokens
- Issue Management: Create, read, update, and delete issues
- Real-time Updates: Hot reload and real-time issue status updates
- Responsive Design: Mobile-first design with Tailwind CSS
- Dark Mode Support: Built-in dark/light theme switching
- Database Integration: PostgreSQL with Drizzle ORM
- Form Validation: Zod schema validation for all forms
- Modern UI: Clean, accessible components with Tailwind CSS
- Next.js 15 - React framework with App Router
- React 19 - UI library
- TypeScript - Type safety
- Tailwind CSS - Utility-first CSS framework
- Lucide React - Icon library
- React Hot Toast - Toast notifications
- Next.js API Routes - Server-side API endpoints
- Drizzle ORM - Type-safe database toolkit
- PostgreSQL - Database (via Neon)
- bcrypt - Password hashing
- jose - JWT token handling
- zod - Schema validation
- ESLint - Code linting
- TypeScript - Static type checking
- PostCSS - CSS processing
- Drizzle Kit - Database migrations
issuesolver/
├── app/
│ ├── (auth)/ # Authentication pages
│ ├── (marketing)/ # Landing pages
│ ├── actions/ # Server actions
│ ├── api/ # API routes
│ ├── components/ # React components
│ ├── dashboard/ # Dashboard pages
│ └── issues/ # Issue management pages
├── db/
│ ├── schema.ts # Database schema
│ └── index.ts # Database configuration
├── lib/
│ ├── auth.ts # Authentication utilities
│ ├── dal.ts # Data access layer
│ └── utils.ts # Utility functions
└── public/ # Static assets
- Node.js 18+ and npm
- PostgreSQL database (or Neon account)
- Clone the repository:
git clone https://github.com/yourusername/issue-tracker.git
cd issue-tracker- Install dependencies:
npm install- Set up environment variables:
cp .env.example .env.localEdit .env.local with your database URL and secret key:
DATABASE_URL=your_postgresql_connection_string
SECRET_KEY=your_jwt_secret_key- Run database migrations:
npm run db:push- Start the development server:
npm run dev- Open http://localhost:3000 in your browser.
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLintnpm run lint:fix- Fix ESLint issuesnpm run db:generate- Generate database migrationsnpm run db:push- Push schema to databasenpm run db:studio- Open Drizzle Studio
The app uses JWT tokens for authentication with the following features:
- Secure password hashing with bcrypt
- Session management with HTTP-only cookies
- Protected routes and API endpoints
- User registration and login
The application uses the following main entities:
- Users: Authentication and profile information
- Issues: Issue tracking with status, priority, and assignments
- Sessions: User session management
Custom components built with Tailwind CSS:
- Responsive navigation
- Form components with validation
- Loading states and skeletons
- Toast notifications
- Modal dialogs
- Button variants and states
- Push your code to GitHub
- Connect your repository to Vercel
- Add environment variables in Vercel dashboard
- Deploy automatically
The app can be deployed to any platform that supports Next.js:
- Netlify
- Railway
- Docker containers
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
- Next.js team for the amazing framework
- Tailwind CSS for the utility-first approach
- Drizzle team for the excellent ORM
- Neon for the serverless PostgreSQL database