Job Portal in React and PHP Laravel

Introduction

The Job Portal is a web application that allows job seekers to search and apply for jobs, and employers to post job openings and manage their job postings. In this tutorial, we will be creating a Job Portal using React for the frontend and PHP Laravel for the backend.

Prerequisites

Before starting this tutorial, you should have:

• Basic knowledge of HTML, CSS, and JavaScript
• Familiarity with React and PHP Laravel
• A code editor or IDE (Integrated Development Environment)
• A local development environment set up with PHP Laravel and React

Setting up the Project

To start, we will create a new Laravel project using the command composer create-project --prefer-dist laravel/laravel job-portal. This will create a new directory called job-portal with the basic structure for a Laravel project.

Next, we will create a new React project using the command npx create-react-app job-portal-frontend. This will create a new directory called job-portal-frontend with the basic structure for a React project.

Creating the Job Model

In the Laravel project, we will create a new model for the job called Job.php. This model will have the following properties:

• id: the unique identifier for the job
• title: the title of the job
• description: the description of the job
• company: the company posting the job
• location: the location of the job
• salary: the salary for the job
• created_at: the date and time the job was created
• updated_at: the date and time the job was updated

We will also create a migration for the job table using the command php artisan make:migration create_jobs_table. In the migration file, we will add the following code:

use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;

class CreateJobsTable extends Migration
{
    public function up()
    {
        Schema::create('jobs', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('description');
            $table->string('company');
            $table->string('location');
            $table->integer('salary');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('jobs');
    }
}

We will then run the migration using the command php artisan migrate.

Creating the Job Controller

In the Laravel project, we will create a new controller for the job called JobController.php. This controller will have the following methods:

• index: returns a list of all jobs
• show: returns a single job by ID
• store: creates a new job
• update: updates an existing job
• destroy: deletes a job

We will also create routes for these methods in the routes/web.php file:

Route::get('/jobs', 'JobController@index');
Route::get('/jobs/{id}', 'JobController@show');
Route::post('/jobs', 'JobController@store');
Route::put('/jobs/{id}', 'JobController@update');
Route::delete('/jobs/{id}', 'JobController@destroy');

Creating the React Components

In the React project, we will create the following components:

• JobList: displays a list of all jobs
• JobDetail: displays a single job
• JobForm: allows the user to create or update a job

We will create a new file called JobList.js with the following code:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const JobList = () => {
  const [jobs, setJobs] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios.get('/api/jobs')
     .then(response => {
        setJobs(response.data);
        setLoading(false);
      })
     .catch(error => {
        console.error(error);
      });
  }, []);

  return (
    <div>
      {loading? (
        <p>Loading...</p>
      ) : (
        <ul>
          {jobs.map(job => (
            <li key={job.id}>
              <h2>{job.title}</h2>
              <p>{job.description}</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default JobList;

We will also create a new file called JobDetail.js with the following code:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const JobDetail = ({ match }) => {
  const [job, setJob] = useState({});

  useEffect(() => {
    axios.get(`/api/jobs/${match.params.id}`)
     .then(response => {
        setJob(response.data);
      })
     .catch(error => {
        console.error(error);
      });
  }, [match.params.id]);

  return (
    <div>
      <h2>{job.title}</h2>
      <p>{job.description}</p>
    </div>
  );
};

export default JobDetail;

We will also create a new file called JobForm.js with the following code:

import React, { useState } from 'react';
import axios from 'axios';

const JobForm = ({ job, onSubmit }) => {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [company, setCompany] = useState('');
  const [location, setLocation] = useState('');
  const [salary, setSalary] = useState('');

  const handleSubmit = event => {
    event.preventDefault();
    axios.post('/api/jobs', {
      title,
      description,
      company,
      location,
      salary,
    })
     .then(response => {
        onSubmit(response.data);
      })
     .catch(error => {
        console.error(error);
      });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Title:
        <input type="text" value={title} onChange={event => setTitle(event.target.value)} />
      </label>
      <label>
        Description:
        <textarea value={description} onChange={event => setDescription(event.target.value)} />
      </label>
      <label>
        Company:
        <input type="text" value={company} onChange={event => setCompany(event.target.value)} />
      </label>
      <label>
        Location:
        <input type="text" value={location} onChange={event => setLocation(event.target.value)} />
      </label>
      <label>
        Salary:
        <input type="number" value={salary} onChange={event => setSalary(event.target.value)} />
      </label>
      <button type="submit">Create Job</button>
    </form>
  );
};

export default JobForm;

Connecting the React Components to the Laravel API

We will create a new file called api.js in the React project with the following code:

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:8000/api',
});

export default api;

We will then import the api object in each of our React components and use it to make API calls to the Laravel backend.

For example, in the JobList component, we will use the api object to fetch the list of jobs:

import React, { useState, useEffect } from 'react';
import api from './api';

const JobList = () => {
  const [jobs, setJobs] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    api.get('/jobs')
     .then(response => {
        setJobs(response.data);
        setLoading(false);
      })
     .catch(error => {
        console.error(error);
      });
  }, []);

  return (
    <div>
      {loading? (
        <p>Loading...</p>
      ) : (
        <ul>
          {jobs.map(job => (
            <li key={job.id}>
              <h2>{job.title}</h2>
              <p>{job.description}</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default JobList;

Conclusion

In this tutorial, we have created a Job Portal using React and PHP Laravel. We have created a model for the job, a controller for the job, and several React components to display the job list, job detail, and job form. We have also connected the React components to the Laravel API using the api object.

This is just a basic example, and you can add more features and functionality to the Job Portal as needed. I hope this tutorial has been helpful in getting you started with building a Job Portal using React and PHP Laravel.