Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/aaronjai/car_showcase

Web App that presents various car types and showcases comprehensive information...
https://github.com/aaronjai/car_showcase

nextjs rapidapi seo-optimization tailwindcss typescript

Last synced: about 1 month ago
JSON representation

Web App that presents various car types and showcases comprehensive information...

Awesome Lists containing this project

README

        

# 🚗 car_showcase
This Car Showcase website utilises next.js and server-side rendering capabilities that presents various car types. It presents detailed information in a well-maintained format, advanced filtering, and pagination support for enhancing user experience.

## 😢 Issue
The car images in our cards are fetched from an API from Imagin Studios, whereby the current one used is now likely to be invalid and requires authorised business users, including other services I could find.

## 🛠️ Tech Stack
- Next.js
- TypeScript
- Tailwind CSS

## 👑 Features

🔍 **Home Page**: Showcases a display of cars fetched from third-party APIs (one currently broken) which provides an engaging introduction to a diverse range of cars.

🔍 **Exploration and Filtering**: Users can explore a variety of cars from around the world, where criteria (e.g., model, manufacturer, fuel type) can be met via the search and filter system.

🔍 **Server-Side Rendering**: Transition from client-side to server side rendering which enhances performance and smoother browsing experience. The final commit does convert elements to client side as a educational tool of what it looks like to implement, but also to fix a persistent scroll-reset bug from previous next.js versions.

🔍 **Pagination**: Easy navigation through large datasets of cars.

🔍 **MetaData Optimisation and SEO**: Optimises metadata for car listing, enhanced search engine optimisation (SEO) and ensuring better visibility on search engine results page.

🔍 **TypeScript Types**: TypeScript provides robust typing for enhanced code quality and better development

🔍 **Responsive Website Design**: Website is visually pleasing and responsive, providing optimal experience across various device sizes.