JobFolio is a front-end web application that displays and manages job postings. It is made using React and TailwindCSS. I made this to refresh my React knowledge, including hooks, props, components, wrapper components, routing, and data loaders. The project also uses several React libraries such as react-icons, react-toastify, react-spinners, and react-router-dom.
- A home screen displaying recent job postings pulled from a local development server (Vite)
- A detailed job view showing a job's information when given its ID
- Form-based screens for adding, updating, and deleting jobs utilising PUT, POST and DELETE requests as mock API calls to a local
json-server
- Clone the repository:
git clone https://github.com/YourUsername/JobFolio.git
cd JobFolio - Install dependencies:
npm install - Start the json-server (in one terminal):
npm run server - In a separate terminal, start the Vite development server:
npm run preview - Open your browser and navigate to the local address provided by Vite
💼 JobFolio
├─ README.md
├─ eslint.config.js
├─ index.html
├─ package-lock.json
├─ package.json
├─ postcss.config.js
├─ src
│ ├─ App.jsx
│ ├─ assets
│ │ └─ images
│ │ └─ logo.png
│ ├─ components
│ │ ├─ Card.jsx
│ │ ├─ Hero.jsx
│ │ ├─ HomeCards.jsx
│ │ ├─ JobListing.jsx
│ │ ├─ JobListings.jsx
│ │ ├─ Navbar.jsx
│ │ ├─ Spinner.jsx
│ │ └─ ViewAllJobs.jsx
│ ├─ index.css
│ ├─ jobs.json
│ ├─ layouts
│ │ └─ MainLayout.jsx
│ ├─ main.jsx
│ └─ pages
│ ├─ AddJobPage.jsx
│ ├─ EditJobPage.jsx
│ ├─ HomePage.jsx
│ ├─ JobPage.jsx
│ ├─ JobsPage.jsx
│ └─ NotFoundPage.jsx
├─ tailwind.config.js
└─ vite.config.js
©generated by Project Tree Generator
This project is licensed under the MIT License.
Author: Malak Sadek - Personal Website - Linkedin
Project Link: https://github.com/MalakSadek/JobFolio