Hunting Buddy - Job Application Tracker App

Overview

1. Description
2. Deployment Link
3. Installation
4. Technologies Used
5. Deliverables
6. Planning & Build Process
7. Challenges
8. Wins
9. Key Learnings & Takeaways
10. Future Improvements

---

1. Description

A full-stack job application management platform designed to help users track their job search efficiently.

Built with React, Vite, Node.js, Express, and MongoDB, the app features authentication with hashed passwords, input validation, and session management. Role-based access control distinguishes permissions between standard users and admins.

On the client side, users can manage job applications via a responsive dashboard that includes advanced filtering, sorting, and data visualisation with Recharts. The responsive interface was created using styled-components and includes a light/dark theme toggle.
The backend provides a RESTful API built with Express and Mongoose, supporting full CRUD functionality. Validation and error handling are managed using express-validator and custom middleware. Performance is optimised with React Query for efficient data fetching, along with lazy loading and route-based code splitting.

2. Deployment Link

🔗  https://hunting-buddy.onrender.com

3. Installation

Package Manager: npm (v10.8.1)

• _website
• _{documentation}
• _{GitHub Repository}

Getting Started

1. Ensure Git is installed:

• Before you begin, make sure Git is installed on your machine.

2. Clone the repository:

git clone https://github.com/katieloesch/hunting-buddy.git

3. Navigate to the project directory:

• Navigate into the project directory to install the necessary dependencies:

cd hunting-buddy

Running the Application Locally

1. Install Dependencies

• To install all the required dependencies for both the frontend and backend, run:

  npm run setup-project

2. Set Up Environment Variables

• The application requires a .env file in the root directory to function correctly.

  • This file contains essential environment variables used for database connections, authentication, and image uploads.

  Required Environment Variables:

  NODE_ENV
  PORT
  MONGO_URL
  JWT_SECRET
  JWT_EXPIRES_IN
  CLOUD_NAME
  CLOUD_API_KEY
  CLOUD_API_SECRET
  

  Setting up the .env File:

  1. Create a .env file in the root directory of the project.
  2. Copy the required environment variables listed above into the .env file and assign values to them.

  Example .env File:

  NODE_ENV=development
  PORT=5100
  MONGO_URL=your_mongo_url
  JWT_SECRET=your_jwt_secret
  JWT_EXPIRES_IN=1d
  CLOUD_NAME=your_cloudinary_cloud_name
  CLOUD_API_KEY=your_cloudinary_api_key
  CLOUD_API_SECRET=your_cloudinary_api_secret
  

  3. Replace the placeholder values (your_mongo_url, your_jwt_secret, your_cloudinary_cloud_name, your_cloudinary_api_key, your_jwt_secret) with your actual credentials.

  • MongoDB Setup Instructions:

    • to obtain the MONGO_URL, you need to set up a MongoDB database
    • If you don't have an account already, register on MongoDB Atlas:
      • Visit MongoDB Atlas and sign up for a free account.
      • Create a cluster:
        • Select a cloud provider and a nearby region.
        • Use the free tier (sufficient for development).
      • Create a Database User:
        • Go to Database Access → Add New Database User
        • Set a username and password.
      • Get Your Connection String:
        • Go to Clusters → Connect → Drivers → Copy the URI, e.g.:

        mongodb+srv://<your-username>:<your-password>@cluster0.mongodb.net/<your-database-name>?retryWrites=true&w=majority
        

      • Update the .env file with this URL as follows:

          MONGO_URL=mongodb+srv://<your-username>:<your-password>@atlascluster.ic1x9.mongodb.net/<your-database-name>?retryWrites=true&w=majority
        

  • Cloudinary Setup Instructions:

    • If you don’t have a Cloudinary account:
    • Visit Cloudinary and create a free account.
    • Once signed in, navigate to the Dashboard to find your:
      • Cloud Name
      • API Key
      • API Secret
    • Add these to your .env file as follows:

    CLOUD_NAME=your_cloud_name
    CLOUD_API_KEY=your_api_key
    CLOUD_API_SECRET=your_api_secret
    

3. Start the Development Servers

• With the dependencies installed and .env configured, start both frontend and backend servers concurrently:

  npm run dev

4. Access the Application

• The backend server will be running at http://localhost:5100/ by default, or at the port you specified in the .env file.
• The frontend server will be available at http://localhost:5173/.
  • If the browser doesn't open automatically, navigate manually to http://localhost:5173/

4. Technologies Used

