Gearshift Rentals: Car Rental Platform

Overview

Gearshift Rentals is a modern car rental web application where users can browse available cars, check pricing, explore car details, and book rentals through a simple and smooth user experience.

It focuses on clean UI, fast navigation, and a practical booking workflow — making it easy for customers to rent a vehicle quickly.

What Users Can Do

• Browse Cars: View a list of available cars with modern UI cards.
• Search & Filter: Filter cars based on basic categories (price/type).
• Car Details Page: See full car info, features, images and pricing.
• Book a Rental: Select dates and reserve a car with a simple booking flow.
• Responsive Experience: Works smoothly on mobile, tablet, and desktop.

Why I Built This

I wanted to build a real-world booking-based product instead of a typical CRUD project.

This project helped me practice building:

• a complete rental workflow,
• a clean UI/UX experience,
• structured API integration,
• and a real database-backed product.

Tech Stack

• Next.js
• React
• TypeScript
• Tailwind CSS
• Shadcn/ui
• Axios
• MySQL
• Motion (Framer Motion)
• Three.js
• Vercel

Key Features (Implementation Highlights)

• Modern Landing Page: Premium UI with animation-enhanced sections.
• Car Listing UI: Scalable components for displaying and organizing inventory.
• Booking Operations: Structured flow for selecting rental duration and confirmation.
• Database Storage: Cars and booking related data persisted in MySQL.
• Reusable Components: Clean UI components built with shadcn/ui system.

Challenges

• Designing a booking flow that feels simple but still works logically
• Managing rental date selection and availability flow
• Keeping animations smooth (Motion + Three.js) without slowing the app
• Structuring the database properly for cars, users, and bookings

Learnings

• Booking systems are harder than they look — the UX matters more than the UI
• Building clean reusable components makes scaling faster
• MySQL schema design directly affects how easy it is to build APIs
• Motion animations can improve feel only if performance stays tight
• Three.js can enhance “premium feel” but must be used carefully

Future Plans

• Add authentication (users can manage booking history)
• Add payment integration for real checkout
• Add better filtering (brand, transmission, fuel type, etc.)