Car Search Website (ReactJS)

Table of Contents

• Description
• Task
• Guidelines
• Getting Started
• Usage
• Technologies
• Contributing
• License

Description

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.

Task

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.

Guidelines

• 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.

Getting Started

To run this project locally, follow these steps:

1. Clone the repository to your local machine:

   git clone <[repository-url](https://github.com/aritradey-CS/Autopilot-beta)>

2. Install the project dependencies:

   npm install

3. Start the development server:

   npm start

4. Open your browser and navigate to http://localhost:3000 to view the website.

Usage

1. Enter a car name in the search bar to filter the car listings.
2. Navigate through the paginated listings using the pagination controls.
3. Click on a car card to view its details (functionality may need to be implemented).

Technologies

• ReactJS
• JavaScript
• HTML
• CSS

Contributing

Contributions to this project are welcome. Feel free to open issues and pull requests to improve the website or fix any bugs.