🚗 CarRental 5.0 — ASP.NET Core MVC + Three.js

Fast, full-stack car rental platform with an interactive Three.js landing page (no React), robust MVC backend, and PayPal sandbox payments. Experience cutting-edge web development in action!

📥 Download Demo Video | 📖 Live App | 🐛 Report Issue

📋 Table of Contents

• ✨ Overview
• 🎬 Demo & Screenshots
• 🚀 Features
• 🏗️ Architecture
• 🛠️ Tech Stack
• ⚡ Quick Start
• 🔧 Configuration
• 🗄️ Data & Migrations
• 🛣️ API Routes
• ⚡ Performance Notes
• 🧹 Repository Hygiene
• 🏆 Resume Highlights

✨ Overview

Welcome to CarRental 5.0, a showcase of modern web development excellence! This project delivers a complete car rental experience with:

• 🎨 Immersive Landing: Pure Three.js with GLTF models for stunning visuals and lightning-fast load times (no React overhead).
• 🔧 Robust Backend: ASP.NET Core MVC with Entity Framework, authentication, payments, and email integration.
• 💳 Payment Integration: Secure PayPal sandbox transactions with currency conversion.
• 🔍 Advanced Filtering: Multi-criteria search, favorites, reviews, and role-based management.

🗂️ Project Structure

Carrental/
├── Controllers/          # MVC Controllers (Home, Car, Account, etc.)
├── Models/               # Domain entities & ViewModels
├── Views/                # Razor templates
├── Services/             # Business logic (Payments, Email)
├── wwwroot/              # Static assets (Three.js, GLTF models)
├── Migrations/           # EF Core migrations
└── Program.cs            # App startup & configuration

Key Files for Orientation:

• Landing Page: Views/Home/Index.cshtml + wwwroot/Home/assets/js/main.js
• 3D Assets: wwwroot/car1..car4/ (GLTF models)
• Payments: Services/PaypalServices.cs
• Database: Models/CarContext.cs

🎬 Demo & Screenshots

Dive into the action with our interactive demo and key app screens!

🎥 Demo Video

📥 Download & Play Demo Video
Download the MP4 file and play it locally to see the Three.js landing, catalog browsing, booking flow, and payments in action!

📸 Key Screenshots

🖼️ Screenshots Gallery

Add your own screenshots to docs/screens/ and update paths below:

• Landing Page: docs/screens/landing.png
• Catalog View: docs/screens/catalog.png
• Details/Booking: docs/screens/details.png
• Payment Flow: docs/screens/payment.png

📥 Download Demo Video: docs/assets/Carrentaldemo.mp4

🚀 Features

🎨 Frontend Highlights

• Three.js Landing Page: GLTF model loading with OrbitControls, responsive scaling, and arrow navigation
• Responsive Design: Mobile-friendly UI with vanilla JS/CSS and Swiper for galleries

🔧 Backend Powerhouse

• Advanced Filtering: Make, Model, Type, Color, Price Range, Availability, Favorites, Sorting
• Car Management: Gallery, versions (for sale), reviews, favorites toggle
• Booking System: Date conflict checks, total calculations, completion tracking
• Payment Processing: PayPal sandbox with redirect/return flow and ETB→USD conversion

🔐 Security & Auth

• ASP.NET Identity: User registration, login, roles (Admin, Manager, Provider, Customer)
• Google OAuth: External login integration
• Email Notifications: Confirmation and forgot-password via SMTP with HTML templates

🎤 Extra Features

• Favorites: Many-to-many user-car relationships
• Speech-to-Text: Google Cloud Speech API endpoint for voice inputs
• Role-Based Access: Granular permissions for different user types

🏗️ Architecture

🗺️ Module Map

HTTP Request
    ↓
Controller (Home/Car/Account)
    ↓
Repository / DbContext
    ↓
Domain Models → ViewModels
    ↓
Razor View
    ↓
HTML Response

Parallel: Three.js → GLTFLoader → wwwroot/car{1..4} (MIME-mapped)

Core Controllers: Home, Car, Account, Admin, Role, SpeechToText

