APPLYTRACK — Job Application Tracker

A modern, full-stack application designed to help users track their job applications through a clean, intuitive Kanban-style board. Built with the Next.js App Router, this project leverages server-side rendering, server actions, and a robust backend to provide a seamless user experience.

Live Demo

https://job-application-tracker-chi-opal.vercel.app/

Features

• User Authentication: Secure sign-up and sign-in functionality using email and password.
• Kanban Board: A drag-and-drop interface to manage job applications across different stages (e.g., "Applied", "Interviewing", "Offer").
• CRUD Operations: Create, read, update, and delete job applications.
• Responsive Design: A mobile-first and fully responsive layout built with Tailwind CSS.
• Server-Side Logic: Efficient data fetching and mutations handled by Next.js Server Actions.
• Database Integration: MongoDB for persistent data storage, connected via Mongoose.

Tech Stack

• Framework: Next.js (App Router)
• Language: TypeScript
• Authentication: Better Auth
• Database: MongoDB with Mongoose
• Styling: Tailwind CSS
• UI Components: Shadcn/UI
• Drag & Drop: Dnd Kit
• Icons: Lucide React

Folder Structure

The project follows a feature-colocated structure within the app directory, promoting scalability and maintainability.

job-application-tracker/
├── app/
│   ├── (auth)/         # Route group for authentication pages
│   │   ├── sign-in/
│   │   └── sign-up/
│   ├── dashboard/      # Main application dashboard with the Kanban board
│   ├── api/            # API routes, including auth endpoints
│   ├── layout.tsx      # Root layout
│   └── page.tsx        # Landing/home page
├── components/
│   ├── ui/             # Reusable UI components from Shadcn/UI
│   └── *.tsx           # Application-specific components
├── lib/
│   ├── actions/        # Next.js Server Actions for data mutations
│   ├── auth/           # Authentication configuration and client setup
│   ├── hooks/          # Custom React hooks
│   ├── models/         # Mongoose schemas for database models
│   └── *.ts            # Utility functions and database connection
├── public/             # Static assets
└── scripts/            # Scripts for database seeding, etc.

Getting Started

Follow these steps to set up and run the project locally.

Prerequisites

• Node.js (v18 or later)
• pnpm (or npm/yarn)
• A MongoDB database (local or cloud-hosted via MongoDB Atlas)

1. Clone the Repository

git clone https://github.com/your-username/job-application-tracker.git
cd job-application-tracker

2. Install Dependencies

pnpm install

3. Set Up Environment Variables

Create a .env.local file in the root of the project and add the following variables.

# MongoDB Connection String
MONGODB_URI="your_mongodb_connection_string"

# Better Auth Secret (generate a secure random string)
# openssl rand -base64 32
BETTER_AUTH_SECRET="your_auth_secret"

# The base URL of your application for local development
BETTER_AUTH_URL="http://localhost:3000"
NEXT_PUBLIC_BETTER_AUTH_URL="http://localhost:3000"

4. Run the Development Server

pnpm dev

The application will be available at http://localhost:3000.