Job Board Using React

Job Board application using React and Rapidapi JSearch allows users to search, filter and view job listings posted on LinkedIn, Indeed, Glassdoor, ZipRecruiter, BeBee and many others in a single job board. Users can search for jobs by keyword, filter jobs by location or category and see detailed job descriptions when they click on a job listing.

Preview of Final Output: Let us have a look at how the final the final project will look like

Prerequisites and Technologies used for Job Board Project

• Node.js and npm (Node Package Manager)
• React
• Axios (for making Rapidapi JSearch API requests)
• Tailwind CSS

Approach and Functionalities of Job Board Project

We will use the following approach to implement different functionalities of the project

1. Fetch job data from Rapidapi JSearch API.
2. Display a list of job listings.
3. Implement search functionality to filter jobs based on keywords.
4. Allow users to filter jobs by location or category.
5. Display detailed job descriptions when a job listing is clicked.
6. Apply Tailwind CSS for styling and responsiveness.

Steps to create the project

Step 1: Create a react application by Vite using the following command.

npm create vite@latest

Then Prompt some questions to set up your project.

Project name: yourProjectName
Package name: yourProjectName
Select a framework: › React // select React 
Select a variant: › JavaScript // optional TypeScript or javascript anything works

Step 2: After creating your project folder change the directory to your project folder.

cd projectFolderName

Step 3: Install project dependencies.

npm install axios html-react-parser react-icons react-paginate react-router-dom

Step 4: Then install Tailwind CSS.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Step 5: Configure your template paths. Add the paths to all of your template files in your tailwind.config.js file.

Step 6: Add the Tailwind directives to your CSS. Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap');

@tailwind base;

@tailwind components;

@tailwind utilities;

Step 7: Then, create a folder called pages and components in the same src folder and add the files as mentioned in project structure below.

Step 8: Finally, go to Rapid API Hub and create an account if and get the API key Now create a file called .env as able in the project structure and write the following code.

VITE_REACT_APP_API_SECRET_KEY='your-X-RapidAPI-Key'

Project Structure:

Example: Write the following code in respective files:

• App.jsx: This file implements routing and imports all the components
• JobCard.jsx: This file creates a basic card component for Job
• JobCards.jsx: This file renders multiple job files components
• demoApiData.js: This file contains demo data for fetching
• MainPage.jsx: This component implements searching based on location and queries
• JobInfoPage.jsx: This component displays information about the job

Steps to Run the Application:

To run the application, type the following command:

npm run dev

Open your browser and go to the following linke:

http://localhost:5173/

Output: