Job List

• Demo
• Video
• Design

Implemented Tasks

• Implemented layout by using HTML/CSS/ReactJS/Tailwindcss.
• An app has 2 pages:
  • Job list- is adaptive(less 1024px is tablet and mobile mode)
  • Detailed Job - is adaptive(less 1024px is tablet and mobile mode)
• Implemented functionality by using React/Redux/TypeScript.
• Was used GoogleAPI for showing map of place with geocoordinates.
• The app has an opportunity to specified a rating of a choosed job, just clicked on a star.
• Was used LocaleStorage for an opportunity showing data after reloaded Detailed Job page.

Features

• The app accepts data from the API.
• There are 20 rows in a recived list.
• Implemented pagination.
• There are 5 "jobs" per page.
• An user can see detailed information on a screen after clicked on a title of job.
• The app shows map the current place.

Development environment

• VS Code

Dependencies

• @headlessui/react: ^1.7.4,
• @heroicons/react: ^2.0.13,
• @reduxjs/toolkit: ^1.9.0,
• @testing-library/jest-dom: ^5.16.5,
• @testing-library/react: ^13.4.0,
• @testing-library/user-event: ^13.5.0,
• @types/google.maps: ^3.50.5,
• react: ^18.2.0,
• react-dom: ^18.2.0,
• react-redux: ^8.0.5,
• react-router-dom: ^6.4.3,
• react-scripts: ^5.0.1,
• redux: ^4.2.0,
• stylelint: ^14.15.0,
• web-vitals: ^2.1.4

devDependencies

• @typescript-eslint/eslint-plugin: ^5.43.0,
• autoprefixer: ^10.4.13,
• eslint: ^8.27.0,
• eslint-config-standard-with-typescript: ^23.0.0,
• eslint-plugin-import: ^2.26.0,
• eslint-plugin-n: ^15.5.1,
• eslint-plugin-promise: ^6.1.1,
• eslint-plugin-react: ^7.31.10,
• gh-pages: ^4.0.0,
• postcss: ^8.4.19,
• stylelint-config-recommended: ^9.0.0,
• tailwindcss: ^3.2.3,
• typescript: ^4.9.3

Installing

• Fork and clone this repository
• Run npm install in your terminal
• Run npm start