This ReactJS-based Car Search Website is designed for desktop screens, providing users with the ability to search for cars, paginate through listings, and view car details. The website is built with a focus on functionality and adheres to the specified task requirements.
The following tasks were successfully completed:
- Implemented car search functionality based on car names.
- Paginated car listings with a display of 6 cars per page.
- Styled car cards to match the provided design, maintaining visual similarity.
- Integrated routing with page URLs that change according to pagination (e.g.,
/page/1
,/page/2
, etc.). - Created a fully functional pagination component with next, previous, and page number buttons.
- Limited pagination to display only 10 pages, hardcoded for consistency.
- This project was developed using ReactJS for the frontend.
- CSS frameworks like Bootstrap and Tailwind were not used, and custom styles were applied.
- Global state management was not utilized, as it was not required for this project.
- The project uses mock data from a JSON file, with no API integration.
- Proper code structuring and component composition were followed.
- Best practices in ReactJS development were applied, ensuring a functional and organized codebase.
- The codebase is version-controlled and committed to a repository.
To run this project locally, follow these steps:
-
Clone the repository to your local machine:
git clone <[repository-url](https://github.com/aritradey-CS/Autopilot-beta)>
-
Install the project dependencies:
npm install
-
Start the development server:
npm start
-
Open your browser and navigate to http://localhost:3000 to view the website.
- Enter a car name in the search bar to filter the car listings.
- Navigate through the paginated listings using the pagination controls.
- Click on a car card to view its details (functionality may need to be implemented).
- ReactJS
- JavaScript
- HTML
- CSS
Contributions to this project are welcome. Feel free to open issues and pull requests to improve the website or fix any bugs.