Functional Components & Props

A. A Functional Component is a JavaScript function that returns JSX, and it's the standard way components are built in modern React. In this project, every single piece — Navbar, MobileMenu, TabSwitcher, JobCard, ApplyModal, StatusBadge, Toast, StatCard, JobTable, JobForm, ApplicantsTable, StatusDropdown — is written as its own functional component.

Smaller components like StatusBadge and StatusDropdown are built once and reused inside bigger ones like JobCard and ApplicantsTable, which is called component composition — building complex UI by combining simple, focused pieces rather than writing one giant block of code.

Because each of these pieces only cares about doing one job well, the same JobCard component can be reused for every job on the page, and the same StatusDropdown for every applicant row — that reuse is exactly what makes components reusable instead of one-off code.

B. Props are how data is passed from a parent component down to a child component. Here, JobCard receives the job object and an onApply function as props from JobSeekerPage, ApplyModal receives the selected job and an onSubmit callback, and Navbar receives userName and onMenuOpen.

When a value like userName needs to pass through more than one layer — for example, from a page down into MobileMenu — that's called prop drilling: simply passing a prop further down the component tree until it reaches the component that actually needs it.

This connects directly to how the project is organised: components live in separate commonComponents, jobseekerComponents, and employerComponents folders while full screens live in a pages folder, and each file uses import/export to share itself with others — so a page like JobSeekerPage simply imports the components it needs, keeping the codebase clean and easy to navigate.