Role: developer
Individual project
This website serves as a platform for a car rental company operating in Ukraine. It allows users to explore available cars for rent, filter them based on various criteria such as brand and rental price, add favorite listings, and contact the company for rental inquiries. It simplifies the process of finding and renting a car for individuals seeking transportation solutions in Ukraine. It consists of three main pages:
- Home page: contains general information about the services provided by the company. Users can navigate between pages using the menu. Clicking on the logo also redirects users to the home page.
- Catalog page: displays a list of cars available for rent. Initially, 12 advertisements are shown, and additional ones can be loaded by clicking the "Load more" button. Users can filter advertisements by brand, rental price, and mileage range using a dropdown menu. Each advertisement card includes detailed information about the car. Users can add advertisements to their favorites by clicking the heart icon on each card. This action is accompanied by a notification implemented using the react-toastify library. Clicking on the "Learn more" button opens a modal window with detailed information about the car and its rental conditions. The "Rental car" button provides users with a direct link to contact a manager. Additionally, there is a "Scroll to Top" button that returns users to the top of the page.
- Favorites page: shows advertisements that the user has added to favorites. Advertisement can be removed by clicking again on the heart icon.
- Developed using React.js with React Router for routing.
- State management is handled using Redux.
- Axios library is used for making API requests.
- Semantic and valid HTML markup with responsive design.
- Styled with CSS modules.
- Loader component is displayed while asynchronous data is being fetched. It also responds to changes in the Redux store.
- Navigation is facilitated through a list of NavLink components, directing users to different routes such as the home page, catalog page, and favorites page.
- Backend is implemented using mockapi.io service.
- Advertisements resource is created with the following fields: id, year, make, model, type, img, description, fuelConsumption, engineSize, accessories, functionalities, rentalPrice, rentalCompany, address, rentalConditions, and mileage.
- Pagination is implemented on the backend.
- Filtering options are available for car brands, hourly rental prices and mileage.
- Dropdown for selecting car brands.
- Dropdown for selecting rental prices with a $10 increment.
- Input fields to specify the mileage range for searching advertisements.
This application has the following technologies:
- HTML - a markup language for creating web pages
- CSS - a stylesheet language for styling web pages
- module-css - let to write styles in CSS files but consume them as JavaScript objects for additional processing and safety
- react - a library for web and native user interfaces
- redux - a library that provides a structured and predictable way to manage the state of an application
- react-dom - a library for working with the DOM in React
- redux-toolkit - a library for working with global state of app
- redux-persist - a state management tool that allows the state in a Redux store to persist across browser and app sessions
- axios - a library for making HTTP requests
- react router - a JavaScript framework that lets handle client and server-side routing in React applications
- react-select - a library component used for dynamic form input or as a select menu.
- react-icons - a library of popular icons
- react-hook-form - a library that helps to manage complex forms
- react-toastify - a library for adding toast notifications to the React application
To run this project just follow these steps:
- clone the repository using the command
git clone https://github.com/kpapura/auto_rent_ua - install the dependencies using the command
npm install - start the project using the command
npm start - you will be redirected to the following address
http://localhost:3000