Building a Job Board Website

A COMPLETE, STEP-BY-STEP GUIDE

Building a Job Board

Website
From the first conversation with the client — all the way to a live site on the
internet

A step-by-step build guide · page 1

 Building a Job Board Website

Welcome — Read This First

This guide takes you through building a full website the same way professional
software teams do it — one calm stage at a time. You are building a job board
(think Fuzu or Indeed): a place where job seekers find and apply for jobs, and
employers post openings and review applicants. We will use that as our running
example throughout, so every concept is concrete.
The golden rule of software is simple: think first, build second. Most projects fail not
because the code was hard, but because someone started coding before they
understood what they were building. Each stage below produces something — a
document, a diagram, a design — that makes the next stage easier. Do not skip
stages, and resist the urge to jump straight to code. The planning is the project.

HOW TO USE THIS GUIDE

Work through the eight stages in order. Each stage has the same shape, so you
always know where you are:
• Why this stage matters — the purpose, in plain language.
• What to do — the concrete steps.
• Tools you can use — including how to lean on AI tools like Claude and Lovable.
• Deliverable — the one thing you should have finished before moving on.

Before you begin: your toolkit

Install these once, up front. Don't worry about mastering them — you'll learn them
as you go.

Tool What it's for

VS Code Your code editor — where you'll write everything.

Runs JavaScript outside the browser; powers your backend and

[Link] (LTS)
build tools.

Git + GitHub Saves versions of your work and backs it up online. Commit often.

A browser +
Chrome or Firefox, for testing and debugging your site.
DevTools

Your thinking partner — for planning, requirements, naming, and

Claude
explaining code.

Lovable / Figma For designing and visualizing the interface before you build it.

A NOTE FROM YOUR MENTOR

You don't need to know everything before you start — nobody does. You need to
know the next step. This guide always tells you the next step. Build a little, test it,

A step-by-step build guide · page 2

 Building a Job Board Website

Tool What it's for

save it, repeat. That rhythm is the whole job.

A step-by-step build guide · page 3

 Building a Job Board Website

What's Inside
TOC \h \o "1-2"HYPERLINK "" \l "_Toc233038892"Welcome — Read This First............
PAGEREF _Toc233038892 \h 2
Before you begin: your toolkit................................................................................. 2
Stage 1 · Project Realization....................................................................................... 6
What to do............................................................................................................... 6
Stage 2 · Blueprinting (Requirements)....................................................................... 8
Step 2.1 — Gather requirements............................................................................. 8
Step 2.2 — Map the As-Is process........................................................................... 8
Step 2.3 — Map the To-Be process.......................................................................... 9
Step 2.4 — Define the data (entities)...................................................................... 9
Stage 3 · System Design (UI / UX)............................................................................ 11
Step 3.1 — List the pages (information architecture)............................................ 11
Step 3.2 — Sketch low-fidelity wireframes............................................................ 11
Step 3.3 — Design the real UI............................................................................... 11
Stage 4 · Architecture (The Big Picture)................................................................... 13
How the pieces talk............................................................................................... 13
Choosing the technology stack............................................................................. 13
Stage 5 · Frontend Architecture............................................................................... 15
Step 5.1 — Project structure................................................................................. 15
Step 5.2 — Libraries and what each does............................................................. 15
Step 5.3 — State management with Zustand........................................................ 16
Step 5.4 — Talking to the backend (Axios)............................................................ 16
Stage 6 · Backend Architecture................................................................................ 18
Step 6.1 — The MVC structure.............................................................................. 18
Step 6.2 — The database schema with Prisma...................................................... 18
Step 6.3 — A controller, end to end...................................................................... 19
Step 6.4 — Security (do not skip this)................................................................... 20
Step 6.5 — Performance: caching & data structures ............................................. 20
Stage 7 · Connect, Test & Refine.............................................................................. 21
Step 7.1 — Integrate frontend and backend......................................................... 21
Step 7.2 — Test the real journeys......................................................................... 21
Stage 8 · Deployment & Hosting.............................................................................. 22
Step 8.1 — Prepare for production........................................................................ 22
Step 8.2 — Where to host each piece................................................................... 22
Step 8.3 — Go live, step by step........................................................................... 22

A step-by-step build guide · page 4

 Building a Job Board Website

The Whole Journey at a Glance................................................................................. 24

