Job Search Assistant
Overview#
Job Search Assistant is a comprehensive application tracking system designed to help job seekers organize their search, track progress, and never miss an opportunity. Built with Next.js 16, MongoDB, and Clerk, the application combines powerful functionality with an intuitive, modern interface.
Key Features#
🎯 Visual Kanban Board#
A drag-and-drop Kanban board provides instant overview of all applications across six stages: Applied, Screening, Interview, Offer, Rejected, and On Hold. Color-coded columns and smart organization make it easy to see where each application stands.
📊 Smart Dashboard#
The dashboard prioritizes what matters most:
- Next Tasks with intelligent deadline color-coding (overdue, due soon, normal)
- Recent Documents for quick access to CVs and cover letters
- Statistics showing total applications, active processes, and success rate
💼 Complete Job Management#
Each job application includes:
- Overview with all essential information
- Notes for personal observations and interview prep
- Tasks with deadline tracking and priority indicators
- Files for storing CVs, cover letters, and related documents
- Contacts for recruiters and hiring managers
- Timeline showing complete history of all changes
📁 Document Management#
Organized document system with:
- Stats cards showing document counts by type
- Real-time search and filter functionality
- Modern grid layout with type-specific icons
- Drag-and-drop file upload
💾 Data Portability#
Full CSV export and import functionality with:
- Comprehensive help system with accordion tabs
- Visual guides for Excel sheet creation
- Column format documentation
- Tips and best practices
Technical Implementation#
Architecture#
The application uses Next.js 16's App Router with Server Components and Server Actions for optimal performance:
- Server Actions for all CRUD operations (no API routes needed)
- MongoDB with Mongoose for flexible NoSQL data modeling
- Clerk for secure authentication and user management
- Zod for schema validation on both client and server
Database Design#
Eight Mongoose schemas provide comprehensive data modeling:
- User - User profiles and preferences
- Job - Job applications with all details
- Task - Deadline tracking and priorities
- Note - Personal observations and notes
- Document - File metadata and storage
- Event - Timeline and history tracking
- Contact - Recruiter and hiring manager information
- Analytics - Application statistics and insights
Styling System#
- Tailwind CSS 4 for utility-first styling
- CSS Variables for theme consistency
- 8px Grid System for consistent spacing
- WCAG AA Compliant with 4.5:1 contrast ratio
State Management#
- React Hook Form for performant form handling
- @dnd-kit for modern drag-and-drop
- date-fns for date manipulation
- Zod for runtime validation
Challenges & Solutions#
Challenge: Text Contrast in Light Mode#
Problem: Initial design looked great in dark mode but text was too light to read comfortably in light mode.
Solution: Implemented theme-aware color system with darker colors (gray-900, gray-800) for light mode and lighter colors (gray-100, gray-200) for dark mode. Achieved WCAG AA compliance throughout.
Challenge: Kanban Board Layout#
Problem: The board looked cramped on the dashboard with stats taking up too much space.
Solution: Created flexible layout system where the board can show stats inline on the /jobs page but hide them on the dashboard, using an 8/12 + 4/12 grid for perfect balance.
Challenge: Hydration Errors#
Problem: Server-rendered HTML didn't match client-side React, causing hydration mismatches in the Kanban board.
Solution: Added suppressHydrationWarning to the Kanban board container and ensured consistent rendering between server and client.
Challenge: Drag-and-Drop UX#
Problem: Users didn't know what elements they could drag in the Kanban board.
Solution: Added clear drag handle (⋮⋮) with cursor changes, hover states, and visual feedback during drag operations.
Results#
- ✅ Production-ready MVP with 40+ features
- ✅ 100% TypeScript coverage for type safety
- ✅ WCAG AA compliant for accessibility
- ✅ Fully responsive on all devices
- ✅ Perfect light/dark mode support
- ✅ Comprehensive documentation (15+ markdown files)
Future Improvements#
- 🔄 iCal feed for interview scheduling
- 📧 Email notifications for deadlines
- 📊 Advanced analytics dashboard
- 🌐 Multi-language support (Norwegian/English)
- 🤖 AI-driven job matching suggestions
- 📱 PWA support for offline access
Learnings#
This project provided valuable experience with:
- Next.js 16 App Router and Server Components
- Server Actions as a replacement for API routes
- MongoDB with Mongoose for NoSQL data modeling
- Clerk for seamless authentication
- Accessibility and WCAG compliance
- Theme systems with CSS variables
- User-centered design and iterative improvement
The journey from gray prototype to polished product taught me the importance of:
- Starting simple and iterating based on feedback
- Testing in both light and dark modes
- Prioritizing accessibility from the start
- Writing comprehensive documentation
- Listening to actual users
The application is live and production-ready. Try it at application-manager-v2.vercel.app