How machadop1407/job-application-tracker works
1. This is a single Next.js full-stack app, not a split frontend/backend system. The App Router drives both the public marketing pages and the authenticated dashboard, while server actions and one auth API route handle the backend behavior.
2. The app is organized around three top-level user surfaces:
- / as the landing page
- /sign-in and /sign-up for authentication
- /dashboard for the actual job-tracking workspace
3. The dashboard is the core product boundary. It renders a Kanban board for a user’s job hunt and is the only place where board data, drag-and-drop, and mutations come together. The board is personalized per user and is expected to be unavailable unless the user is authenticated.
4. Data persistence is MongoDB via Mongoose, with the database connection centralized in lib/db.ts. The model layer in lib/models/ defines the main domain objects:
- Board
- Column
- JobApplication
The relationships are hierarchical: one board contains columns, and columns contain job applications.
5. Authentication uses Better Auth in lib/auth/auth.ts, with a MongoDB adapter so users and sessions live in the same database. The route app/api/auth/[...all]/route.ts exposes the auth endpoints, and lib/auth/auth-client.ts is the client-side integration point for sign-in/sign-up/session state.
6. A key lifecycle hook is automatic board creation on user signup. The auth configuration triggers lib/init-user-board.ts, which initializes the default Kanban structure so every new user gets a ready-to-use board immediately after account creation.
7. Data mutations are handled through server actions in lib/actions/job-applications.ts, not through a separate REST API for the job entities. These actions are responsible for create/update/delete operations, session checks, ownership validation, column/order maintenance, and cache invalidation after changes.
8. The board UI is a client-heavy experience built in components/kanban-board.tsx with dnd-kit. Dragging a job card between columns or within a column updates local state through lib/hooks/useBoards.ts, then persists the change back to MongoDB through the server action layer.
9. The rest of components/ is mostly composition around the board workflow:
- create-job-dialog.tsx for adding jobs
- job-application-card.tsx for displaying each application
- navbar.tsx and sign-out-btn.tsx for authenticated navigation
- image-tabs.tsx and public/hero-images for presentation on the landing page
- components/ui/* as reusable Radix-based primitives
10. The page layer uses a mix of server and client components. app/dashboard/page.tsx is the main server-side data loader, likely fetching the populated board graph and handing it to the board UI. app/layout.tsx, app/globals.css, and app/page.tsx set the global shell and styling for the whole app.
11. Route protection is likely enforced at the edge or middleware layer via proxy.ts, which acts as the boundary around authenticated routes and prevents unauthenticated access to the dashboard flow.
12. scripts/seed.ts is the offline data bootstrap path. It populates sample boards, columns, and job applications for local development or tutorial demos, but it is not part of the runtime request flow.
13. Overall request/data flow is: user signs in through Better Auth, the session gates the dashboard, the dashboard loads a populated board from MongoDB, user interactions update client state in the Kanban UI, and server actions persist those changes back to the database and refresh the UI.
Main entry points: page.tsx Dashboard · job-applications.ts Job actions · kanban-board.tsx Kanban board · layout.tsx App shell
Components 22
App surfaces
Public pages, authentication pages, and the dashboard workspace.
- App shell · Global layout, styles, and top-level page shell.
app/layout.tsx - Landing page · Marketing/home entry point for unauthenticated visitors.
app/page.tsx - Sign in · Sign-in screen for existing users.
app/sign-in/page.tsx - Sign up · Account creation screen for new users.
app/sign-up/page.tsx - Dashboard · Authenticated workspace loader for the personalized Kanban board.
app/dashboard/page.tsx
Runtime flow
Client interaction, server rendering, and route protection.
- Route guard · Protects authenticated routes and blocks unauthorized access.
proxy.ts - Auth API · Better Auth endpoint exposed under the app router.
app/api/auth/[...all]/route.ts - Auth config · Server-side auth setup and session integration.
lib/auth/auth.ts - Auth client · Client integration for sign-in, sign-up, and session state.
lib/auth/auth-client.ts - Seed board · Creates a default board after new account creation.
lib/init-user-board.ts - Board state · Local board state synchronization for drag-and-drop updates.
lib/hooks/useBoards.ts - Job actions · Create, update, delete, ownership checks, ordering, and cache refresh.
lib/actions/job-applications.ts
Data layer
Database connection, models, and persistence/mutation logic.
- DB connect · Central MongoDB connection setup.
lib/db.ts - Board model · Top-level board document in the domain hierarchy.
lib/models/board.ts - Column model · Board columns and their ordering.
lib/models/column.ts - Job model · Individual job application records.
lib/models/job-application.ts - Model index · Central export surface for domain models.
lib/models/index.ts
Shared UI
Reusable components and styling primitives.
- Kanban board · Drag-and-drop board that renders and updates the job hunt workflow.
components/kanban-board.tsx - Navbar · Authenticated navigation shell and sign-out entry.
components/navbar.tsx - Job card · Visual representation of a single application on the board.
components/job-application-card.tsx - Create dialog · Dialog for adding new job applications.
components/create-job-dialog.tsx - UI primitives · Reusable component library for dialogs, forms, buttons, and menus.
components/ui/button.tsx
Connections 29
- App shell → Landing page: renders · Global app shell wraps the public landing page.
- App shell → Sign in: renders · Global app shell wraps the sign-in page.
- App shell → Sign up: renders · Global app shell wraps the sign-up page.
- App shell → Dashboard: renders · Global app shell wraps the authenticated dashboard.
- Route guard → Dashboard: protects · Blocks unauthenticated access to the dashboard route.
- Auth API → Auth config: implements · Route handler exposes Better Auth behavior.
- Auth client → Auth config: uses · Client calls into the auth system for session and credentials flow.
- Auth config → Seed board: triggers · New signup initializes the default user board.
- Auth config → DB connect: stores in · Auth data and sessions use the shared MongoDB connection.
- Seed board → Board model: creates · Seed hook creates the initial board document.
- Seed board → Column model: creates · Seed hook creates the default column structure.
- Dashboard → DB connect: loads · Server page fetches the authenticated board data.
- Dashboard → Board model: queries · Board is loaded as the primary workspace entity.
- Dashboard → Column model: queries · Populated columns are part of the dashboard load.
- Dashboard → Job model: queries · Job applications are loaded into the board view.
- Dashboard → Kanban board: passes data · Server-rendered board state is handed to the client board UI.
- Kanban board → Board state: syncs state · Drag-and-drop interactions update local board state.
- Kanban board → Job card: composes · Board renders individual application cards.
- Kanban board → Create dialog: opens · Board uses the create dialog for new jobs.
- Kanban board → Job actions: mutates via · Client persists changes through server actions.
- Board state → Job actions: persists · Local reorder and move operations are saved server-side.
- Job actions → DB connect: writes · Server actions persist changes to MongoDB.
- Job actions → Board model: updates · Board ownership and structure are enforced during mutations.
- Job actions → Column model: updates · Column ordering and placement are maintained.
- Job actions → Job model: updates · Job applications are created, edited, moved, and deleted.
- Navbar → Auth client: reads session · Navigation reflects authentication state and sign-out.
- Navbar → UI primitives: uses · Navbar is built from shared UI primitives.
- Job card → UI primitives: uses · Cards rely on shared presentation primitives.
- Create dialog → UI primitives: uses · Dialog and form controls are built from shared primitives.