Five things that separate finishers from quitters................................................... 24

A step-by-step build guide · page 5

 Building a Job Board Website

Stage 1 · Project Realization

This is the discovery stage — you sit down with the client and figure out what they
actually want. Not what you assume, not what's easy to build: what they want,
and just as importantly, why. Everything else in the project rests on getting this
right.

WHY THIS STAGE MATTERS

A client rarely hands you a perfect spec. They hand you a wish (“I want a site where
people find jobs”). Your job is to turn that wish into clear, shared understanding
before a single line of code exists. Misunderstanding here is the most expensive
mistake in the whole project — it multiplies through every later stage.

What to do
1. Hold a discovery meeting. Sit with the client. Ask open questions and let
them talk. Record or take careful notes.
2. Understand the problem, not just the request. Ask: who are the users?
What are they struggling with today? What does success look like for you?
3. Define the core users. For a job board there are usually three: the job
seeker, the employer/recruiter, and the admin who keeps the platform
healthy.
4. Agree on scope. Write down what the first version will and will not include. A
small site that ships beats a huge one that never finishes.
5. Confirm constraints. Budget, deadline, must-use technologies, branding, who
hosts it.

Good discovery questions to bring

• Who will use this, and what's the very first thing they'll want to do on it?
• Walk me through how you handle this today, without a website.
• If the site could do only three things, which three matter most?
• How will we know it's working? More applications? Faster hiring?
• Are there sites you love (or hate)? What about them?

USE CLAUDE HERE

Paste your raw meeting notes into Claude and ask it to (1) summarize the client's
goals, (2) list the user types and what each one needs, and (3) flag anything that's
vague or contradictory so you can go back and clarify. It turns messy notes into a
clean starting point in seconds.

DELIVERABLE FOR STAGE 1

A step-by-step build guide · page 6

 Building a Job Board Website

A short Project Brief (one page is fine): the problem, the users, the goals, the agreed
scope for version 1, and the constraints. Send it to the client and get a “yes, that's
right” before moving on.

A step-by-step build guide · page 7

 Building a Job Board Website

Stage 2 · Blueprinting (Requirements)

