This repository contains the code of a car rental website, made using Next.js, TypeScript, Tailwind CSS & Headless UI. The project contains the visual designs, animations, cards, API data fetching, SSR (Server-Side Rendering) & all other parts and components which are required and necessary for building a modern website.
👉 Home Page: Showcases a visually appealing display of cars fetched from a third-party API, providing a captivating introduction to the diverse range of vehicles available.
👉 Exploration and Filtering: Explore a wide variety of cars from around the world, utilizing a search and filter system based on criteria such as model, manufacturer, year, fuel type, and make.
👉 Transition to Server-Side Rendering: A seamless transition from client-side rendering to server-side rendering, enhancing performance and providing a smoother browsing experience.
👉 Pagination: For easy navigation through a large dataset of cars, allowing users to explore multiple pages effortlessly.
👉 Metadata Optimization and SEO: Optimize metadata for car listing, enhancing search engine optimization (SEO) and ensuring better visibility on search engine results pages.
👉 TypeScript Types: Utilize TypeScript to provide robust typing for enhanced code quality and better development
👉 Responsive Website Design: The website is designed to be visually pleasing and responsive, ensuring an optimal user experience across various devices.
- React.js - JavaScript Library
- Next.js - Web Development Framework
- TypeScript - Programming Language
- Tailwind CSS - CSS Framework
- Prettier - Code Formatter
- Headless UI - UI Components
- Imagin Cars - Car Images
- Rapid API - Cars Data
To get started with this project, follow these steps:
- Clone the repository:
git clone https://github.com/Mubassim-Khan/CarHub.git-
Open the project in your preferred code editor.
-
Install the project dependencies using npm:
npm install- Set Up Environment Variables by creating a new file named
.envin the root of your project and add the following variables:
RAPID_API_KEY = "your credentials"
RAPID_API_HOST = "your credentials"
NEXT_PUBLIC_IMAGIN_API_KEY = "your credentials"Replace the placeholder values with your actual credentials. You can obtain these credentials by signing up on the corresponding websites from Rapid API and Imagin Cars
- Run the project
npm run dev- Open http://localhost:3000 to view it in your browser.
Contributions to this project are welcome. If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.
- Copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
- This project is a task from TechnoHacks Edu Tech, as a part of Internship Program.
If you have any questions, suggestions, or feedback, you can reach out to the project maintainer:
- LinkedIn : Mubassim Ahmed Khan
- Email: [email protected]
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.