Core Technologies

This application was built using the MERN stack, an open source–centric collection of technologies that uses JavaScript for both the browser and server sides of a web application:

• Frontend
  • React.js (v18.3.1)
    • _{A JavaScript library for building user interfaces, particularly single-page applications where efficient and dynamic rendering of components is crucial.}
    • _website
    • _{GitHub repository}
  • Vite (v5.3.4)
    • _{A frontend build tool that offers fast development and optimized production builds for modern JavaScript projects.}
    • _website
    • _{Github repository}
    • _{npm page}
• Backend
  • Express.js (v4.18.2)
    • _{A fast and minimalist web framework for Node.js, used to build web applications and APIs.}
    • _{npm page}
    • _{GitHub repository}
    • _website
  • Node.js (v20.14.0)
    • _{A JavaScript runtime built on Chrome's V8 JavaScript engine, allowing developers to use JavaScript to build server-side applications with event-driven, non-blocking I/O.}
    • _website
    • _{GitHub Repository}
• Database
  • MongoDB / MongoDB Atlas (v7.0.12)
    • _{MongoDB: a document-oriented NoSQL database designed for scalability and flexibility, making it easy to store and retrieve large volumes of structured and semi-structured data.}
    • _{MongoDB Atlas: a fully managed cloud-based service that hosts and manages MongoDB databases, provided by the creators of MongoDB.}
    • _{MongoDB website}
    • _{MongoDB GitHub Repository}
    • _{MongoDB Atlas website}
  • Mongoose (v7.0.5)
    • _{A MongoDB object modeling tool designed to work in an asynchronous environment, providing schema-based solutions to model data in a MongoDB database.}
    • _{npm page}
    • _{GitHub repository}
    • _website
    • _mongoDB

Key Dependencies - Frontend

• @fortawesome/fontawesome-svg-core (v6.6.0)
  • _{A core package that provides the necessary utilities and functions that underpin the use of FontAwesome icons, ensuring that the icons render correctly across different environments.}
  • _{npm page}
  • _{GitHub repository}
  • _website
• @fortawesome/free-solid-svg-icons (v6.6.0)
  • _{A package that contains the SVG icon definitions for the "solid" style icons provided by FontAwesome, making them available for use in your project.}
  • _{npm page}
  • _{GitHub repository}
  • _website
• @fortawesome/react-fontawesome (v0.2.2)
  • _{A package that provides the React components necessary to use FontAwesome icons in React applications.}
  • _{npm page}
  • _{GitHub repository}
  • _website
• @tanstack/react-query (v4.29.5)
  • _{A library for managing server-side data in React applications, providing features like caching, synchronization, and automatic background updates for fetching and updating data.}
  • _{npm page}
  • _{GitHub repository}
  • _website
• @tanstack/react-query-devtools (v4.29.6)
  • _{A development tool that works alongside react-query, offering a visual interface for inspecting and debugging your data fetching operations in a React application.}
  • _{npm page}
  • _{GitHub repository}
  • _website
• axios (v1.3.6)
  • _{A promise-based HTTP client for Node.js and the browser that simplifies making asynchronous HTTP requests to REST endpoints.}
  • _{npm page}
  • _{GitHub repository}
  • _website
• dayjs (v1.11.7)
  • _{A minimalist JavaScript library for parsing, validating, manipulating, and formatting dates, offering a lightweight and fast alternative to Moment.js.}
  • _{npm page}
  • _{GitHub repository}
  • _website
• react-icons (v4.8.0)
  • _{a free and open-source project providing icons for use in React projects}
  • _{npm page}
  • _{GitHub repository}
  • _website
• react-router-dom (v6.10.0)
  • _{An implementation of react-router that includes additional components for browser-based routing}
  • _{npm page}
  • _{GitHub repository}
  • _website
• react-toastify (v9.1.2)
  • _{A library for displaying customizable toast notifications in React applications, making it easy to show alerts, success messages, and other notifications.}
  • _{npm page}
  • _{GitHub repository}
  • _website
• recharts (v2.5.0)
  • _{A charting library built with React components, enabling developers to create a wide variety of customizable charts and visualizations with ease.}
  • _{npm page}
  • _{GitHub repository}
  • _website
• Sass (v1.77.8)
  • _{CSS preprocessor used for styling the application}
  • _{npm page}
  • _{GitHub repository}
• styled-components (v5.3.10)
  • _{A library for styling React applications using tagged template literals, allowing developers to write CSS directly within JavaScript and create component-scoped styles.}
  • _{npm page}
  • _{GitHub repository}
  • _website

Key Dependencies - Backend

• bcryptjs (v2.4.3)
  • _{A JavaScript library for hashing and comparing passwords securely using the bcrypt algorithm.}
  • _{npm page}
  • _{GitHub repository}
• cloudinary (v1.37.3)
  • _{A cloud-based service that allows you to easily manage, store, and serve images and videos in web applications.}
  • _{npm page}
  • _{GitHub repository}
  • _website
• concurrently (v8.0.1)
  • _{A utility that allows you to run multiple commands or scripts concurrently in one terminal window.}
  • _{npm page}
  • _{GitHub repository}
• cookie-parser (v1.4.6)
  • _{Middleware for parsing cookies attached to client requests, making it easier to access and manage them in Express.js applications.}
  • _{npm page}
  • _{GitHub repository}
• datauri (v4.1.0)
  • _{Converts file data (such as images) to Data URIs, which are base64-encoded strings that can be embedded directly in HTML or CSS.}
  • _{npm page}
  • _{GitHub repository}
• dayjs (v1.11.9)
  • _{A minimalist JavaScript library for parsing, validating, manipulating, and formatting dates, offering a lightweight and fast alternative to Moment.js.}
  • _{npm page}
  • _{GitHub repository}
  • _website
• dotenv (v16.0.3)
  • _{A zero-dependency module that loads environment variables from a .env file into process.env, allowing secure configuration settings management.}
  • _{npm page}
  • _{GitHub repository}
  • _website
• express (v4.18.2)
  • _{A fast and minimalist web framework for Node.js, used to build web applications and APIs.}
  • _{npm page}
  • _{GitHub repository}
  • _website
• express-async-errors (v3.1.1)
  • _{Automatically handles errors in asynchronous Express routes, allowing you to use async/await without needing try-catch blocks.}
  • _{npm page}
  • _{GitHub repository}
• express-mongo-sanitize (v2.2.0)
  • _{Middleware that helps prevent MongoDB Operator Injection by sanitizing user inputs in Express.js applications.}
  • _{npm page}
  • _{GitHub repository}
• express-rate-limit (v6.8.0)
  • _{Middleware for limiting repeated requests to public APIs or endpoints in an Express.js application, useful for preventing abuse and denial-of-service attacks.}
  • _{npm page}
  • _{GitHub repository}
• express-validator (v7.0.1)
  • _{A set of express.js middleware functions that offer a way to validate and sanitise input data, helping to prevent common security vulnerabilities.}
  • _{npm page}
  • _{GitHub repository}
  • _website
• helmet (v7.0.0)
  • _{A collection of middleware functions that enhance the security of Express.js applications by setting various HTTP headers.}
  • _{npm page}
  • _{GitHub repository}
  • _website
• http-status-codes (v2.2.0)
  • _{A utility that provides constants and functions for working with HTTP status codes, making code more readable and maintainable.}
  • _{npm page}
  • _{GitHub repository}
• jsonwebtoken (v9.0.0)
  • _{A library for creating, signing, and verifying JSON Web Tokens (JWTs), which are used for securely transmitting information between parties.}
  • _{npm page}
  • _{GitHub repository}
  • _{website (JsonWebToken implementation for node.js)}
• morgan (v1.10.0)
  • _{A HTTP request logger middleware for Node.js that logs requests made to an Express.js server, useful for debugging and monitoring.}
  • _{npm page}
  • _{GitHub repository}
• mongoose (v7.0.5)
  • _{A MongoDB object modeling tool designed to work in an asynchronous environment, providing schema-based solutions to model data in a MongoDB database.}
  • _{npm page}
  • _{GitHub repository}
  • _website
• multer (v1.4.5-lts.1)
  • _{A middleware for handling multipart/form-data, commonly used for uploading files in Express.js applications.}
  • _{npm page}
  • _{GitHub repository}
• nanoid (v4.0.2)
  • _{A secure, URL-friendly unique string ID generator for use in web applications.}
  • _{npm page}
  • _{GitHub repository}
  • _website
• nodemon (v2.0.22)
  • _{A utility that automatically restarts your Node.js server when files change, making development faster and more efficient.}
  • _{npm page}
  • _{GitHub repository}
  • _website

UI and Design

• Icons

  • Font Awesome
    • _{An icon library offering a large set of scalable and customisable icons, with a free version that is open source.}
    • _website
    • _{GitHub repository}
    • _license
  • React Icons
    • _{A free and open-source project providing icons for use in React projects.}
    • _website
    • _{GitHub repository}
    • _license

• Font

  • Urbanist designed by Corey Hu
    • _{Google Fonts}

• Images

  • Pixabay
    • _{A free stock photo and media platform offering a vast library of images, videos and music.}
    • _website
    • _license
  • iStockPhoto
    • _{A stock content service offering a wide range of photos, illustrations, videos, and audio clips for creative projects.}
    • _website
    • _license
  • Unblast
    • _{A platform that offers a collection of design resources, including templates, mockups, icons and other creative assets for designers and developers.}
    • website
    • license

Deployment

• Render:
  • _{A cloud platform that provides a service for deploying web applications, APIs, databases, and static sites with automatic scaling and Git-based continuous deployment.}
  • _website
  • _{GitHub repository}
  • _{documentation}

Development Tools

• Vite (v5.3.4)
  • _{A frontend build tool that offers fast development and optimized production builds for modern JavaScript projects.}
  • _website
  • _{Github repository}
  • _{npm page}
  • _{documentation}
• Git / GitHub (v2.39.5)
  • _{used for version control and collaboration}
  • _{Git website}
  • _{Git documentation}
  • _{GitHub website}
  • _{GitHub documentation}
• Visual Studio Code (VSCode) (v1.96.4)
  • _{code editor used for development}
  • _website
  • _{GitHub repository}
  • _{documentation}
• Google Chrome & Chrome DevTools (v133.0.6943.54)
  • _{used for testing, debugging, and developing in the browser}
  • _{Google Chrome website}
  • _{Google Chrome documentation}
  • _{Chrome DevTools documentation}
• Excalidraw (v0.17.0)
  • _{tool used to create wireframes for the application}
  • _website
  • _{GitHub repository}
  • _{documentation}
• ChatGPT4o
  • _{generative AI tool used for debugging and development support}
  • _website
  • _{GitHub repository}
• Mockaroo
  • _{web-based tool for quickly and easily generating fake datasets for a variety of purposes, such as testing software, populating databases or creating sample documents}
  • _website

Resources & Tutorials

• Documentation
  • _vite
  • _{react-router: Migrating to RouterProvider}
  • _{TanStack Query}
  • _axios
  • _dayjs
  • _{styled-components}
  • _{React-toastify}
  • _{React useNavigation() and navigation.state}
  • _{MongoDB aggregation pipeline}
  • _Render
• Blogs
  • _{The Power Of CreateBrowserRouter: Optimizing Your React App's Navigation by Daxesh Patel}
  • _{Getting Started with createBrowserRouter in react-router-dom by Pavitra Modi}
• YouTube
  • _{React Router in Depth #3 - Router Provider, createBrowserRouter & Outlet by Net Ninja}
  • _{Javascript Nuggets - FormData API by Coding Addict}
  • _{FormData API - React by Coding Addict Javascript Nuggets - Debounce by Coding Addict}
• Udemy
  • _{MERN 2024 Edition - MongoDB, Express, React and NodeJS by John Smilga}
  • _{The Complete Node.js Developer Course (3rd Edition) by Andrew Mead & Rob Percival}
  • _{React, NodeJS, Express & MongoDB - The MERN Fullstack Guide by Manuel Lorenz & Maximilian Schwarzmüller}
  • _{React - The Complete Guide 2024 (incl. Next.js, Redux) by Maximilian Schwarzmüller}

5. Deliverables

MVP

1. User Authentication
   • Register, login, logout
   • Password hashing and validation
   • Basic session management
2. Job Management
   • Create, read, update, and delete (CRUD) job applications
   • Store job attributes: company, position, status, type, location
   • View all jobs in a list format
3. Role-Based Access
   • Support for standard user and admin roles
   • Protected routes and authorization
4. Dashboard UI
   • Responsive layout with key pages: Add Job, All Jobs, Profile
   • Navigation via sidebar and navbar
5. Form Validation & Error Handling
   • Input validation using express-validator
   • Global error handling middleware
6. Backend API
   • RESTful API with Express and MongoDB (via Mongoose)
   • Controllers and routers organized by feature
7. Frontend Framework
   • React with Vite
   • Styled-components for modular styling
8. Deployment
   • Fully deployed on a public domain

Potential Extra Features / Stretch Goals

• Advanced Data Visualization
  • Interactive charts (e.g. job status breakdown) using Recharts
• Advanced Filtering & Sorting
  • Sort jobs by date, company, position, and status
  • Filter by job type, location, and custom criteria
• Dark Mode Toggle
  • Theme preference persisted via local storage
• Admin Panel
  • Admin-specific tools and access to additional data views
• Pagination
  • Improve performance for users with many job entries
• Demo User Mode
  • Instant access for demo/testing purposes
• Profile Customization
  • Upload profile pictures
• Accessibility Improvements
  • ARIA roles, keyboard navigation, and contrast checks
• React Query Integration
  • Improve data caching and reduce redundant API calls
• Cloudinary Integration
  • Store and manage uploaded images in the cloud
• Rate Limiting & Security
  • Helmet, express-rate-limit, and mongo-sanitize for production hardening

User Stories

Authentication & User Roles

• As a new user, I should be able to register with my details, so I can start managing my job applications.
• As a returning user, I should be able to log in securely, so I can access my dashboard and data.
• As a user, I should remain logged in, so I don’t have to re-enter credentials every time.
• As a user, I should be able to update my profile information, so I can keep my account details accurate.
• As an admin user, I should have privileged access, so I can manage admin-specific views and actions.

Job Management

• As a user, I should be able to add new job applications, so I can keep track of positions I’ve applied for.
• As a user, I should be able to edit job details, so I can update application statuses or correct information.
• As a user, I should be able to delete jobs, so I can remove applications that are no longer relevant.
• As a user, I should be able to view all job applications in a list, so I can get a comprehensive overview.
• As a user, I should be able to filter and sort jobs, so I can easily find and organise my applications.

Analytics & Insights

• As a user, I should be able to view my application statistics so I can monitor my application progress.
• As a user, I should be able to see how many jobs are pending, decline or have an interview scheduled, so I can assess performance.

UI & Performance

• As a user, I should be able to switch between light and dark mode, so I can choose a theme that suits my environment.
• As a user, I should be able to load the application quickly, so I can access features without delay.
• As a user, I should be able to use the app smoothly across different devices, so I can use it on both desktop and mobile.
• As a user, I should be able to see feedback messages, so I know the result of my actions.

6. Planning & Build Process

Wireframe

ERD

7. Challenges

• Implementing secure authentication and differentiating user roles (admin vs user) with proper route protection.
• Adapting to newer routing patterns, especially with loaders and actions, which differed from older implementations.
• Ensuring form validations were enforced both client-side and server-side without redundancy or conflicts.
• Managing state efficiently across nested dashboard components while avoiding prop drilling.

8. Wins

• Implemented full CRUD functionality with a clean, intuitive user interface.
• Developed light/dark theme support with persistent user preferences via local storage and a toggle control.
• Integrated Recharts to visualize job application statistics and insights.
• Utilized styled-components and layout wrappers to create modular, reusable, and maintainable UI components.
• Structured Express backend using controllers, routers, and middleware to ensure clear separation of concerns.
• Enhanced performance with React Query for efficient data fetching, caching, and background refetching.
• Enforced robust validation at both the database and API levels using Express Validator.
• Implemented secure JWT-based authentication to manage user sessions.
• Deployed the application using Render for the backend and MongoDB Atlas for cloud-hosted database services.

9. Key Learnings & Takeaways

• Gained a clear understanding of the advantages of using Vite over Create React App, particularly in terms of build speed and developer experience.
• Recognized the value of design systems: establishing global styles and component wrappers early accelerated development and enhanced visual consistency.
• Developed custom React hooks to abstract repetitive logic and promote code reusability across components.
• Learned the significance of implementing role-based access control for managing user permissions securely and effectively.
• Discovered the power of React Query in improving perceived performance and simplifying async data management.
• Emphasized the importance of centralized error handling, using shared backend middleware and frontend notifications to create a seamless user experience.
• Reinforced the critical role of validation, combining backend checks via express-validator with client-side form validation to ensure data integrity.
• Experienced how routing architecture affects user experience: creating nested routes and layout components in React Router to maintain a clean, scalable structure.

10. Future Improvements

• Accessibility Audits
  • Add keyboard navigation, screen reader support, and ARIA roles for inclusivity.
• Testing Suite
  • Add unit and integration tests using tools like Jest, React Testing Library, and Supertest for backend.
• User Notifications
  • Add email notifications or reminders for follow-ups on pending applications.
• Multitenancy/Teams
  • Enable job tracking across multiple users/teams for collaborative job hunting.