The jobbyapp from gavarla

In this project, let's build a Jobby App by applying the concepts we have learned till now.

Refer to videos below:

Failure View

Design Files

Extra Small (Size < 576px) and Small (Size >= 576px) - Login
Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Login
Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Login Failure

Home Route

Jobs Route

Extra Small (Size < 576px) and Small (Size >= 576px) - Jobs
Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Jobs Success
Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - No Jobs
Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Profile Failure
Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Jobs Failure

Job Item Details Route

Not Found Route

Set Up Instructions

Click to view

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

Completion Instructions

Functionality to be added

The app must have the following functionalities

Login Route
- When invalid credentials are provided and the Login button is clicked, then the error message received from the response should be displayed
- When valid credentials are provided and the Login button is clicked, then the page should be navigated to the Home Route
- When an unauthenticated user, tries to access the Home, Jobs and Job Item Details Route, then the page should be navigated to Login Route
- When an authenticated user, tries to access the Home, Jobs and Job Item Details Route, then the page should be navigated to the respective route
- When an authenticated user, tries to access the Login Route, then the page should be navigated to the Home Route
Home Route
- When an authenticated user opens the Home Route
  - Clicks on the Find Jobs button, then the page should be navigated to the Jobs Route
Jobs Route
- When an authenticated user opens the Jobs Route
  - An HTTP GET request should be made to Profile API URL
    - loader should be displayed while fetching the data
    - After the data is fetched successfully, the response received should be displayed
    - If the HTTP GET request made is unsuccessful, then the Failure View should be displayed
      - When the Retry button is clicked, an HTTP GET request should be made to Profile API URL
  - An HTTP GET request should be made to Jobs API URL with employment_type, minimum_package, and search as query parameters with empty strings as initial values
    - loader should be 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 should be displayed
      - When the Retry button is clicked, an HTTP GET request should be made to Jobs API URL
  - When a value is provided in the search input and search icon button is clicked
    - Make 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 should be displayed while fetching the data
    - After the data is fetched successfully, display the list of jobs received from the response
  - 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 should be displayed while fetching the data
    - After the data is fetched successfully, display the list of jobs received from the response
  - 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 should be displayed while fetching the data
    - After the data is fetched successfully, display the list of jobs received from the response
  - When the HTTP GET request made to the Jobs API URL returns an empty list for jobs then No Jobs View should be displayed
- When multiple filters are applied, then the HTTP GET request should be 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&search='
```
- When a job is clicked, then the page should be navigated to the Job Item Details Route
Job Item Details Route
- When an authenticated user opens the Job Item Details Route
  - An HTTP GET request should be made to Job Details API URL with jwt_token in the Cookies and job id as path parameter
    - loader should be displayed while fetching the data
    - After the data is fetched successfully, the response received should be displayed
    - The list of similar jobs should be displayed
    - If the HTTP GET request made is unsuccessful, then the Failure View should be displayed
      - When the Retry button is clicked, an HTTP GET request should be made to Job Details API URL
- When the Visit button is clicked, then the corresponding company website URL should be opened in a new tab
Not Found Route
- When a random path is provided as the URL path, then the page should be navigated to the Not Found Route
Header
- When the website logo image is clicked, then the page should be navigated to the Home Route
- When the Home link is clicked, then the page should be navigated to the Home Route
- When the Jobs link is clicked, then the page should be navigated to the Jobs Route
- When the Logout button is clicked, then the page should be navigated 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

Key	Data Type
employmentTypeId	String
label	String

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.eyJ1c2VybmFtZSI6InJhaHVsIiwicm9sZSI6IlBSSU1FX1VTRVIiLCJpYXQiOjE2MTk2Mjg2MTN9. nZDlFsnSWArLKKeF0QbmdVfLgzUbx1BGJsqa2kc_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"
    },
    ...
  ]
}

Quick Tips

Click to view

To convert a list of items as a comma-separated string we can use the array method join()

Important Note

Click to view

The following instructions are required for the tests to pass

Render Home Route component when the path in URL matches /
Render Login Route component when the path in URL matches /login
Render Jobs Route component when the path in URL matches /jobs
Render Job Item Details Route component when the path in URL matches /jobs/:id
Render Not Found Route component when the path in URL matches /not-found
No need to use the BrowserRouter in App.js as we have already included in index.js

User credentials

 username: rahul
 password: rahul@2021

Wrap the Loader component with an HTML container element and add the data-testid attribute value as loader to it

<div className="loader-container" data-testid="loader">
  <Loader type="ThreeDots" color="#ffffff" height="50" width="50" />
</div>

Jobs Route
- The HTML button element with search icon should have the data-testid attribute value as searchButton to it
```
<button type="button" data-testid="searchButton">
  <BsSearch className="search-icon" />
</button>
```
- The profile image should have the alt as profile
- The company logo images in Jobs Route should have the alt as company logo
Job Details Route
- The company logo image should have the alt as job details company logo
- The life at company image should have the alt as life at company
- The skill images should have the alt as the value of the key name from each object in the skills list received from the job details response
- The company logo image in similar job item should have the alt as similar job company logo

Resources

Image URLs

https://assets.ccbp.in/frontend/react-js/home-sm-bg.png
https://assets.ccbp.in/frontend/react-js/home-lg-bg.png
https://assets.ccbp.in/frontend/react-js/profile-bg.png
https://assets.ccbp.in/frontend/react-js/logo-img.png alt should be website logo
https://assets.ccbp.in/frontend/react-js/failure-img.png alt should be failure view
https://assets.ccbp.in/frontend/react-js/no-jobs-img.png alt should be no jobs
https://assets.ccbp.in/frontend/react-js/jobby-app-not-found-img.png alt should be not found

Colors

Hex: #64748b

Hex: #4f46e5

Hex: #f8fafc

Hex: #272727

Hex: #ffffff

Hex: #b6c5ff

Hex: #6366f1

Hex: #2c364c

Hex: #000000

Hex: #f1f5f9

Hex: #fbbf24

Hex: #202020

Hex: #cbd5e1

Hex: #7e858e

Hex: #121212

Hex: #475569

Hex: #ff0b37

Font-families

Roboto

Things to Keep in Mind

All components you implement should go in the src/components directory.

Don't change the component folder names as those are the files being imported into the tests.

Do not remove the pre-filled code

Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.

gavarla / jobbyapp Goto Github PK

jobbyapp's Introduction

Refer to videos below:

Design Files

Set Up Instructions

Completion Instructions

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

Method: POST

Request:

Description:

Sample Success Response

Sample Failure Response

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

Method: GET

Description:

Sample Response

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

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

Method: GET

Description:

Sample Response

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

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

Method: GET

Description:

Sample Response

Quick Tips

Important Note

Resources

Things to Keep in Mind

jobbyapp's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org

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

Method: `POST`

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

Method: `GET`

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

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

Method: `GET`

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

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

Method: `GET`