🗃️ Domain Model (ER Diagram)

AppUser ──── Favorite ──── Car ──── CarImage
   │            │            │
   │            │            └─── CarVersion (sale variants)
   │            │
   └─── Booking ──── Payment
        │
        └─── Review (via UserId)

Key Relationships:

• Favorite: Composite key (UserId, CarId) for many-to-many
• Booking: Links to Payment via TransactionId, controls IsCompleted
• Car: Supports both rental and sale modes
• Monetary Fields: decimal(18,2) precision via EF mappings

🔄 Key Flows

• Search & List: CarController.Index → Filter pipeline → Paginated results
• Booking (Rent): Create Booking → Redirect to PayPal → Success updates DB
• Purchase (Sale): Simplified flow with IsForSale flag
• Payment: PayUsingPayPal → Approval → Success persists transaction
• Email: BookingConfirmation → HTML template → SMTP send

🛠️ Tech Stack

⚡ Quick Start

Prerequisites

• .NET 6 SDK
• SQL Server (or Docker for local)

Installation

1. Clone & Navigate:

   git clone https://github.com/LeulTew/CarRental-ThreeJS-MVC.git
   cd CarRental-ThreeJS-MVC

2. Configure Environment:

   cp Carrental/Carrental/appsettings.example.json Carrental/Carrental/appsettings.Development.json
   # Edit appsettings.Development.json with your secrets

3. Setup Database:

   dotnet ef database update --project Carrental/Carrental/Carrental.csproj

4. Run the App:

   dotnet run --project Carrental/Carrental/Carrental.csproj

5. Browse: https://localhost:7022/

🐟 Fish Shell Commands

# Restore dependencies
dotnet restore Carrental/Carrental/Carrental.csproj

# Run with hot reload
dotnet run --project Carrental/Carrental/Carrental.csproj

🔧 Configuration

Secure your app with environment variables (recommended for production):

See appsettings.example.json for full structure.

🗄️ Data & Migrations

• DbContext: CarContext (inherits IdentityDbContext<AppUser>)
• Precision: Monetary fields use decimal(18,2) for accurate calculations
• Relationships: Many-to-many Favorite with composite keys

Migration Commands

# Apply existing migrations
dotnet ef database update --project Carrental/Carrental/Carrental.csproj

# Create new migration
dotnet ef migrations add YourMigrationName --project Carrental/Carrental/Carrental.csproj
dotnet ef database update --project Carrental/Carrental/Carrental.csproj

🛣️ API Routes

⚡ Performance & UX Notes

• 🚀 Fast Loading: Pure Three.js with CDN imports minimizes bundle size and TTI
• 📱 Responsive: Adaptive model scaling and touch-friendly controls
• 🔄 State Preservation: Query params maintain filter/pagination state
• 🎯 MIME Types: GLTF assets served correctly via FileExtensionContentTypeProvider

🧹 Repository Hygiene

• Git LFS: Tracks large assets (images, GLTF/GLB, videos, .bacpac) to keep repo lean
• .gitignore: Excludes build artifacts, secrets, Windows artifacts, and bulk datasets
• Ignored Assets: Cars/ folder (optional local data)

🏆 Resume Highlights

This project demonstrates enterprise-level skills:

• Full-Stack Mastery: ASP.NET MVC with EF Core, Three.js integration, payment processing
• Architecture Excellence: Repository pattern, clean domain models, precise mappings
• Security Best Practices: Config binding, env vars, OAuth integration
• Performance Optimization: CDN usage, LFS for assets, responsive design
• DevOps Ready: CI/CD with GitHub Actions, migrations, container-friendly

Perfect for portfolios—showcases modern web dev from 3D graphics to secure payments!

🤝 Contributing

We welcome contributions! Here's how to get started:

1. Fork the repository.
2. Create a feature branch: git checkout -b feature/your-feature.
3. Commit your changes: git commit -m 'Add some feature'.
4. Push to the branch: git push origin feature/your-feature.
5. Open a Pull Request.

Please ensure your code follows the project's style and includes tests where applicable.

📚 Engineering Notes: See docs/summary.md for detailed code insights.