A responsive car listing and search web application built with Next.js (or React.js), allowing users to search, filter, view details, and manage a wishlist of cars. Ideal for showcasing frontend and API integration skills.
To demonstrate skills in:
- Designing responsive UI
- Fetching and displaying data from APIs
- Managing local storage (Wishlist)
- Real-time DOM updates without reloading
- React/Next.js fundamentals
- Filter by brand, price range, fuel type, and seating capacity
- Search for cars by name
- View car details
- Add/remove cars to/from wishlist using LocalStorage
- Display car images and specs in a grid or list format
- Pagination (10 cars per page)
- Real-time updates for filters/search
- Loading and error states
- Sort by price (Low → High, High → Low)
- Responsive design (mobile-first)
- Dark mode toggle
- Smooth UI animations
| Tech | Usage |
|---|---|
| Next.js | React Framework |
| React.js | Component-based UI |
| TailwindCSS | Styling & Responsiveness |
| LocalStorage | Wishlist persistence |
| useState/useEffect | State Management |
| Vercel | Deployment (optional) |
car-finder-app/ ├── components/ │ ├── CarCard.jsx │ ├── Filters.jsx │ ├── Wishlist.jsx │ ├── Pagination.jsx │ └── SortToggle.jsx ├── pages/ │ ├── api/ │ │ └── cars.js // Mock car API │ ├── index.jsx // Main Home Page │ └── _app.js ├── public/ │ └── images/ // Car images ├── styles/ │ └── globals.css ├── utils/ │ └── carData.js // Static mock data ├── README.md └── package.json
// pages/api/cars.ts
{/* Add your mock API implementation here */}
GitHub Repo: https://github.com/Amittiwari2004/car-finder-app
Live Site: https://car-finder.vercel.app
git clone https://github.com/Amittiwari2004/car-finder-app.git
cd car-finder-app
npm install
npm run dev
Open in browser: http://localhost:3000
- Dark Mode toggle (Tailwind
dark:class) - Animations using
transition,transform, andhovereffects - Scroll to top button
- Realtime search updates without reloads