A beautiful, modern job application tracker built with Next.js 15.5, featuring a colorful Clean My Mac-inspired interface with a comprehensive sidebar navigation system. Powered by CodeniWork - your trusted partner in career development.
- Job Application Management - Track applications, companies, and interview progress
- Beautiful Dashboard - Colorful statistics cards with real-time data
- Smart Organization - Categorize by status, priority, and company
- Search & Filter - Find applications quickly with advanced search
- Notes & Tracking - Add detailed notes and follow-up reminders
- Colorful Background - Beautiful gradient backgrounds with floating orbs and animated elements
- Glass Morphism - Modern translucent cards with backdrop blur effects
- Responsive Sidebar - Collapsible navigation with smooth animations
- Clean My Mac Inspired - Colorful, playful interface with smooth transitions
- Dark Mode Ready - Optimized for both light and dark themes
- Next.js 15.5 - Latest React framework with App Router
- TypeScript - Full type safety and better development experience
- Tailwind CSS - Utility-first CSS framework with custom color palette
- shadcn/ui - Beautiful, accessible UI components
- Drizzle ORM - Type-safe database operations
- NextAuth.js - Secure authentication with OAuth providers
- NeonDB - Serverless PostgreSQL database
- Frontend: Next.js 15.5, React 18, TypeScript
- Styling: Tailwind CSS, shadcn/ui components
- Database: NeonDB (PostgreSQL) with Drizzle ORM
- Authentication: NextAuth.js (Google, GitHub OAuth)
- Forms: React Hook Form with Zod validation
- Icons: Lucide React
- Deployment: Vercel-ready
- Node.js 18+
- pnpm (recommended) or npm
- NeonDB account (free tier available)
-
Clone the repository
git clone <your-repo-url> cd codeniwork
-
Install dependencies
pnpm install
-
Set up environment variables
cp env.example .env.local
Fill in your credentials in
.env.local:DATABASE_URL=your_neon_db_connection_string NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=your_random_secret_key GOOGLE_CLIENT_ID=your_google_oauth_client_id GOOGLE_CLIENT_SECRET=your_google_oauth_client_secret GITHUB_ID=your_github_oauth_app_id GITHUB_SECRET=your_github_oauth_app_secret
-
Set up the database
pnpm db:generate pnpm db:push
-
Start the development server
pnpm dev
-
Open your browser Navigate to http://localhost:3000
The application uses a custom color palette inspired by Clean My Mac:
/* Custom colors defined in tailwind.config.js */
success: { 50: '#f0fdf4', 500: '#22c55e', 600: '#16a34a' }
warning: { 50: '#fffbeb', 500: '#f59e0b', 600: '#d97706' }
info: { 50: '#eff6ff', 500: '#3b82f6', 600: '#2563eb' }
purple: { 50: '#faf5ff', 500: '#a855f7', 600: '#9333ea' }
orange: { 50: '#fff7ed', 500: '#f97316', 600: '#ea580c' }
teal: { 50: '#f0fdfa', 500: '#14b8a6', 600: '#0d9488' }The sidebar includes these navigation items:
- Dashboard - Overview and statistics
- Applications - Job applications list
- Companies - Company management
- Calendar - Interview scheduling
- Analytics - Progress tracking
- Documents - Resume and cover letter storage
- Contacts - Network management
- Quick Actions - Common tasks
The application is fully responsive and works on:
- Desktop - Full sidebar with expanded navigation
- Tablet - Collapsible sidebar with touch-friendly interface
- Mobile - Mobile-optimized layout with bottom navigation
- Google - Sign in with Google account
- GitHub - Sign in with GitHub account
- Automatic user creation on first sign-in
- Session management with JWT tokens
- Secure password handling
The application uses a well-structured database schema:
-- Users table for authentication
users (id, email, name, image, created_at)
-- Companies table for organization tracking
companies (id, name, website, industry, created_at)
-- Job applications with full tracking
job_applications (id, user_id, company_id, position, status, priority, ...)
-- Application events for timeline tracking
application_events (id, application_id, event_type, description, date)- Push your code to GitHub
- Connect your repository to Vercel
- Add environment variables in Vercel dashboard
- Deploy automatically on every push
The application can be deployed to any platform that supports Next.js:
- Netlify
- Railway
- DigitalOcean App Platform
- AWS Amplify
pnpm dev # Start development server
pnpm build # Build for production
pnpm start # Start production server
pnpm lint # Run ESLint
pnpm db:generate # Generate database migrations
pnpm db:push # Push schema to database
pnpm db:studio # Open Drizzle Studio├── app/ # Next.js App Router
│ ├── api/ # API routes
│ ├── auth/ # Authentication pages
│ └── globals.css # Global styles
├── components/ # React components
│ ├── ui/ # shadcn/ui components
│ ├── dashboard/ # Dashboard components
│ └── providers/ # Context providers
├── lib/ # Utility functions
│ ├── db/ # Database configuration
│ ├── auth.ts # Authentication config
│ └── utils.ts # Helper functions
└── hooks/ # Custom React hooks
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Clean My Mac - Design inspiration for the colorful interface
- shadcn/ui - Beautiful UI component library
- Next.js Team - Amazing React framework
- Drizzle Team - Type-safe database ORM
If you encounter any issues or have questions:
- Check the Issues page for existing solutions
- Create a new issue with detailed information
- Join our community discussions
Built with ❤️ by CodeniWork using Next.js 15.5 and modern web technologies