Menu

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