https://github.com/malaksadek/jobfolio

A front-end web app for posting and viewing jobs using React.
https://github.com/malaksadek/jobfolio

Last synced: about 7 hours ago
JSON representation

A front-end web app for posting and viewing jobs using React.

• Host: GitHub
• URL: https://github.com/malaksadek/jobfolio
• Owner: MalakSadek
• Created: 2024-09-17T17:49:26.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-18T12:41:15.000Z (about 2 months ago)
• Last Synced: 2024-09-19T11:26:28.047Z (about 2 months ago)
• Language: JavaScript
• Size: 740 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# JobFolio

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.

## Features

- 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`

## Screenshots

![Screenshot of the homepage for JobFolio showing some recent jobs.](/src/assets/screenshots/JobFolio-HomeScreen.png)

![Screenshot of a single job's details showing the role, type, description, salary, location, company name, company description, and contacts.](/src/assets/screenshots/JobFolio-JobListing.png)

![Screenshot of a form for adding new jobs by entering all the relevant information.](/src/assets/screenshots/JobFolio-AddJob.png)

## Installation and Running the Application

1. Clone the repository: 


   `git clone https://github.com/YourUsername/JobFolio.git` 


   `cd JobFolio`

2. Install dependencies: 


   `npm install` 


3. Start the json-server (in one terminal): 


   `npm run server` 


4. In a separate terminal, start the Vite development server: 


   `npm run preview` 
 

5. Open your browser and navigate to the local address provided by Vite 


## Project Structure

```

💼 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](https://woochanleee.github.io/project-tree-generator)

## License

This project is licensed under the MIT License.

## Contact

Author: Malak Sadek - [Personal Website](https://malaksadekapps.com/) - [Linkedin](https://linkedin.com/in/MalakSadek) 


Project Link: [https://github.com/MalakSadek/JobFolio](https://github.com/MalakSadek/JobFolio)