Job Tracker

Job Tracker is a full-stack application for managing job applications, built with a Spring Boot backend and a React + Vite frontend. The goal of the project is to help users keep track of submitted applications, monitor their status, and manage their job search data through a simple and clean interface.

1. Overview

What the application does

• allows users to register and log in
• allows users to add, edit, and delete job applications
• displays a dashboard with general statistics
• provides a simple and modern user experience for career management

High-level architecture

The project is divided into two main parts:

• backend: a Spring Boot application exposing a REST API
• frontend: a React application communicating with the backend through Axios

2. Demo

Watch the application in action:

3. Project structure

jobtracker/
├── backend/
│   ├── src/main/java/com/toni/jobtracker
│   │   ├── config/
│   │   ├── controller/
│   │   ├── dto/
│   │   ├── entity/
│   │   ├── exception/
│   │   ├── mapper/
│   │   ├── repository/
│   │   ├── service/
│   │   └── util/
│   ├── src/main/resources/
│   └── src/test/java/
├── frontend/
│   ├── src/
│   │   ├── api/
│   │   ├── components/
│   │   ├── layouts/
│   │   ├── pages/
│   │   ├── services/
│   │   └── styles.css
│   └── cypress/
└── .github/workflows/

4. Backend

Technologies used

• Java 25
• Spring Boot 4.1.0
• Spring Web MVC
• Spring Data JPA
• Validation
• Maven
• PostgreSQL

Backend architecture

The backend follows a typical layered structure:

• controller: handles HTTP requests
• service: contains the business logic
• repository: manages database access
• entity: JPA data models
• dto: objects used for data transfer
• mapper: transforms between entities and DTOs
• exception: handles application errors

Main components

Controllers

• AuthController: handles login and registration
• DashboardController: exposes dashboard data
• JobApplicationController: manages job applications

Services

• AuthService: authentication and registration logic
• DashboardService: aggregates data for the dashboard
• JobApplicationService: CRUD operations for applications

Entities

• User: represents a user account
• JobApplication: represents a job application entry

DTOs

• request/: objects received from the client
• response/: objects returned in API responses

Mappers

• UserMapper: transforms between User entities and DTOs
• JobApplicationMapper: transforms between JobApplication entities and DTOs

Data model

A user can have multiple job applications. The relationship is:

• User 1 -> N JobApplication

Design patterns used

• Layered Architecture
• DTO pattern to separate the internal model from the API contract
• Mapper pattern for entity/DTO transformations
• Repository pattern through Spring Data JPA
• Centralized exception handling through GlobalExceptionHandler

5. Frontend

Technologies used

• React 19
• Vite
• React Router DOM
• Axios
• Custom CSS
• Cypress for end-to-end testing

Frontend architecture

The frontend is built modularly, with separate pages, reusable components, and services for communicating with the API.

Main structure

Pages

• Login: authentication form
• Register: registration form
• Dashboard: displays summary statistics
• Applications: lists existing applications
• CreateApplication: adds a new application
• EditApplication: edits an existing application
• NotFound: fallback page for invalid routes

Components

• Navbar: main application navigation

Layouts

• MainLayout: shared app shell with navbar, content area, and footer

Services

• authService: authentication API calls
• applicationService: job application API calls

API layer

• axios.js: centralized Axios instance for all backend requests

Design patterns used

• Component-based architecture
• Route-based navigation
• Service layer for API calls
• Separation of concerns between pages, layout, and services

6. Application flows

Registration flow

1. the user opens the registration page
2. fills in their name, email, and password
3. the frontend sends the data to /auth/register
4. the backend creates the user account
5. the user is redirected to the login page

Authentication flow

1. the user opens the login page
2. submits their email and password
3. the backend validates the credentials
4. on success, the user is redirected to the dashboard

Application management flow

1. the user views the list of applications
2. can add, edit, or delete an application
3. the data is synchronized with the backend through REST endpoints

7. Testing

Backend tests

Backend tests are located in:

• src/test/java/com/toni/jobtracker/service
• src/test/java/com/toni/jobtracker/mapper

Frontend E2E tests

End-to-end tests are located in:

• cypress/e2e/app-flow.cy.js

8. CI/CD

The project includes a GitHub Actions workflow in .github/workflows/ci.yml that:

• runs backend tests
• builds the backend application
• installs frontend dependencies
• builds the frontend application

8. Running the project

Requirements

• Java 25
• Maven
• Node.js 22+
• PostgreSQL

Backend

cd backend
./mvnw spring-boot:run

Frontend

cd frontend
npm install
npm run dev

Backend tests

cd backend
./mvnw test

Frontend tests

cd frontend
npx cypress run

9. Running with Docker

The project includes Docker support for the frontend, backend, and PostgreSQL database.

Requirements

• Docker
• Docker Compose

Start the application

From the project root directory, run:

docker compose up --build

This command will:

• build the backend image
• build the frontend image
• start a PostgreSQL container
• create the required Docker network
• start all services

Once the containers are running, the application will be available at:

Service	URL
Frontend	http://localhost:5173
Backend API	http://localhost:8080
PostgreSQL	localhost:5432

Stop the application

To stop all running containers:

docker compose down

To stop the containers and remove the database volume:

docker compose down -v

10. Docker Architecture

                +------------------+
                |     Frontend     |
                |   React + Vite   |
                +--------+---------+
                         |
                    HTTP REST
                         |
                         ▼
                +------------------+
                |     Backend      |
                |   Spring Boot    |
                +--------+---------+
                         |
                    Spring Data JPA
                         |
                         ▼
                +------------------+
                |    PostgreSQL    |
                +------------------+

11. Configuration

Application configuration is stored in:

• backend/src/main/resources/application.properties
• frontend/src/api/axios.js

A local PostgreSQL server is recommended, and the backend database URL should be updated accordingly.

12. Design notes

• the application is built to be easy to understand and extend
• it clearly separates business logic from presentation logic
• it uses a simple but modular frontend structure
• it is ready for future enhancements such as stronger authentication, pagination, or filtering

13. Conclusion

Job Tracker is a full-stack example project with a clear architecture, separation between frontend and backend, automated testing, and CI workflow support. It is suitable for learning, demos, and future extensions.