📖 About The Project

CarShare is a modern, frontend-only car-sharing platform designed to showcase a futuristic and seamless user experience. Built with React, this project emphasizes a sleek, dark-themed UI with fluid animations powered by Framer Motion. The application provides a complete user flow for booking a ride, from authentication to selecting a car and destination.

This project is an excellent example of what can be achieved with modern frontend technologies. It's designed to be a portfolio piece that demonstrates skills in UI/UX, state management with Context API, and creating a responsive, mobile-first web application.

✨ Features

🎯 Core Features

Feature	Description
🔐 Secure Authentication	Complete login/signup with validation & protected routes using Context API.
🗺️ Custom Map System	Interactive Leaflet map for location picking without relying on Google Maps API.
🚗 Real-time Booking	A step-by-step, animated ride booking process that is intuitive and user-friendly.
💳 Multiple Ride Types	Choose from Economy, Premium, SUV & Luxury options to suit your needs.
📱 Fully Responsive	A mobile-first design ensures a seamless experience on all devices.
🌙 Dark Futuristic Theme	A modern glassmorphism UI design that is visually stunning and easy on the eyes.
👤 User Profile	Manage your profile and view your booking history.

🎬 Animations & UI Effects

The UI is brought to life with a variety of animations and effects to create a dynamic and engaging user experience.

Animation	Technology	Description
✨ Page Transitions	Framer Motion	Smooth, animated transitions between different pages and routes.
🌊 Smooth Scrolling	CSS & Observer API	Implemented with CSS and the Intersection Observer API for performance.
💫 Floating Particles	Pure CSS	A futuristic background effect with floating particles created with CSS animations.
🔄 Loading Spinners	CSS Keyframes	Custom CSS Keyframe animations provide visual feedback during loading states.
🎭 Micro-interactions	Framer Motion	Subtle yet engaging interactions on buttons, cards, and other UI elements.
🌈 Gradient Animations	CSS Background	Animated gradients on various elements to create a dynamic and modern look.
📊 Counter Animations	React CountUp	Numbers dynamically count up to their final value for a more engaging display.
🎪 3D Card Effects	CSS Transform	On hover, cards have a 3D effect, making the UI feel more interactive.
🗺️ Map Animations	React-Leaflet	Smooth zoom and pan animations on the interactive map.
🔔 Toast Notifications	React Hot Toast	Animated and customizable toast notifications for user feedback.

🚀 Quick Start

Prerequisites

Make sure you have Node.js and npm installed on your machine.

Node.js >= 14.0.0
npm >= 6.0.0

Installation

# 1. Clone the repository
git clone https://github.com/kinshukkush/uber-car-sharing.git

# 2. Navigate to the project directory
cd uber-car-sharing

# 3. Install dependencies
npm install

# 4. Start the development server
npm start

🌐 Access the App

Environment	URL
Local	http://localhost:3000
Production	https://kinshukkush.github.io/uber-car-sharing/

---

👨💻 Developer

Kinshuk Saxena

Made with ❤️ and 🚗 by Kinshuk Saxena

⭐ Star this repo if you found it helpful! ⭐

---