Create a simple search bar with checkboxes

RedbeardJunior — Wed, 10 Apr 2024 13:29:28 +0000

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

I created my first open source project on github.

RedbeardJunior — Tue, 08 Aug 2023 13:15:45 +0000

Project DOCK

I just uploaded my first opensource project called dock.

it is still a basic project with a great vision and mission.

Dock is gonna be a out of the box template roll out to start your new project easy and efficiently as possible.

My vision and mission for dock is that it will be a handy template to use for different docker project.

Just enjoy and leave if you like my vision and mission please leave a star.

Dock repo

keep on docking with dock.

Starting a SaaS.

RedbeardJunior — Tue, 11 Jul 2023 11:40:43 +0000

I always wanted to build my own SaaS, but my job don't let me.

I started in the back ground and would like to share my journey, I have a idea and I'm working on it as we speak.

I would love to share the journey with you all and love to learn on the go.

So the journey begin by creating the graphical interface.

Electronjs ActiveX printing controls chrome based. Help needed.

RedbeardJunior — Thu, 23 Feb 2023 15:30:01 +0000

Edge has a new future to use IE components like ActiveX with the new update:

Because edge is build on chromium and use a plugin from MeadCo ScriptX

I want to build this for chrome as well, because we have a older version of printing that use the ActiveX Printing.

its a hybrid application that is made on chromium / chrome.

With node node js and electronjs I know it is posible but how is the qeustion !

please give me some directions to get it rolling !

Don't immediately criticize my question still learning.

DEV Community: RedbeardJunior

Create a simple search bar with checkboxes

I created my first open source project on github.

Starting a SaaS.

Electronjs ActiveX printing controls chrome based. Help needed.