A modern, full-stack job application tracking system built with Next.js 16 and Supabase. Track every application with a clean dashboard, a drag-and-drop kanban, and resume attachments so you always know what’s next.
🌐 Live Demo: jobapplytracker.com
Dark mode assets are included (
public/hero_preview_dark.png,public/kanban_dark.webm,public/apply_detail_dark.webm).
- Email/Password Authentication - Secure sign up and sign in
- Password Reset - Email-based recovery flow
- OAuth Integration - Google and GitHub social login
- Protected Routes - Middleware-based route protection
- Row Level Security - Each user can only access their own data
- CRUD Operations - Create, read, update, and delete applications
- Status Tracking - Track applications through 8 different stages:
- Applied → Test Case → HR Interview → Technical Interview → Management Interview → Offer → Accepted/Rejected
- Kanban Board - Drag and drop applications across stages
- Pin Important Applications - Keep critical applications at the top
- Resume Attachments (PDF) - Upload the exact CV you sent for each application
- Contact Management - Store recruiter and interviewer contact information
- Notes & Cover Letters - Keep detailed notes for each application
- Real-time Search - Instant search across company names and positions
- Multi-filter Support - Filter by status, work type, source, and more
- Sort Options - Sort by date, company name, or status
- URL State Management - Filters persist in URL for easy sharing
- Multi-language Support - English and Turkish translations
- Dynamic Language Switching - Change language without page reload
- Dark/Light Mode - System-aware theme with manual toggle
- Responsive Design - Works seamlessly on desktop, tablet, and mobile
- Modern UI Components - Built with shadcn/ui and Radix primitives
- Toast Notifications - Real-time feedback for user actions
- SEO-first Landing - Marketing homepage at
/
| Technology | Purpose |
|---|---|
| Next.js 16 | React framework with App Router |
| React 19 | UI library with latest features |
| TypeScript | Type-safe development |
| Tailwind CSS 4 | Utility-first styling |
| shadcn/ui | Accessible component library |
| Radix UI | Headless UI primitives |
| Zustand | Lightweight state management |
| React Hook Form | Performant form handling |
| Zod | Schema validation |
| Technology | Purpose |
|---|---|
| Supabase | Backend as a Service |
| PostgreSQL | Relational database |
| Row Level Security | Data isolation per user |
| Supabase Auth | Authentication system |
| Library | Purpose |
|---|---|
| next-intl | Internationalization |
| next-themes | Theme management |
| date-fns | Date formatting |
| nuqs | URL query state |
| Lucide React | Icon library |
| Sonner | Toast notifications |
- Node.js 18+
- npm or yarn
- Supabase account
-
Clone the repository
git clone https://github.com/berkinduz/job-apply-tracker.git cd job-apply-tracker -
Install dependencies
npm install
-
Set up environment variables
Create a
.env.localfile in the root directory:NEXT_PUBLIC_SUPABASE_URL=your_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
-
Set up Supabase database
Run the SQL schema in your Supabase SQL Editor:
# The schema is available in supabase-schema.sql -
Enable resume uploads (optional)
Run the resume storage script in Supabase SQL Editor:
# The script is available in supabase-resume.sql -
Run the development server
npm run dev
-
Open your browser
- Landing: http://localhost:3000
- App: http://localhost:3000/applications
src/
├── app/ # Next.js App Router pages
│ ├── applications/ # Application CRUD pages
│ ├── auth/ # Auth callback handler
│ ├── login/ # Authentication page
│ └── settings/ # User settings
├── components/
│ ├── applications/ # Application-related components
│ ├── layout/ # Header, navigation, theme toggle
│ ├── providers/ # Context providers
│ └── ui/ # shadcn/ui components
├── lib/
│ ├── supabase/ # Supabase client & services
│ └── utils.ts # Utility functions
├── messages/ # i18n translation files
├── store/ # Zustand state management
└── types/ # TypeScript type definitions
-- Applications table
CREATE TABLE applications (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
user_id UUID REFERENCES auth.users(id),
company_name TEXT NOT NULL,
position TEXT NOT NULL,
status TEXT NOT NULL,
work_type TEXT NOT NULL,
-- ... more fields
created_at TIMESTAMPTZ DEFAULT NOW(),
updated_at TIMESTAMPTZ DEFAULT NOW()
);
-- Row Level Security
ALTER TABLE applications ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Users can only see their own applications"
ON applications FOR SELECT
USING (auth.uid() = user_id);As a developer actively searching for new opportunities, I found myself struggling to keep track of all my job applications across different platforms. Spreadsheets felt limiting, and existing tools didn't quite fit my workflow.
This project solves a real problem I faced while also serving as a demonstration of my full-stack development capabilities:
- Modern React Patterns - Server components, streaming, suspense
- Type Safety - End-to-end TypeScript with Zod validation
- Authentication - Implementing secure auth flows with multiple providers
- Database Design - PostgreSQL with proper RLS policies
- State Management - Combining server state with client-side stores
- Internationalization - Building for a global audience
- Responsive Design - Mobile-first approach with Tailwind CSS
- Analytics dashboard with application statistics
- Email reminders for follow-ups
- Calendar integration for interview scheduling
- AI-powered job matching suggestions
- Export data to CSV/PDF
- Browser extension for quick adding
This project is open source and available under the MIT License.
Berkin Duz
- Website: berkinduz.com
- GitHub: @berkinduz
- ☕ Buy me a coffee
If you found this project helpful, please consider giving it a ⭐️