Implemented Jobby App where users can log in and can see a list of jobs with search by Job title, filters based on Salary range and Employment type, etc
- Implemented different pages like Login, Home, Jobs, Job item details using React components, props, state, lists, event handlers, form inputs.
- Authenticating by taking username, password and doing login post HTTP API Call.
- Persisted user login state by keeping jwt token in client storage, Sending it in headers of further API calls to authorize the user.
- Implemented different routes for Login, Home, Jobs, Job item details pages by using React Router components Route, Switch, Link.
- Implemented filters and search text by sending them as query parameters to jobs API calls.
- Redirecting to the login page if the user tries to open Home, Jobs, Job item details routes which need authentication by implementing protected Route.
Technologies used: React JS, JS, CSS, Bootstrap, Routing, REST API Calls, Local Storage, JWT Token, Authorization, Authentication
### Refer to Images below:Failure View
Login Route
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
- Extra Small (Size < 576px) and Small (Size >= 576px) - Job Details Success
- Extra Small (Size < 576px) and Small (Size >= 576px) - Job Details Failure
- Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Job Details Success
- Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Job Details Failure
Not Found Route
Click to view
- Download dependencies by running
npm install
- Start up the app using
npm start
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
- When an authenticated user opens the Home 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
, andsearch
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 parametersearch
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
- Make an HTTP GET request to the Jobs API URL with
- When Employment Types options are selected
- Make an HTTP GET request to the Jobs API URL with
jwt_token
in the Cookies and query parameteremployment_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
- Make an HTTP GET request to the Jobs API URL with
- When Salary Range is selected
- Make an HTTP GET request to the Jobs API URL with
jwt_token
in the Cookies and query parameterminimum_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
- Make an HTTP GET request to the Jobs API URL with
- When the HTTP GET request made to the Jobs API URL returns an empty list for jobs then No Jobs View should be displayed
- An HTTP GET request should be made to Profile API URL
-
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 jobid
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
- An HTTP GET request should be made to Job Details API URL with
- When the Visit button is clicked, then the corresponding company website URL should be opened in a new tab
- When an authenticated user opens the Job Item Details Route
-
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 objectKey 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 objectKey Data Type salaryRangeId String label String
API Requests & Responses
Login API
{
"username": "rahul",
"password": "rahul@2021"
}
Returns a response based on the credentials provided
{
"jwt_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InJhaHVsIiwicm9sZSI6IlBSSU1FX1VTRVIiLCJpYXQiOjE2MTk2Mjg2MTN9. nZDlFsnSWArLKKeF0QbmdVfLgzUbx1BGJsqa2kc_21Y"
}
{
"status_code": 404,
"error_msg": "Username is not found"
}
Profile API
Returns a response containing the profile details
{
"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
Example: https://apis.ccbp.in/jobs?employment_type=FULLTIME,PARTTIME&minimum_package=1000000&search=
Returns a response containing the list of all jobs
{
"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
Returns a response containing the job details
{
"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"
},
...
]
}
Click to view
- To convert a list of items as a comma-separated string we can use the array method
join()
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
inApp.js
as we have already included inindex.js
-
User credentials
username: rahul password: rahul@2021
-
Wrap the
Loader
component with an HTML container element and add thedata-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
- The HTML button element with search icon should have the
-
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
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
Font-families
- Roboto