Learning React with Tailwind CSS for Building a Job Finder Web App: Complete Source Code available

In this tutorial, we will be building a Job Finder web application using React and Tailwind CSS. We will be using React Hooks and Tailwind CSS to create a responsive user interface for our application. We will also be using the GitHub Jobs API to fetch job listings for our users.

To get started, let’s first create our React application. Open your terminal and run the following command:

npx create-react-app job-finder-app

Once the application is created, navigate into the project directory by running:

cd job-finder-app

Next, install Tailwind CSS by running the following command:

npm install tailwindcss

After installing Tailwind CSS, create a tailwind.config.js file in the root directory of your project and add the following code:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Next, create a styles directory in the src folder of your project and create a tailwind.css file with the following code:

@tailwind base;
@tailwind components;
@tailwind utilities;

Now, import the tailwind.css file in your index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/tailwind.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Our project setup is now complete, so let’s start building our Job Finder web application.

First, let’s create the components for our application in the src/components directory. Create a JobList.js file with the following code:

import React from 'react';

const JobList = ({ jobs }) => {
  return (
    <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
      {jobs.map(job => (
        <div key={job.id} className="p-4 shadow-lg rounded-lg">
          <h2 className="text-lg font-bold">{job.title}</h2>
          <p className="text-gray-500">{job.company}</p>
          <p className="text-gray-500">{job.location}</p>
        </div>
      ))}
    </div>
  );
};

export default JobList;

Next, create a SearchBox.js file in the src/components directory with the following code:

import React from 'react';

const SearchBox = ({ value, onChange }) => {
  return (
    <input
      className="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring focus:border-blue-300"
      type="text"
      placeholder="Search jobs..."
      value={value}
      onChange={(e) => onChange(e.target.value)}
    />
  );
};

export default SearchBox;

Now, let’s create the App.js file in the src directory with the following code:

import React, { useState, useEffect } from 'react';
import SearchBox from './components/SearchBox';
import JobList from './components/JobList';

const App = () => {
  const [jobs, setJobs] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    fetch(`https://jobs.github.com/positions.json?search=${searchTerm}`)
      .then(res => res.json())
      .then(data => setJobs(data));
  }, [searchTerm]);

  return (
    <div className="container mx-auto py-4">
      <h1 className="text-2xl font-bold mb-4">Job Finder</h1>
      <SearchBox value={searchTerm} onChange={setSearchTerm} />
      <JobList jobs={jobs} />
    </div>
  );
};

export default App;

Finally, start the development server by running:

npm start

You can now access your Job Finder web application in your browser at http://localhost:3000.

That’s it! You have successfully created a Job Finder web application using React and Tailwind CSS. You can further customize the application by adding more features and styling as needed. Happy coding!