/JobbyApp

Find Jobs based on location, salary & job type

Primary LanguageJavaScript

Jobby App

Introduction

Keywords: React

  • Developed the frontend part of the Jobby Job search application.
  • This application allows users to log in, search, filter, select Jobs from the list of jobs.
  • Concepts such as authentication, state management, context, page navigation, media queries and flexbox concepts in the code by following the clean code guidelines.

Technical Aspects

Keywords: Authentication, Validation, Cookies

  • Implemented a basic authentication flow and handled common errors such as invalid username and invalid password.
  • Used cookies to persist user credentials across page reloads.

State Management and Navigation:

Keywords: State management, Navigation, Protected Route Used

  • Context for state management for creating a global state to manage cart state across routes.Used React Router for navigation within the application.
  • Additionally, implemented protected routes to control access based on user roles.`

API Integration:

Keywords: API Integration

  • Integrated mock APIs for displaying data

Clean Code Guidelines:

Keywords: Clean code guidelines

  • Followed clean code guidelines by maintaining a consistent folder structure and used meaningful naming conventions, such as prefixing event handlers with on and creating reusable components throughout the application.

Responsiveness:

Keywords: Responsiveness,

  • Flexbox To ensure a responsive design, used media queries and flexbox for layouting.

Set Up Instructions

  • Download dependencies by running npm install
  • Start up the app using npm start

Design Files

Login Route

Refer to videos below:

Video


Failure View

Failure View

Routes

Home Route
Jobs Route
Job Item Details Route
Not Found Route
Features/Functionalities

  • Login Route

    • When invalid credentials are provided and the Login button is clicked, then the error message received from the response is displayed
    • When valid credentials are provided and the Login button is clicked, then the page navigates to the Home Route
    • When an unauthenticated user, tries to access the Home, Jobs and Job Item Details Route, then the page navigates to Login Route
    • When an authenticated user, tries to access the Home, Jobs and Job Item Details Route, then the page navigates to the respective route
    • When an authenticated user, tries to access the Login Route, then the page navigates to the Home Route

  • Home Route

    • When an authenticated user opens the Home Route
      • Clicks on the Find Jobs button, then the page navigates to the Jobs Route

  • Jobs Route

    • When an authenticated user opens the Jobs Route

      • An HTTP GET request is made to Profile API URL

        • loader is displayed while fetching the data
        • After the data is fetched successfully, the response received is displayed
        • If the HTTP GET request made is unsuccessful, then the Failure View is displayed
          • When the Retry button is clicked, an HTTP GET request is made to Profile API URL

      • An HTTP GET request is made to Jobs API URL with employment_type, minimum_package, location and search as query parameters with empty strings as initial values

        • loader is displayed while fetching the data
        • After the data is fetched successfully, display the list of jobs received from the response
        • If the HTTP GET request made is unsuccessful, then the Failure View is displayed
          • When the Retry button is clicked, an HTTP GET request is made to Jobs API URL

      • When a value is provided in the search input and search icon button is clicked

        • An HTTP GET request to the Jobs API URL with jwt_token in the Cookies and query parameter search with value as the text provided in the search input
        • loader is displayed while fetching the data
        • After the data is fetched successfully, the list of jobs received from the response is displayed.

      • When Employment Types options are selected

        • Make an HTTP GET request to the Jobs API URL with jwt_token in the Cookies and query parameter employment_type with value as a list of selected employment type id's as a single string separated by ,
        • loader is displayed while fetching the data
        • After the data is fetched successfully, the list of jobs received from the response is displayed.

      • When Salary Range is selected

        • Make an HTTP GET request to the Jobs API URL with jwt_token in the Cookies and query parameter minimum_package with value as the id of the selected salary range
        • loader is displayed while fetching the data
        • After the data is fetched successfully, the list of jobs received from the response is displayed.

      • When Location is selected

        • Location-based filter by adding checkboxes labeled with the following locations: Hyderabad, Bangalore, Chennai, Delhi, and Mumbai.
        • When the checkboxes labeled with locations are checked, jobs corresponding to the selected locations are displayed.
        • Sticky behavior to the sidebar in the Jobs Route, which contains filters such as Type of Employment, Salary Range, and Locations.
        • Sticky behavior to the header in all routes

      • When the HTTP GET request made to the Jobs API URL returns an empty list for jobs then No Jobs View is displayed

    • When multiple filters are applied, then the HTTP GET request is made with all the filters that are applied

    • For example: When the Full Time and Part Time employment types are selected, salary range 10 LPA and above is selected and search input field is empty, then the Jobs API URL will be as follows

      const apiUrl = 'https://apis.ccbp.in/jobs?employment_type=FULLTIME,PARTTIME&minimum_package=1000000&location=Hyderabad&search=''

    • When a job is clicked, then the page navigates to the Job Item Details Route

  • Job Item Details Route

    • When an authenticated user opens the Job Item Details Route
      • An HTTP GET request is made to Job Details API URL with jwt_token in the Cookies and job id as path parameter
        • loader is displayed while fetching the data
        • After the data is fetched successfully, the response received is displayed
        • The list of similar jobs are displayed
        • If the HTTP GET request made is unsuccessful, then the Failure View is displayed
          • When the Retry button is clicked, an HTTP GET request is made to Job Details API URL
    • When the Visit button is clicked, then the corresponding company website URL opens in a new tab

  • Not Found Route

    • When a random path is provided as the URL path, then the page navigates to the Not Found Route

  • Header

    • When the website logo image is clicked, then the page navigates to the Home Route
    • When the Home link is clicked, then the page navigates to the Home Route
    • When the Jobs link is clicked, then the page navigates to the Jobs Route
    • When the Logout button is clicked, then the page navigates to the Login Route

  • The App is provided with employmentTypesList. It consists of a list of employment type objects with the following properties in each employment type object

    Key Data Type
    employmentTypeId String
    label String

  • The App is provided with salaryRangesList. It consists of a list of salary range objects with the following properties in each salary range object

    Key Data Type
    salaryRangeId String
    label String
API Requests & Responses

Login API

API: https://apis.ccbp.in/login

Method: POST

Request:

{
  "username": "rahul",
  "password": "rahul@2021"
}

Description:

Returns a response based on the credentials provided

Sample Success Response

{
  "jwt_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybBSSU1FX1Tk2Mjg2MTN9. ArLKKeF0QbmdVfLgzUbx1BGJsqa2kc_21Y"
}

Sample Failure Response

{
  "status_code": 404,
  "error_msg": "Username is not found"
}

Profile API

API: https://apis.ccbp.in/profile

Method: GET

Description:

Returns a response containing the profile details

Sample Response

{
  "profile_details": {
    "name": "Rahul Attuluri",
    "profile_image_url": "https://assets.ccbp.in/frontend/react-js/male-avatar-img.png",
    "short_bio": "Lead Software Developer and AI-ML expert"
  }
}

Jobs API

API: https://apis.ccbp.in/jobs

Example: https://apis.ccbp.in/jobs?employment_type=FULLTIME,PARTTIME&minimum_package=1000000&search=

Method: GET

Description:

Returns a response containing the list of all jobs

Sample Response

{
  "jobs": [
    {
      "company_logo_url": "https://assets.ccbp.in/frontend/react-js/jobby-app/facebook-img.png",
      "employment_type": "Full Time",
      "id": "d6019453-f864-4a2f-8230-6a9642a59466",
      "job_description": "We’re in search of a Back-End Software Engineer that specializes in server-side components. In this role, you’ll primarily work in NodeJs, SQL Lite, Python, AWS and GO and will bring a depth of knowledge on basic algorithms and data structures. As a Back-End Engineer, you might be architecting new features for our customers.",
      "location": "Bangalore",
      "package_per_annum": "21 LPA",
      "rating": 4,
      "title": "Backend Engineer"
    }
    ...
  ],
  "total":25,
}

Job Details API

API: https://apis.ccbp.in/jobs/:id

Example: https://apis.ccbp.in/jobs/bb95e51b-b1b2-4d97-bee4-1d5ec2b96751

Method: GET

Description:

Returns a response containing the job details

Sample Response

{
  "job_details": {
    "company_logo_url": "https://assets.ccbp.in/frontend/react-js/jobby-app/netflix-img.png",
    "company_website_url": "https://about.netflix.com/en",
    "employment_type": "Internship",
    "id": "bb95e51b-b1b2-4d97-bee4-1d5ec2b96751",
    "job_description": "We are looking for a DevOps Engineer with a minimum of 5 years of industry experience, preferably working in the financial IT community. The position in the team is focused on delivering exceptional services to both BU and Dev",
    "skills": [
      {
        "image_url": "https://assets.ccbp.in/frontend/react-js/jobby-app/docker-img.png",
        "name": "Docker"
      },
      ...
    ],
    "life_at_company": {
      "description": "Our core philosophy is people over process. Our culture has been instrumental to our success. It has helped us attract and retain stunning colleagues, making work here more satisfying. Entertainment, like friendship, is a fundamental human need, and it changes how we feel and gives us common ground. We want to entertain the world.",
      "image_url": "https://assets.ccbp.in/frontend/react-js/jobby-app/life-netflix-img.png"
    },
    "location":"Delhi",
    "package_per_annum":"10 LPA",
    "rating":4
  },
  "similar_jobs": [
    {
      "company_logo_url": "https://assets.ccbp.in/frontend/react-js/jobby-app/netflix-img.png",
      "employment_type": "Freelance",
      "id": "2b40029d-e5a5-48cc-84a6-b6e12d25625d",
      "job_description": "The Experimentation Platform team builds internal tools with a big impact across the company. We are looking to add a UI engineer to our team to continue to improve our experiment analysis workflow and tools. Ideal candidates will be excited by direct contact with our users, fast feedback, and quick iteration.",
      "location": "Delhi",
      "rating": 4,
      "title": "Frontend Engineer"
    },
    ...
  ]
}

User credentials

 username: rahul
 password: rahul@2021

Resources

Image URLs

Demo

vercel

netlify