The Ultimate Job Tracker

"A Full-Stack SaaS Architecture for the Modern Career Hunter."

---

🔮 The Vision

This project represents the bridge between Frontend Beauty and Backend Logic. It is a fully functional SaaS (Software as a Service) prototype designed to solve a real-world problem: the chaos of job hunting.

Instead of a static UI, this application implements a Secure Full-Stack Architecture. It features a decoupled client-server model where a React frontend communicates with a robust Node.js API, proving complete mastery of the web development lifecycle.

💎 The "Wow" Factors

Feature	Description
🔐 Iron-Clad Security	Implements JWT (JSON Web Tokens) authentication and Bcrypt password hashing. Your data is locked behind a digital vault.
👥 Multi-User Isolation	A true SaaS architecture. Multiple users can register and login, but the database strictly isolates data—User A never sees User B's jobs.
⚡ Instant CRUD	Create, Read, Update, and Delete operations happen instantly. The UI reflects backend changes in real-time without friction.
🧠 Smart Interceptors	Powered by Axios Interceptors, the frontend automatically injects security tokens into every request, ensuring seamless and secure communication.

---

🛠️ The Arsenal (Tech Stack)

Domain	Tech	Why?
Frontend		App Router & Server Actions.
Backend		Scalable REST API runtime.
Database		Type-safe ORM & Modeling.
Styling		Rapid utility-first design.
Auth		Stateless session management.
Icons		Clean, modern iconography.

---

🏗️ Project Architecture

A Monorepo structure separating the "Brain" (Server) from the "Face" (Client).

JOB-APPLICATION-TRACKER/
├── 📂 client/                  # 🎨 The Frontend (Next.js)
│   ├── 📂 src/app/
│   │   ├── 📂 login/           # Auth Pages
│   │   ├── 📂 register/
│   │   └── page.tsx            # Protected Dashboard
│   ├── 📂 components/          # 🧩 Reusable UI
│   │   ├── JobCard.tsx
│   │   ├── JobForm.tsx
│   │   └── Navbar.tsx
│   ├── 📂 lib/                 # 🔌 API Connectors
│   │   └── axios.ts            # The "Security Guard" (Interceptors)
│   └── 📂 types/               # TypeScript Definitions
│
├── 📂 server/                  # 🧠 The Backend (Node.js)
│   ├── 📂 prisma/              # 🗄️ Database Engine
│   │   ├── dev.db              # SQLite Database
│   │   └── schema.prisma       # Data Models (User + Job)
│   └── server.js               # API Routes & Auth Logic
│
└── .gitignore                  # Security Rules

🧠 Leveling Up: Learning Outcomes

Building this project demonstrated advanced Full-Stack competencies:

• Authentication Flow: Implementing secure Login/Register systems from scratch using Bcrypt and JWT.
• Relational Data Modeling: Using Prisma to link Users to their specific Job Applications (One-to-Many Relationships).
• API Protection: Writing Express Middleware (authenticateToken) to reject unauthorized access to private routes.
• State Management: Handling complex React state for editing, deleting, and updating UI lists dynamically.

🚀 Getting Started

Since this is a Full-Stack app, you need to run the Backend and Frontend simultaneously.

1. Clone the Repository

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

2. Setup the Backend (The Brain)

Open a terminal and run:

cd server
npm install                 # Install dependencies
npx prisma migrate dev      # Create the Database
npx nodemon server.js       # Start the API

Server will run on http://localhost:5000

3. Setup the Frontend (The Face)

Open a new terminal tab and run:

cd client
npm install                 # Install dependencies
npm run dev                 # Start Next.js

App will run on http://localhost:3000

🧑‍💻 Author

Chamika Gayashan

Software Engineer | Sri Lanka

"Code is poetry, and I'm just trying to make it rhyme." 🚀

Last Updated: Sunday, January 18, 2026

---

_{Built with ❤️ and ☕ by Chamika Gayashan. Star this repo if you found it useful! ⭐}