Devjobs Web App

This is a demo project - Devjobs Web App.

Table of contents

• Overview
  • The Project
  • Screenshots
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

The Project

Users should be able to:

• Be able to filter jobs on the index page by title, location, and whether a job is for a full-time position
• Be able to click a job from the index page so that they can read more information and apply for the job
• View the optimal layout for each page depending on their device's screen size
• See hover states for all interactive elements throughout the site
• Have the correct color scheme chosen for them based on their computer preferences.

Screenshots

My process

Built with

• React - UI library
• Next.js - React metaframework
• Sass/Scss - For styles
• CSS-Modules - For component-level CSS styles
• Radix UI - A modal component with accessibility
• CSS Flexbox
• CSS Grid

What I learned

While working through this project, I expanded my knowledge of light & dark modes, the modal overlaid on the primary window, controlled form inputs and dynamic URL routing.

[data-theme='dark'] {
  // Home
  --background: hsl(220deg 29% 10%);
  --search-and-grid-background: hsl(219deg 29% 14%);
  --font-color: hsl(0deg 0% 100%);
  --unchecked-background: hsl(220deg 16% 23%);

  // Detail
  --intro-font-color: hsl(212deg 23% 69%);
  --button-font-color: hsl(0deg 0% 100%);
  --button-background: hsl(220deg 16% 22%);
  --hover-background: hsl(216deg 8% 35%);

  // Mobile Filter Icon
  --fill-color: hsl(0deg 0% 100%);
}

function MobileSearchForm({
  handleSearchTitle,
  handleLocationAndFulltime,
}) {
  const [title, setTitle] = React.useState('');
  const [location, setLocation] = React.useState('');
  const [isfulltime, setIsfulltime] = React.useState(false);

  const [IsOpen, setIsOpen] = React.useState(false);

  const checkmarkclassName = `${styles.checkmark} ${
    isfulltime ? styles.checked : styles.unchecked
  }`;

  function handleSubmitTitle(event) {
    event.preventDefault();

    handleSearchTitle(title);

    setTitle('');
  }

  function handleLocationAndFullTime(event) {
    event.preventDefault();
    event.stopPropagation();
    setIsOpen(false);

    handleLocationAndFulltime(location, isfulltime);

    setLocation('');
    setIsfulltime(false);
  }

  return (
    <form onSubmit={handleSubmitTitle} className={styles.wrapper}>
      ...
    </form>
  );
}

Useful resources

• How To Customize Checkboxes - This helped me with the customization of checkboxes.

Author

• Website - Jett Zhang