Now you document the whole system. Blueprinting is where the fuzzy idea becomes
a precise plan: requirements, the As-Is process (how things work today), the To-
Be process (how they'll work with your site), and flowcharts so everyone can see
the system before it exists.

Step 2.1 — Gather requirements

Requirements come in two flavours. Write both as short, testable statements.

Type Meaning & examples (job board)

What the system must DO. “A seeker can search jobs by title and
Functional location.” “An employer can post a job.” “An applicant can track
application status.”

Qualities it must have. Pages load in under 3 seconds. Passwords

Non-functional
are hashed. Works on mobile. Handles 1,000 users.
Write functional requirements as user stories — they keep you focused on the
person, not the feature:

As a job seeker, I want to filter jobs by location

so that I only see roles I can realistically take.

As an employer, I want to see all applicants for a job

so that I can shortlist the best ones quickly.

Step 2.2 — Map the As-Is process

The As-Is process is how people solve the problem today, without your site.
Documenting it exposes the exact pain points your site will remove — and those
become your strongest features.

As-Is: the scattered, repetitive experience a job seeker has today.

A step-by-step build guide · page 8

 Building a Job Board Website

Step 2.3 — Map the To-Be process

The To-Be process is the smooth journey your site creates. Map it for each user
type. This is your product, drawn as a flow before it's built.

To-Be: clean parallel journeys for the seeker and the employer, meeting at the application.

WHY FLOWCHARTS MATTER

A flowchart is a shared picture. The client, you, and (later) any teammate all look at
the same diagram and agree “yes, that's the flow.” Catching a wrong arrow on a
diagram takes a minute; catching it in built code takes days. Draw the flow, then
build the flow.
Tools: [Link] (free), Whimsical, or Figma. Or describe the steps to Claude and ask it
to produce Mermaid flowchart syntax you can paste straight into [Link] or Notion.

Step 2.4 — Define the data (entities)

List the main “things” your system stores and how they relate. This early sketch
becomes your database later. For a job board:

Entity Key fields & relationships

User id, name, email, password (hashed), role (seeker / employer / admin)

Profile belongs to a User; headline, bio, skills, CV file, location

Company owned by an employer User; name, logo, description, website

Job belongs to a Company; title, description, location, salary, type, status

links a User (seeker) to a Job; status (applied / shortlisted / rejected),

Application
CV, date
Notice the relationships: a Company has many Jobs; a Job has many Applications;
a seeker has many Applications. Spotting these now makes the database design in
Stage 6 almost automatic.

A step-by-step build guide · page 9

 Building a Job Board Website

DELIVERABLE FOR STAGE 2

A requirements document containing: the functional & non-functional requirements,
the As-Is and To-Be flowcharts, and the entity list. This is the blueprint the whole
build follows.

A step-by-step build guide · page 10

 Building a Job Board Website

Stage 3 · System Design (UI / UX)

With the blueprint in hand, you now design how the system looks and feels. You
already know what it must do — design is deciding how the user moves through it:
the pages, the layout, the navigation, and the visual style.

Step 3.1 — List the pages (information architecture)

Before designing screens, list every page and how they link together. For the job
board:

Page Purpose
Home / Landing Hero, search bar, featured jobs, sign-up calls to action.

Jobs listing Searchable, filterable list of job cards.

Job detail Full description + the Apply button.

Auth (login / register) Separate flows for seekers and employers.

Seeker dashboard Profile, saved jobs, application tracker.

Employer dashboard Post a job, view jobs, review applicants.

Admin panel Manage users, jobs, and reported content.

Step 3.2 — Sketch low-fidelity wireframes

Start rough. A wireframe is a grey-box sketch — no colours, no real text — that
decides where things go: where's the search bar, where's the menu, what's a card.
Pen and paper is perfectly fine here. The goal is layout, not beauty.

Step 3.3 — Design the real UI

Now make it beautiful and consistent. Decide your design system: a small colour
palette, one or two fonts, button styles, spacing. Consistency is what makes a site
feel professional.

USE CLAUDE + LOVABLE TOGETHER

1. Ask Claude to gather the design requirements: “For a job board, list the
components I need (navbar, job card, filter sidebar, application form…), the pages,
and a sensible colour palette and typography for a friendly, trustworthy feel.”
2. Take that component list into Lovable (or v0 / Figma) and generate the actual UI.
Lovable turns a written description into a working React interface you can refine by
chatting with it.
3. Bring anything confusing back to Claude to explain. You design faster when you
understand what the tools produced.

A step-by-step build guide · page 11

 Building a Job Board Website

Identify reusable components

Good UIs are built from small, repeated pieces. Spot them now — you'll build each
once and reuse it everywhere:
• Navbar, Footer — on every page.
• JobCard — the little job preview, reused across listings, search, and the
dashboard.
• Button, Input, Modal, Badge — your basic building blocks.
• FilterSidebar, SearchBar, ApplicationForm — feature pieces.

DELIVERABLE FOR STAGE 3

A page list, wireframes for the key screens, a defined design system (colours, fonts,
components), and high-fidelity designs (from Lovable/Figma) for at least the home,
jobs, and dashboard pages. Document it so the build stage is just translation, not
invention.

A step-by-step build guide · page 12

 Building a Job Board Website

Stage 4 · Architecture (The Big Picture)

Architecture is the high-level plan of how the parts of the system fit together.
A website like this uses client–server architecture: a frontend the user sees in
their browser, a backend that does the work, and a database that stores everything.

The three tiers, plus the helper services the backend talks to.

How the pieces talk

6. The frontend (React, in the browser) shows the UI and sends requests.
7. The backend (Node + Express) receives requests, applies the rules, and replies
with data as JSON.
8. The database (PostgreSQL) stores the data; only the backend is allowed to
touch it.

THE ONE RULE TO REMEMBER

The browser never talks to the database directly. It always goes through the
backend API. The API is the gatekeeper that checks “are you allowed to do this?”
before anything touches the data. This is the foundation of security.

Choosing the technology stack

Here's a clean, beginner-friendly, industry-standard stack for this project:

Layer Technology (and why)

React + Vite — the most popular UI library; Vite makes it fast to

Frontend
develop.

A step-by-step build guide · page 13

 Building a Job Board Website

Layer Technology (and why)

State Zustand — simple, lightweight way to share data across components.

HTTP Axios — clean way to call your backend API.

Styling Tailwind CSS or Material UI — consistent, fast styling.

[Link] + Express — JavaScript on the server; same language as the

Backend
frontend.

Database PostgreSQL — a reliable, powerful SQL database.

Prisma — lets you work with the database in clean JavaScript, not raw
ORM
SQL.

Auth JWT (JSON Web Tokens) — secure login sessions.

WHY ONE LANGUAGE EVERYWHERE HELPS

Using JavaScript on both the frontend (React) and backend (Node) means you only
master one language. Your brain switches contexts less, and you can even share
validation logic between the two sides.

DELIVERABLE FOR STAGE 4

An architecture diagram and a one-page “tech stack” decision sheet listing each
technology and a sentence on why you chose it. Now you know what you're building
with before you build.

A step-by-step build guide · page 14

 Building a Job Board Website

Stage 5 · Frontend Architecture

Start with the frontend because it's the most visual and motivating part to see
working. Here you decide how the React app is organized — its folders, its
libraries, and how data flows through it.

Step 5.1 — Project structure

A tidy folder structure keeps a growing app from becoming chaos. Here's a clean,
scalable layout:

Each folder has one job. When you need to change something, you know exactly where it lives.

src/
components/ reusable UI pieces (JobCard, Navbar, Button)
pages/ full screens tied to routes (Home, Jobs, Login)
store/ Zustand stores ([Link], [Link])
services/ axios calls to the backend ([Link], [Link])
hooks/ custom React hooks (useAuth, useDebounce)
utils/ small helpers (formatDate, validators)
routes/ route definitions + protected routes
[Link] wires it all together
[Link] the entry point

Step 5.2 — Libraries and what each does

Library Role in your app
React Router Moves between pages without reloading (Home → Job detail).

Holds shared state (logged-in user, current filters) any

Zustand
component can read.

A step-by-step build guide · page 15

 Building a Job Board Website

Library Role in your app

Axios Sends requests to your backend and returns the data.

React Query (optional) Caches server data and handles loading/error states for you.

Tailwind / MUI Styling — consistent look with less custom CSS.

React Hook Form Makes forms (login, post a job) easy to build and validate.

Step 5.3 — State management with Zustand

“State” is just data that changes — who's logged in, what's in the search box, the
list of jobs. Zustand lets you keep that data in one place (a “store”) so any
component can use it without passing props through every layer. A tiny auth store
looks like this:

import { create } from 'zustand';

export const useAuthStore = create((set) => ({

user: null,
setUser: (user) => set({ user }),
logout: () => set({ user: null }),
}));

// In any component:
const user = useAuthStore((s) => [Link]);

Step 5.4 — Talking to the backend (Axios)

Keep all API calls in the services/ folder, not scattered in components. Configure
axios once with your backend URL and reuse it:

// services/[Link]
import axios from 'axios';
export const api = [Link]({
baseURL: [Link].VITE_API_URL, // e.g. [Link]
});

// services/[Link]
import { api } from './api';
export const getJobs = (filters) => [Link]('/jobs', { params: filters });
export const applyToJob = (jobId, data) => [Link](`/jobs/${jobId}/apply`, data);

PRO TIPS FOR THE FRONTEND

• Build the small components first (Button, JobCard), then assemble pages from
them.
• Protect private pages: a route guard sends logged-out users to the login page.
• Always show loading and error states — never a blank screen while data loads.
• Use environment variables (VITE_API_URL) so you never hard-code the server
address.

A step-by-step build guide · page 16

 Building a Job Board Website

DELIVERABLE FOR STAGE 5

A running React app with the folder structure in place, navigation working between
pages, your design system applied, and the key pages rendering with placeholder
data. It won't be connected to real data yet — that's Stage 6.

A step-by-step build guide · page 17

 Building a Job Board Website

Stage 6 · Backend Architecture

The backend is the engine room. Here you structure the server using the MVC
pattern (Models, Controllers, Routes), connect the database with an ORM, and add
the things that make an app real: validation, security, caching, and good data
modelling.

Step 6.1 — The MVC structure

MVC keeps your code organized by separating three concerns. A request flows
through them in order:

Route → middleware → controller → model → database, and the JSON response back.

Layer Responsibility
Routes Map a URL to a controller. “GET /api/jobs goes to getJobs.”

Controllers The logic: read the request, call the model, send the response.

Models The data shape and database access (via Prisma).

Middleware Runs before controllers: check login, validate input, log requests.

Services (optional) Reusable business logic shared by controllers (email, payments).

server/
routes/ [Link], [Link], [Link]
controllers/ [Link], [Link]
middleware/ [Link], [Link], [Link]
models/ (Prisma schema, or model files)
config/ db connection, env config
utils/ helpers (hashing, tokens)
[Link] creates the Express app
[Link] starts it listening

Step 6.2 — The database schema with Prisma

A step-by-step build guide · page 18

 Building a Job Board Website

Prisma is an ORM (Object–Relational Mapper) — it lets you describe your tables in

one clean schema file and then work with them as JavaScript objects instead of
writing raw SQL. Remember the entities from Stage 2? They become this:

model User {
id Int @id @default(autoincrement())
name String
email String @unique
password String
role Role @default(SEEKER)
applications Application[]
}

model Job {
id Int @id @default(autoincrement())
title String
location String
salary Int?
company Company @relation(fields: [companyId], references: [id])
companyId Int
applications Application[]
}

model Application {
id Int @id @default(autoincrement())
status String @default("applied")
user User @relation(fields: [userId], references: [id])
userId Int
job Job @relation(fields: [jobId], references: [id])
jobId Int
}

PRISMA OR SEQUELIZE?
Both are ORMs. Prisma is more modern, has excellent autocomplete, and a readable
schema file — great for beginners. Sequelize is older and very widely used. Either
works; this guide uses Prisma. Pick one and stick with it.

Step 6.3 — A controller, end to end

Here's how a single endpoint reads — clean and predictable thanks to MVC:

// controllers/[Link]
import { prisma } from '../config/[Link]';

export const getJobs = async (req, res) => {

const { location, title } = [Link];
const jobs = await [Link]({
where: {
location: location || undefined,
title: title ? { contains: title, mode: 'insensitive' } : undefined,
},
include: { company: true },
});
[Link](jobs);

A step-by-step build guide · page 19

 Building a Job Board Website

};

Step 6.4 — Security (do not skip this)

Security isn't a feature you add later — it's woven in as you build. The essentials:

Concern What to do
Passwords Never store plain text. Hash with bcrypt before saving.

Authentication Issue a JWT on login; the frontend sends it with each request.

Check roles — only an employer can post a job; only an admin can
Authorization
delete users.

Validate every incoming request (Zod or express-validator) —

Input validation
never trust the client.

SQL injection Prisma protects you automatically by parameterizing queries.

Secrets Keep keys/passwords in a .env file, never in code or GitHub.

Serve over HTTPS in production; restrict CORS to your frontend's

HTTPS + CORS
domain.

Step 6.5 — Performance: caching & data structures

Once it works, make it fast. A few high-impact techniques:
• Caching. Store the results of expensive or popular queries (like the
homepage's featured jobs) in memory or Redis so you don't hit the database
every time.
• Database indexes. Add indexes on columns you search or filter often (job
location, title). An index is like a book's index — it finds rows without scanning
every one.
• Pagination. Never return 10,000 jobs at once. Return 20 per page. It's faster
for the server and the user.
• Right data structures. Use a hash map / object for quick lookups by id
instead of repeatedly searching an array; pick the structure that matches how
you'll read the data.

USE CLAUDE HERE

Ask Claude to review a controller for security holes, suggest where to add indexes,
or explain an error message. It's a tireless code reviewer — but always read and
understand its suggestions before pasting them in.

DELIVERABLE FOR STAGE 6

A working API: routes, controllers, a Prisma schema connected to PostgreSQL,
authentication with JWT, input validation, and the main endpoints (auth, jobs,
applications) tested with a tool like Postman or Thunder Client.

A step-by-step build guide · page 20

 Building a Job Board Website

Stage 7 · Connect, Test & Refine

Now you join the two halves. The frontend's axios calls point at the real backend,
and you make sure the whole journey works — then you test it like a user would.

Step 7.1 — Integrate frontend and backend

9. Run the backend locally (e.g. [Link] and the frontend (e.g.
[Link]
10. Set VITE_API_URL in the frontend to point at the backend.
11. Enable CORS on the backend so the frontend is allowed to call it.
12. Replace placeholder data with real axios calls. Watch the network tab as data
flows in.

Step 7.2 — Test the real journeys

Walk through every user story from Stage 2 as if you were the user:
• Register and log in as a seeker. Search, filter, and apply for a job.
• Register as an employer. Post a job. See the seeker's application appear.
• Try to break it: submit empty forms, wrong passwords, visit a private page
logged out.

Test type What it checks

Manual testing You click through flows yourself — the fastest first pass.

Small pieces (a validator, a helper) work in isolation —

Unit tests
Vitest/Jest.

Integration tests An endpoint behaves correctly end to end — Supertest.

Responsive check It looks right on phone, tablet, and desktop.

DELIVERABLE FOR STAGE 7

A fully working app on your computer where every core user story succeeds, edge
cases are handled gracefully, and the UI is responsive. This is your release
candidate.

A step-by-step build guide · page 21

 Building a Job Board Website

Stage 8 · Deployment & Hosting

The final stage: put your site on the internet so anyone can visit it. You'll deploy
three things — the frontend, the backend, and the database — and connect them
with a custom domain.

Step 8.1 — Prepare for production

• Move every secret into environment variables — nothing sensitive in the code.
• Push your code to GitHub (frontend and backend, in repos).
• Build the frontend for production (npm run build) and confirm it runs.
• Set the database to a hosted one, not your laptop's.

Step 8.2 — Where to host each piece

Piece Recommended hosts
Vercel or Netlify — connect your GitHub repo and it deploys
Frontend (React)
automatically.

Backend (Node/Express) Render, Railway, or [Link] — simple, generous free tiers to start.

Neon, Supabase, or Railway — managed Postgres, backups

Database (PostgreSQL)
included.

Cloudinary or AWS S3 — don't store uploaded files on the

File storage (CVs, logos)
server.

Step 8.3 — Go live, step by step

13. Deploy the database first; copy its connection string.
14. Deploy the backend; set its environment variables (database URL, JWT
secret). Note its public URL.
15. Run your Prisma migrations against the live database so the tables exist.
16. Deploy the frontend; set VITE_API_URL to the backend's public URL.
17. Update the backend's CORS to allow the frontend's live domain.
18. Buy a domain (Namecheap, Google Domains) and point it at the frontend
host.
19. Confirm HTTPS is on (Vercel/Netlify do this automatically). Test every flow on
the live site.

AFTER LAUNCH — IT'S NOT OVER

• Monitor errors with a tool like Sentry so you hear about problems before users
complain.

A step-by-step build guide · page 22

 Building a Job Board Website

• Set up automatic database backups.

• Gather feedback and improve — version 1 is the start, not the end.
• Every time you push to GitHub, your hosts can auto-deploy the update. That's
the modern workflow.

DELIVERABLE FOR STAGE 8

A live, public website at your own domain, served over HTTPS, with the frontend,
backend, and database all talking to each other in production. You built and shipped
a real product. 🎉

A step-by-step build guide · page 23

 Building a Job Board Website

The Whole Journey at a Glance

Keep this checklist nearby. Each row is a stage; don't move down until the
deliverable is done.

Stage You finish with...

1 · Realization A signed-off project brief: problem, users, scope.

2 · Blueprinting Requirements, As-Is/To-Be flowcharts, entity list.

3 · System Design Page list, wireframes, design system, UI mockups.

4 · Architecture Architecture diagram and tech-stack decisions.

5 · Frontend Structured React app with navigation and design applied.

6 · Backend Working API: MVC, Prisma, auth, validation, security.

7 · Test & Connect Integrated, tested app where every user story works.

8 · Deploy A live website on a custom domain, over HTTPS.

Five things that separate finishers from quitters

20. Plan before you code. The first four stages save you weeks. Trust them.
21. Commit to GitHub constantly. Small, frequent saves mean you can never
lose much.
22. Build in small slices. One feature, working end to end, beats ten half-built
ones.
23. Use Claude as a partner, not a crutch. Ask it to explain, review, and
unblock — then make sure you understand the answer.
24. Ship version 1. A live, simple site teaches you more than a perfect plan that
never launches.

You've got this.

Every developer you admire started exactly where you are now — confused,
curious, and building anyway. Follow the stages, ask for help, and keep going.
One step at a time, you'll have a real website on the internet with your name on
it.

A step-by-step build guide · page 24