Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/pradyotsrivastava/supacarr-nextjs-tailwind

SupaCarr is an ultimate destination for hassle-free car rental and booking app. Developed with Next.js, Tailwind CSS, and TypeScript, SupaCarr simplifies the car rental process by offering detailed car listings, categorization, and seamless booking. Utilizing Rapid API integration, SupaCarr ensures real-time availability and pricing updates.
https://github.com/pradyotsrivastava/supacarr-nextjs-tailwind

nextjs rapid-api tailwind-css third-party-api typescript

Last synced: about 1 month ago
JSON representation

SupaCarr is an ultimate destination for hassle-free car rental and booking app. Developed with Next.js, Tailwind CSS, and TypeScript, SupaCarr simplifies the car rental process by offering detailed car listings, categorization, and seamless booking. Utilizing Rapid API integration, SupaCarr ensures real-time availability and pricing updates.

Awesome Lists containing this project

README 

        
# SupaCarr - Find, book & rent

![SupaCarr](https://github.com/pradyotsrivastava/supacarr-nextjs-tailwind/assets/126956834/00377136-c339-4d32-894a-ac61c534666a)

1. 🤖 [Introduction](#introduction)

2. ⚙️ [Tech Stack](#tech-stack)

3. 🔋 [Features](#features)

4. 🤸 [Quick Start](#quick-start)

5. 🔗 [Links](#links)



# 🤖 Introduction



Developed with Next.js and leveraging its server-side rendering capabilities, the Car Showcase website presents various car types, showcasing comprehensive information in a well-designed format with advanced filtering and pagination support for an enhanced user experience.



If you're getting started and need assistance or face any bugs, join our active Discord community with over 27k+ members. It's a place where people help each other out.



# ⚙️ Tech Stack



- Next.js

- TypeScript

- Tailwind CSS



# 🔋 Features



👉 **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.



and many more, including code architecture and reusability



# 🤸 Quick Start



Follow these steps to set up the project locally on your machine.



**Cloning the Repository**



**Installation**



Install the project dependencies using npm:



npm install



**Set Up Environment Variables**



Create a new file named `.env` in the root of your project and add the following content:



NEXT_PUBLIC_RAPID_API_KEY=

NEXT_PUBLIC_IMAGIN_API_KEY=



Replace the placeholder values with your actual credentials. You can obtain these credentials by signing up on the corresponding websites from [Rapid API](https://rapidapi.com/apininjas/api/cars-by-api-ninjas/playground/apiendpoint_751d3e33-1f5a-4a8b-afda-f78ffa2219c2) to [Imagin Cars](https://www.imagin.studio/solutions/api)



**Running the Project**



npm run dev



Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.