Understand the Folder Structure
Understand the Folder Structure
Here's how the project is organized once it's fully built out:
JobPortalApp/
├── node_modules/
├── public/
├── src/
│ ├── assets/
│ │
│ ├── commonComponents/ // shared across both pages
│ │ ├── Navbar.jsx // top navigation bar (logo, user, hamburger)
│ │ └── MobileMenu.jsx // slide-in navigation for mobile
│ │
│ ├── jobseekerComponents/ // pieces used only on the Job Seeker page
│ │ ├── TabSwitcher.jsx // Browse Jobs / My Applications capsule switcher
│ │ ├── JobCard.jsx // single job listing on the browse view
│ │ ├── ApplyModal.jsx // popup form for submitting an application
│ │ ├── StatusBadge.jsx // read-only status pill (Pending/Shortlisted/Rejected)
│ │ └── Toast.jsx // success notification after applying
│ │
│ ├── employerComponents/ // pieces used only on the Employer/Admin page
│ │ ├── AdminTabSwitcher.jsx // Dashboard / Manage Jobs / Applicants switcher
│ │ ├── StatCard.jsx // small dashboard summary box
│ │ ├── JobTable.jsx // table of posted jobs with edit/delete
│ │ ├── JobForm.jsx // modal to add or edit a job posting
│ │ ├── ApplicantsTable.jsx // table of everyone who applied
│ │ └── StatusDropdown.jsx // interactive status selector for an applicant
│ │
│ ├── pages/ // main pages of the app
│ │ ├── JobSeekerPage.jsx // candidate-facing page
│ │ └── EmployerAdminPage.jsx // employer/admin-facing page
│ │
│ ├── App.css
│ ├── App.jsx // root component
│ ├── index.css
│ └── main.jsx // React entry point, renders App
│
├── .gitignore // specifies files ignored by Git
├── eslint.config.js
├── index.html // root HTML file, loads main.jsx
├── package-lock.json
├── package.json // project info + dependencies list
└── README.md








