Create a simple search bar with checkboxes

In this post, we'll create a job search application using React and Next.js. The application will consist of two main pages: a front page with a welcome message and a link to the search page, and a search page where users can filter job listings based on various criteria.

Prerequisites
Basic knowledge of React and Next.js
Node.js and npm installed on your machine
Step 1: Setting Up the Project
First, let's set up a new Next.js project. Open your terminal and run the following commands:



npx create-next-app job-search-app
cd job-search-app

Step 2: Creating the Front Page Component
Inside the pages directory, create a new file named page.tsx with the following content:



import React from 'react';
import Link from 'next/link';

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
    <div>
      <h1>Welcome to My Search App</h1>
      <Link href="/search">
        Go to Search Page
      </Link>
    </div>
    </main>
  )
}

Step 3: Creating the Search Page Component
In the pages directory, create a folder (webpages) in side that folder add a folder search in that folder you create a new file named page.tsx with the following content:



"use client"
import React, { useState } from 'react';
import { jobListings } from "@/compoments/joblisting"

export default function Page() {
    const [searchQuery, setSearchQuery] = useState('');
    const [selectedEmployment, setSelectedEmployment] = useState<string[]>([]);
    const [selectedLocations, setSelectedLocations] = useState<string[]>([]);



    // Filter job listings based on search query, selected employment types, and selected locations
    const filteredJobListings = jobListings.filter(job =>
        job.title.toLowerCase().includes(searchQuery.toLowerCase()) &&
        (selectedEmployment.length === 0 || selectedEmployment.includes(job.employment)) &&
        (selectedLocations.length === 0 || selectedLocations.includes(job.location))
    );

    // Get unique employment types and locations
    const uniqueEmploymentTypes = Array.from(new Set(jobListings.map(job => job.employment)));
    const uniqueLocations = Array.from(new Set(jobListings.map(job => job.location)));


    return (
        <div className=' px-4 py-4'>
        <h1>Job Listings</h1>
        {/* Search bar */}
        <input
          type="text"
          placeholder="Search..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
        />
        {/* Employment type checkboxes */}
        <div>
          <h3>Employment Type</h3>
          {uniqueEmploymentTypes.map(type => (
            <label key={type}>
              <input
                type="checkbox"
                value={type}
                checked={selectedEmployment.includes(type)}
                onChange={(e) => {
                  if (e.target.checked) {
                    setSelectedEmployment([...selectedEmployment, type]);
                  } else {
                    setSelectedEmployment(selectedEmployment.filter(item => item !== type));
                  }
                }}
              />
              {type}
            </label>
          ))}
        </div>
        {/* Location checkboxes */}
        <div>
          <h3>Location</h3>
          {uniqueLocations.map(location => (
            <label key={location}>
              <input
                type="checkbox"
                value={location}
                checked={selectedLocations.includes(location)}
                onChange={(e) => {
                  if (e.target.checked) {
                    setSelectedLocations([...selectedLocations, location]);
                  } else {
                    setSelectedLocations(selectedLocations.filter(item => item !== location));
                  }
                }}
              />
              {location}
            </label>
          ))}
        </div>
        {/* Display filtered job listings */}
        {filteredJobListings.map(job => (
          <div key={job.id}>
            <h2>{job.title}</h2>
            <p><strong>Company:</strong> {job.company}</p>
            <p><strong>Employment:</strong> {job.employment}</p>
            <p><strong>Location:</strong> {job.location}</p>
            <p><strong>Description:</strong> {job.description}</p>
            <p><strong>Salary:</strong> {job.salary}</p>
          </div>
        ))}
      </div>
    );
  }

step 4: On the last stage we need dummy data, create a map called compoments add a new file in this directory called joblisting.tsx



interface Job {
    id: number;
    title: string;
    company: string;
    employment: string;
    location: string;
    description: string;
    salary: string;
}

const jobListings: Job[]  = [
    {
      id: 1,
      title: "Software Engineer",
      company: "Tech Co.",
      employment: "Full-time",
      location: "New York, NY",
      description: "We are seeking a talented software engineer to join our team...",
      salary: "$80,000 - $100,000 per year"
    },
    {
      id: 2,
      title: "Data Analyst",
      company: "Data Corp.",
      employment: "Contract",
      location: "San Francisco, CA",
      description: "Data Corp. is looking for a skilled data analyst to analyze...",
      salary: "$70,000 - $90,000 per year"
    },
    {
      id: 3,
      title: "UX/UI Designer",
      company: "Design Studio",
      employment: "Part-time",
      location: "Los Angeles, CA",
      description: "Design Studio is seeking a creative UX/UI designer to help...",
      salary: "$60,000 - $80,000 per year"
    }
  ];

  // Extract unique locations
  const locations = Array.from(new Set(jobListings.map(job => job.location)));

  export { jobListings , locations };

Step 4: Running the Application
To run the application, go back to your terminal and run:



npm run dev

Blog

Create a simple search bar with checkboxes

RedbeardJunior

Join Our Newsletter. No Spam, Only the good stuff.

Related