This project is a simple Vehicle Management System built using Next.js and TailwindCSS. The app allows users to view a list of vehicles, filter them based on various parameters (such as manufacturer, type, year, etc.), and see detailed information about each vehicle.
- View Vehicle List: Display all available vehicles.
- Filter and Sort Vehicles: Users can filter vehicles by manufacturer, type, and year, and sort them by price or year.
- Responsive Design: Optimized for both desktop and mobile views.
- Detailed Vehicle Information: Users can view detailed information about a vehicle, including its price, mileage, and features.
- Next.js
- TailwindCSS + DaisyUI
- TypeScript
Follow these steps to get your development environment set up.
Ensure you have the following installed:
- Node.js (v14 or higher)
- npm (v6 or higher) or yarn
- Clone the repository:
git clone https://github.com/NicoGallego/gbh-fullstack-test.git
cd gbh-fullstack-test- Install dependencies:
If you are using npm:
npm installIf you are using yarn:
yarn install- Run the development server:
If you are using npm:
npm run devIf you are using yarn:
yarn devOpen your browser and go to http://localhost:3000 to see the app in action.
- Important Files:
/src/app/vehicles/[id]/page.tsx: Page displaying detailed information of a specific vehicle. /src/app/vehicles/page.tsx: Page displaying the list of vehicles with sorting and filtering capabilities. /src/utils/dataHandler.ts: Contains functions for fetching and manipulating vehicle data.
- Usage
On the main page, you can see the list of available vehicles. You can filter them by manufacturer, type, and year, and sort the list by price or year.
Clicking on any vehicle will redirect you to the vehicle details page, where you can see additional information such as price, mileage, fuel type, and features.