{"id":22660990,"url":"https://github.com/kirankumar-matham96/jobby-app-react","last_synced_at":"2025-03-29T08:25:22.639Z","repository":{"id":37809433,"uuid":"506289244","full_name":"kirankumar-Matham96/jobby-app-react","owner":"kirankumar-Matham96","description":null,"archived":false,"fork":false,"pushed_at":"2022-06-24T20:15:13.000Z","size":370,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-03T22:44:58.594Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kirankumar-Matham96.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-22T14:47:20.000Z","updated_at":"2022-06-22T14:49:42.000Z","dependencies_parsed_at":"2022-08-19T09:51:14.713Z","dependency_job_id":null,"html_url":"https://github.com/kirankumar-Matham96/jobby-app-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirankumar-Matham96%2Fjobby-app-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirankumar-Matham96%2Fjobby-app-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirankumar-Matham96%2Fjobby-app-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirankumar-Matham96%2Fjobby-app-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kirankumar-Matham96","download_url":"https://codeload.github.com/kirankumar-Matham96/jobby-app-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246158600,"owners_count":20732835,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-09T11:13:13.730Z","updated_at":"2025-03-29T08:25:22.617Z","avatar_url":"https://github.com/kirankumar-Matham96.png","language":"JavaScript","readme":"In this project, let's build a **Jobby App** by applying the concepts we have learned till now.\n\n### Refer to videos below:\n\n\u003cdiv style=\"text-align: center;\"\u003e\n  \u003cvideo style=\"max-width:80%;box-shadow:0 2.8px 2.2px rgba(0, 0, 0, 0.12);outline:none;\" loop=\"true\" autoplay=\"autoplay\" controls=\"controls\" muted\u003e\n    \u003csource src=\"https://assets.ccbp.in/frontend/content/react-js/jobby-app-success-output-v0.mp4\" type=\"video/mp4\"\u003e\n  \u003c/video\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\n**Failure View** \u003cbr/\u003e\n\n\u003cdiv style=\"text-align: center;\"\u003e\n  \u003cvideo style=\"max-width:80%;box-shadow:0 2.8px 2.2px rgba(0, 0, 0, 0.12);outline:none;\" loop=\"true\" autoplay=\"autoplay\" controls=\"controls\" muted\u003e\n    \u003csource src=\"https://assets.ccbp.in/frontend/content/react-js/jobby-app-failure-output-v0.mp4\" type=\"video/mp4\"\u003e\n  \u003c/video\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\n### Design Files\n\n\u003cdetails\u003e\n\u003csummary\u003eLogin Route\u003c/summary\u003e\n\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Login](https://assets.ccbp.in/frontend/content/react-js/jobby-app-login-sm-output.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Login Failure](https://assets.ccbp.in/frontend/content/react-js/jobby-app-login-failure-sm-output.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Login](https://assets.ccbp.in/frontend/content/react-js/jobby-app-login-lg-output.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Login Failure](https://assets.ccbp.in/frontend/content/react-js/jobby-app-login-failure-lg-output.png)\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eHome Route\u003c/summary\u003e\n\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Home](https://assets.ccbp.in/frontend/content/react-js/jobby-app-home-sm-output.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Home](https://assets.ccbp.in/frontend/content/react-js/jobby-app-home-lg-output.png)\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eJobs Route\u003c/summary\u003e\n\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Jobs Success](https://assets.ccbp.in/frontend/content/react-js/jobby-app-jobs-success-sm-output-v0.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - No Jobs](https://assets.ccbp.in/frontend/content/react-js/jobby-app-no-jobs-sm-output.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Profile Failure](https://assets.ccbp.in/frontend/content/react-js/jobby-app-profile-failure-sm-output-v0.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Jobs Failure](https://assets.ccbp.in/frontend/content/react-js/jobby-app-jobs-failure-sm-output-v0.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Jobs Success](https://assets.ccbp.in/frontend/content/react-js/jobby-app-jobs-success-lg-output-v0.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - No Jobs](https://assets.ccbp.in/frontend/content/react-js/jobby-app-no-jobs-lg-output-v0.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Profile Failure](https://assets.ccbp.in/frontend/content/react-js/jooby-app-profile-failure-lg-output-v0.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Jobs Failure](https://assets.ccbp.in/frontend/content/react-js/jobby-app-jobs-failure-lg-output-v0.png)\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eJob Item Details Route\u003c/summary\u003e\n\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Job Details Success](https://assets.ccbp.in/frontend/content/react-js/jobby-app-job-details-success-sm-output-v0.png)\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Job Details Failure](https://assets.ccbp.in/frontend/content/react-js/jobby-app-job-details-failure-sm-output.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Job Details Success](https://assets.ccbp.in/frontend/content/react-js/jobby-app-job-details-success-lg-output-v0.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Job Details Failure](https://assets.ccbp.in/frontend/content/react-js/jobby-app-job-details-failure-lg-output.png)\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eNot Found Route\u003c/summary\u003e\n\n- [Extra Small (Size \u003c 576px) and Small (Size \u003e= 576px) - Not Found](https://assets.ccbp.in/frontend/content/react-js/jobby-app-not-found-sm-output.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Not Found](https://assets.ccbp.in/frontend/content/react-js/jobby-app-not-found-lg-output.png)\n\u003c/details\u003e\n\n### Set Up Instructions\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to view\u003c/summary\u003e\n\n- Download dependencies by running `npm install`\n- Start up the app using `npm start`\n\u003c/details\u003e\n\n### Completion Instructions\n\n\u003cdetails\u003e\n\u003csummary\u003eFunctionality to be added\u003c/summary\u003e\n\u003cbr/\u003e\n\nThe app must have the following functionalities\n\n- **Login Route**\n\n  - When invalid credentials are provided and the **Login** button is clicked, then the respective error message received from the response should be displayed\n  - When valid credentials are provided and the **Login** button is clicked, then the page should be navigated to the Home Route\n  - When an unauthenticated user, tries to access the Home Route, Jobs Route, JobItemDetails Route, then the page should be navigated to Login Route\n  - When an authenticated user, tries to access the Home Route, Jobs Route, JobItemDetails Route, then the page should be navigated to the respective route\n  - When an authenticated user tries to access the Login Route, then the page should be navigated to the Home Route\n\n- **Home Route**\n\n  - When an authenticated user opens the Home Route\n    - Clicks on the **Jobs** link in the Header, then the page should be navigated to the Jobs Route\n    - Clicks on the **Find Jobs** button, then the page should be navigated to the Jobs Route\n\n- **Jobs Route**\n\n  - When an authenticated user opens the Jobs Route\n\n    - An HTTP GET request should be made to **profileApiUrl**\n      - **_loader_** should be displayed while fetching the data\n      - After the data is fetched successfully, the response received should be displayed\n      - If the HTTP GET request made is unsuccessful, then the [Failure View](https://assets.ccbp.in/frontend/content/react-js/jobby-app-profile-failure-lg-output.png) should be displayed\n        - When the **Retry** button is clicked, an HTTP GET request should be made to **profileApiUrl**\n    - An HTTP GET request should be made to **jobsApiUrl** with `employment_type`, `minimum_package`, and `search` as query parameters with empty strings as initial values\n      - **_loader_** should be displayed while fetching the data\n      - After the data is fetched successfully, display the list of jobs received from the response\n      - If the HTTP GET request made is unsuccessful, then the [Failure View](https://assets.ccbp.in/frontend/content/react-js/jobby-app-jobs-failure-lg-output.png) should be displayed\n        - When the **Retry** button is clicked, an HTTP GET request should be made to **jobsApiUrl**\n    - When a value is provided in the search input and button with search icon is clicked\n      - Make an HTTP GET request to the **jobsApiUrl** with `jwt_token` in the Cookies and query parameter `search` with value as the text provided in the search input\n      - **_loader_** should be displayed while fetching the data\n      - After the data is fetched successfully, display the list of jobs received in the response\n    - When **Employment Types** options are selected\n      - Make an HTTP GET request to the **jobsApiUrl** 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 `,`\n      - **_loader_** should be displayed while fetching the data\n      - After the data is fetched successfully, display the list of jobs received in the response\n    - When **Salary Range** is selected\n      - Make an HTTP GET request to the **jobsApiUrl** with `jwt_token` in the Cookies and query parameter `minimum_package` with value as the id of the selected salary range\n      - **_loader_** should be displayed while fetching the data\n      - After the data is fetched successfully, display the list of jobs received in the response\n    - When the HTTP GET request made to the **jobsApiUrl** returns an empty list for jobs then [No Jobs View](https://assets.ccbp.in/frontend/content/react-js/jobby-app-no-jobs-lg-output.png) should be displayed\n\n  - When multiple filters are applied, then the HTTP GET request should be made with all the filters that are applied\n  - 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 **jobsApiUrl** will be as follows\n\n    ```js\n    const apiUrl = 'https://apis.ccbp.in/jobs?employment_type=FULLTIME,PARTTIME\u0026minimum_package=1000000\u0026search='\n    ```\n\n  - When the **Home** link is clicked in Header, then the page should be navigated to the Home Route\n  - When the **website logo** image is clicked, then the page should be navigated to the Home Route\n  - When a **job** is clicked, then the page should be navigated to the Job Item Details Route\n\n- **Job Item Details Route**\n\n  - When an authenticated user opens the Job Item Details Route\n    - An HTTP GET request should be made to **jobDetailsApiUrl** with `jwt_token` in the Cookies and job `id` as path parameter\n      - **_loader_** should be displayed while fetching the data\n      - After the data is fetched successfully, the response received should be displayed\n      - The list of similar jobs should be displayed\n      - If the HTTP GET request made is unsuccessful, then the [Failure View](https://assets.ccbp.in/frontend/content/react-js/jobby-app-job-details-failure-lg-output.png) should be displayed\n        - When the **Retry** button is clicked, an HTTP GET request should be made to **jobDetailsApiUrl**\n  - When the **Visit** button is clicked, then the corresponding company website URL should be opened in a new tab\n\n- **Not Found Route**\n\n  - When a random path is provided in the URL, then the page should be navigated to the Not Found Route\n\n- **Logout**\n\n  - When the **Logout** button in the header is clicked, then the page should be navigated to the Login Route\n\n- The App is provided with `employmentTypesList`. It consists of a list of employment type objects with the following properties in each employment type object\n\n  |       Key        | Data Type |\n  | :--------------: | :-------: |\n  | employmentTypeId |  String   |\n  |      label       |  String   |\n\n- The App is provided with `salaryRangesList`. It consists of a list of salary range objects with the following properties in each salary range object\n\n  |      Key      | Data Type |\n  | :-----------: | :-------: |\n  | salaryRangeId |  String   |\n  |     label     |  String   |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eAPI Requests \u0026 Responses\u003c/summary\u003e\n\n\u003cbr/\u003e\n\n**loginApiUrl**\n\n#### API: `https://apis.ccbp.in/login`\n\n#### Method: `POST`\n\n#### Description:\n\nReturns a response based on the credentials provided\n\n#### Sample Success Response\n\n```json\n{\n  \"jwt_token\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InJhaHVsIiwicm9sZSI6IlBSSU1FX1VTRVIiLCJpYXQiOjE2MTk2Mjg2MTN9. nZDlFsnSWArLKKeF0QbmdVfLgzUbx1BGJsqa2kc_21Y\"\n}\n```\n\n#### Sample Failure Response\n\n```json\n{\n  \"status_code\": 404,\n  \"error_msg\": \"Username is not found\"\n}\n```\n\n**profileApiUrl**\n\n#### API: `https://apis.ccbp.in/profile`\n\n#### Method: `GET`\n\n#### Description:\n\nReturns a response containing the profile details\n\n#### Sample Response\n\n```json\n{\n  \"profile_details\": {\n    \"name\": \"Rahul Attuluri\",\n    \"profile_image_url\": \"https://assets.ccbp.in/frontend/react-js/male-avatar-img.png\",\n    \"short_bio\": \"Lead Software Developer and AI-ML expert\"\n  }\n}\n```\n\n**jobsApiUrl**\n\n#### API: `https://apis.ccbp.in/jobs`\n\n#### Example: `https://apis.ccbp.in/jobs?employment_type=FULLTIME,PARTTIME\u0026minimum_package=1000000\u0026search=`\n\n#### Method: `GET`\n\n#### Description:\n\nReturns a response containing the list of all jobs\n\n#### Sample Response\n\n```json\n{\n  \"jobs\": [\n    {\n      \"company_logo_url\": \"https://assets.ccbp.in/frontend/react-js/jobby-app/facebook-img.png\",\n      \"employment_type\": \"Full Time\",\n      \"id\": \"d6019453-f864-4a2f-8230-6a9642a59466\",\n      \"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.\",\n      \"location\": \"Bangalore\",\n      \"package_per_annum\": \"21 LPA\",\n      \"rating\": 4,\n      \"title\": \"Backend Engineer\"\n    }\n    ...\n  ],\n  \"total\":25,\n}\n```\n\n**jobDetailsApiUrl**\n\n#### API: `https://apis.ccbp.in/jobs/:id`\n\n#### Example: `https://apis.ccbp.in/jobs/bb95e51b-b1b2-4d97-bee4-1d5ec2b96751`\n\n#### Method: `GET`\n\n#### Description:\n\nReturns a response containing the job details\n\n#### Sample Response\n\n```json\n{\n  \"job_details\": {\n    \"company_logo_url\": \"https://assets.ccbp.in/frontend/react-js/jobby-app/netflix-img.png\",\n    \"company_website_url\": \"https://about.netflix.com/en\",\n    \"employment_type\": \"Internship\",\n    \"id\": \"bb95e51b-b1b2-4d97-bee4-1d5ec2b96751\",\n    \"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\",\n    \"skills\": [\n      {\n        \"image_url\": \"https://assets.ccbp.in/frontend/react-js/jobby-app/docker-img.png\",\n        \"name\": \"Docker\"\n      },\n      ...\n    ],\n    \"life_at_company\": {\n      \"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.\",\n      \"image_url\": \"https://assets.ccbp.in/frontend/react-js/jobby-app/life-netflix-img.png\"\n    },\n    \"location\":\"Delhi\",\n    \"package_per_annum\":\"10 LPA\",\n    \"rating\":4\n  },\n  \"similar_jobs\": [\n    {\n      \"company_logo_url\": \"https://assets.ccbp.in/frontend/react-js/jobby-app/netflix-img.png\",\n      \"employment_type\": \"Freelance\",\n      \"id\": \"2b40029d-e5a5-48cc-84a6-b6e12d25625d\",\n      \"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.\",\n      \"location\": \"Delhi\",\n      \"rating\": 4,\n      \"title\": \"Frontend Engineer\"\n    },\n    ...\n  ]\n}\n```\n\n\u003c/details\u003e\n\n### Quick Tips\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to view\u003c/summary\u003e\n\u003cbr\u003e\n\n- To convert a list of items as a comma-separated string we can use the array method `join()`\n\n\u003c/details\u003e\n\n### Important Note\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to view\u003c/summary\u003e\n\n\u003cbr/\u003e\n\n**The following instructions are required for the tests to pass**\n\n- `Home` Route should consist of `/` in the URL path\n- `Login` route should consist of `/login` in the URL path\n- `Jobs` route should consist of `/jobs` in the URL path\n- `Job Item Details` route should consist of `/jobs/:id` in the URL path\n- No need to use the `BrowserRouter` in `App.js` as we have already included in `index.js`\n\n- User credentials\n\n  ```text\n   username: rahul\n   password: rahul@2021\n\n  ```\n\n- Wrap the `Loader` component with an HTML container element and add the `testid` attribute value as **loader** to it\n\n  ```jsx\n  \u003cdiv className=\"loader-container\" testid=\"loader\"\u003e\n    \u003cLoader type=\"ThreeDots\" color=\"#ffffff\" height=\"50\" width=\"50\" /\u003e\n  \u003c/div\u003e\n  ```\n\n- The HTML button element with search icon in Jobs Route should have the `testid` attribute value as **searchButton** to it\n\n  ```jsx\n  \u003cbutton type=\"button\" testid=\"searchButton\"\u003e\n    \u003cBsSearch className=\"search-icon\" /\u003e\n  \u003c/button\u003e\n  ```\n\n- The profile image in Jobs Route should have the alt as **profile**\n- The company logo images in Jobs Route should have the alt as **company logo**\n- The company logo image in Job Item Details Route should have the alt as **job details company logo**\n- The life at company image in Job Item Details Route should have the alt as **life at company**\n- The skill images in the Job Item Details Route should have the alt as the value of the key `name` from each object in the **skills** list in jobDetailsResponse\n- The company logo image in similar job item in Job Item Details Route should have the alt as **similar job company logo**\n\u003c/details\u003e\n\n### Resources\n\n\u003cdetails\u003e\n\u003csummary\u003eImage URLs\u003c/summary\u003e\n\n- [https://assets.ccbp.in/frontend/react-js/home-lg-bg.png](https://assets.ccbp.in/frontend/react-js/home-lg-bg.png)\n- [https://assets.ccbp.in/frontend/react-js/home-sm-bg.png](https://assets.ccbp.in/frontend/react-js/home-sm-bg.png)\n- [https://assets.ccbp.in/frontend/react-js/profile-bg.png](https://assets.ccbp.in/frontend/react-js/profile-bg.png)\n- [https://assets.ccbp.in/frontend/react-js/logo-img.png](https://assets.ccbp.in/frontend/react-js/logo-img.png) alt should be **website logo**\n- [https://assets.ccbp.in/frontend/react-js/failure-img.png](https://assets.ccbp.in/frontend/react-js/failure-img.png) alt should be **failure view**\n- [https://assets.ccbp.in/frontend/react-js/no-jobs-img.png](https://assets.ccbp.in/frontend/react-js/no-jobs-img.png) alt should be **no jobs**\n- [https://assets.ccbp.in/frontend/react-js/jobby-app-not-found-img.png](https://assets.ccbp.in/frontend/react-js/jobby-app-not-found-img.png) alt should be **not found**\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eColors\u003c/summary\u003e\n\n\u003cbr/\u003e\n\u003cdiv style=\"background-color: #64748b; width: 150px; padding: 10px; color: white\"\u003eHex: #64748b\u003c/div\u003e\n\u003cdiv style=\"background-color: #4f46e5; width: 150px; padding: 10px; color: white\"\u003eHex: #4f46e5\u003c/div\u003e\n\u003cdiv style=\"background-color: #f8fafc; width: 150px; padding: 10px; color: black\"\u003eHex: #f8fafc\u003c/div\u003e\n\u003cdiv style=\"background-color: #272727; width: 150px; padding: 10px; color: white\"\u003eHex: #272727\u003c/div\u003e\n\u003cdiv style=\"background-color: #ffffff; width: 150px; padding: 10px; color: black\"\u003eHex: #ffffff\u003c/div\u003e\n\u003cdiv style=\"background-color: #b6c5ff; width: 150px; padding: 10px; color: black\"\u003eHex: #b6c5ff\u003c/div\u003e\n\u003cdiv style=\"background-color: #6366f1; width: 150px; padding: 10px; color: white\"\u003eHex: #6366f1\u003c/div\u003e\n\u003cdiv style=\"background-color: #2c364c; width: 150px; padding: 10px; color: white\"\u003eHex: #2c364c\u003c/div\u003e\n\u003cdiv style=\"background-color: #000000; width: 150px; padding: 10px; color: white\"\u003eHex: #000000\u003c/div\u003e\n\u003cdiv style=\"background-color: #f1f5f9; width: 150px; padding: 10px; color: black\"\u003eHex: #f1f5f9\u003c/div\u003e\n\u003cdiv style=\"background-color: #fbbf24; width: 150px; padding: 10px; color: white\"\u003eHex: #fbbf24\u003c/div\u003e\n\u003cdiv style=\"background-color: #202020; width: 150px; padding: 10px; color: white\"\u003eHex: #202020\u003c/div\u003e\n\u003cdiv style=\"background-color: #cbd5e1; width: 150px; padding: 10px; color: black\"\u003eHex: #cbd5e1\u003c/div\u003e\n\u003cdiv style=\"background-color: #7e858e; width: 150px; padding: 10px; color: black\"\u003eHex: #7e858e\u003c/div\u003e\n\u003cdiv style=\"background-color: #121212; width: 150px; padding: 10px; color: white\"\u003eHex: #121212\u003c/div\u003e\n\u003cdiv style=\"background-color: #475569; width: 150px; padding: 10px; color: white\"\u003eHex: #475569\u003c/div\u003e\n\u003cdiv style=\"background-color: #ff0b37; width: 150px; padding: 10px; color: white\"\u003eHex: #ff0b37\u003c/div\u003e\n\u003cbr/\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eFont-families\u003c/summary\u003e\n\n- Roboto\n\u003c/details\u003e\n\n\u003e ### _Things to Keep in Mind_\n\u003e\n\u003e - All components you implement should go in the `src/components` directory.\n\u003e - Don't change the component folder names as those are the files being imported into the tests.\n\u003e - **Do not remove the pre-filled code**\n\u003e - Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkirankumar-matham96%2Fjobby-app-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkirankumar-matham96%2Fjobby-app-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkirankumar-matham96%2Fjobby-app-react/lists"}