RentWheelZ: A Car Rental Platform

- Parth Agarwal

Abstract
RentWheelZ is a modern web-based car rental application developed using Next.js for the
frontend and Spring Boot for the backend. The platform provides users with a seamless
experience to browse, book, and manage vehicle rentals. Key functionalities include user
authentication, dynamic booking calendars, profile management, and email notifications for
bookings and cancellations. The application prioritizes security through JWT-based
authentication and reliability through integration with Brevo API for email services. This
documentation serves as a complete guide, detailing the design, architecture, features, and
instructions for deploying RentWheelZ.

Introduction
In today’s fast-paced world, convenience and accessibility are at the forefront of user
expectations. RentWheelZ caters to this demand by providing a feature-rich car rental
platform that ensures a smooth, user-friendly experience for customers. Users can
effortlessly search for vehicles, filter options based on preferences, and make bookings
without worrying about double reservations.
Additionally, RentWheelZ ensures transparency and engagement by enabling users to review
and rate vehicles. Secure account management, dynamic profile updates, and a robust
booking system contribute to a holistic user experience. This project also lays a foundation
for future enhancements such as administrative dashboards and payment gateway
integrations.

Architecture/Design
Overview:
The architecture of RentWheelZ is divided into two primary layers:
1. Frontend (Next.js):
o Implements a responsive UI for users to interact with the platform.
o Includes pages such as landing, login, signup, vehicle browsing, and profile
management.
o Handles dynamic calendar booking with real-time updates from the backend.
 2. Backend (Spring Boot):
o Manages business logic, data storage, and API communication.
o Ensures secure user sessions with JWT validation.
o Sends notifications using Brevo API.
o Facilitates CRUD operations for users, vehicles, bookings, and reviews.

Component Structure:
• Frontend Components:
o Landing Page
o Navbar with Authentication Options
o Vehicle List and Detail Views
o Profile Management
o Booking Management
• Backend Modules:
o Models: Users, Vehicles, Reviews, Bookings
o Repositories: Interfaces for database queries
o Services: Business logic and processing
o Controllers: REST APIs for interaction with the frontend

Interaction Flow:
1. User Action:
o User performs an action (e.g., logs in, books a vehicle).
2. API Request:
o The frontend sends an HTTP request to the backend via the REST APIs.
3. Backend Processing:
o Backend validates the request, processes data, and performs necessary
database operations.
4. API Response:
o Backend sends the response back to the frontend, which updates the UI
accordingly.
5. Email Notification:
 o Brevo API triggers email communication for key actions like bookings and
cancellations.

Future-Proofing:
• The modular design allows for easy addition of new features, such as payment
integration or admin dashboards.
• Microservices architecture can be adopted for scalability as the user base grows.

Requirements
Functional Requirements
1. User Authentication and Management
o Enable users to sign up, log in, and reset their passwords via email.
o Provide secure JWT-based session validation for all sensitive actions.
2. Vehicle Browsing and Booking
o Display a list of available vehicles with search and filtering options.
o Prevent bookings for unavailable dates using a dynamic calendar.
3. Profile Management
o Allow users to view and update personal details.
o Display a list of active bookings.
o Enable users to cancel bookings and provide reviews for completed rentals.
4. Email Notifications
o Send confirmation emails for successful bookings and cancellations.
o Ensure timely delivery using Brevo API.
5. Review and Rating System
o Enable users to add reviews and ratings for vehicles they have rented.
o Display aggregated ratings and feedback on vehicle detail pages.

Non-Functional Requirements
1. Performance
o Ensure low-latency interactions for both frontend and backend services.
o Optimize database queries to handle high volumes of bookings and user data.
 2. Scalability
o Design the application to support a growing user base and additional features
like payment gateways.
3. Security
o Protect user data through encrypted communications (HTTPS).
o Implement robust authentication and authorization mechanisms using JWT.
4. Reliability
o Ensure email notifications are sent without fail for critical user actions.
o Use error handling mechanisms to manage API failures gracefully.
5. Maintainability
o Write modular code to facilitate future updates and debugging.
o Use clear naming conventions and documentation for APIs and components.

Technical Stack
Frontend
• Framework: Next.js
o Chosen for its server-side rendering capabilities, enabling faster page load
times and improved SEO.
• Styling: CSS for responsive and visually appealing designs.
• APIs: Axios for communication with the backend.
• Libraries:
o React Calendar for booking interface.

Backend
• Framework: Spring Boot
o Offers robust support for RESTful APIs and seamless integration with database
services.
• Database:
o H2 for data storage (users, bookings, reviews, and vehicles).
• Security: Spring Security with JWT for authentication and authorization.
• Email Service: Brevo API for reliable email delivery.
Other Tools and Platforms
• Version Control: Git and GitHub for collaborative development and version
management.
• Development Tools: IntelliJ IDEA (backend), VS Code (frontend).
• Deployment: Planned for platforms like AWS or Render for hosting scalable services.

Development Details
Frontend Development
1. Landing Page Design:
o Created with engaging animations and a clear call-to-action for login/signup.
o NavBar updated dynamically based on user authentication state.
2. Dynamic Calendar Booking:
o Integrated a calendar component to disable overlapping bookings
dynamically.
o Fetched unavailable dates in real-time from backend APIs.
3. Profile Page Features:
o Implemented editable fields for user details using controlled components.
o Designed booking cards to show current rentals with options to cancel or
rate.

Backend Development
1. Model Relationships:
o Established one-to-many relationships between Users and Bookings, and
between Vehicles and Reviews.
2. Email Notifications:
o Configured Brevo API for asynchronous email delivery.
o Ensured email templates were customizable and clear for users.
3. API Design:
o Used RESTful conventions to design endpoints for CRUD operations.
o Secured endpoints with role-based access control where applicable.
4. Error Handling:
 o Added custom exception handlers for validation errors and unexpected
system failures.

Challenges
Frontend Challenges
1. Dynamic Calendar Integration:
o Problem: Implementing a calendar that accurately displays unavailable
booking dates in real-time.
o Solution: Integrated a React Calendar component, fetching booking data
dynamically from the backend and updating the disabled dates seamlessly.
2. Responsive Design:
o Problem: Ensuring the interface is user-friendly across different screen sizes.
o Solution: Used CSS media queries extensively to build a fully responsive
design.
3. Profile Page Dynamics:
o Problem: Managing live updates for user data and bookings within a single
page.
o Solution: Leveraged conditional rendering and API calls to keep the page
updated without requiring full page reloads.

Backend Challenges
1. Database Selection and Integration:
o Problem: Deciding between different databases for development and testing.
o Solution: Opted for the lightweight H2 Database for development with
Jakarta Persistence API for smooth database interactions.
2. JWT Authentication:
o Problem: Managing token validation securely while keeping the user
experience smooth.
o Solution: Configured a filter to intercept requests, validate tokens, and
refresh session states seamlessly.
3. Email Reliability:
o Problem: Ensuring timely delivery of booking and cancellation emails.
 o Solution: Implemented the Brevo API, and handled email failures with retry
mechanisms and error logging.
4. Concurrency in Bookings:
o Problem: Preventing overlapping bookings for the same vehicle.
o Solution: Implemented server-side checks and transactional database
operations to ensure data consistency.

Environmental Setup
Clone the project : git clone https://github.com/Springboard-Internship-
2024/RentWheelZ-A-Car-Rental-Website_oct_2024/tree/parth-agarwal

Frontend Setup
1. Pre-requisites:
o Install Node.js (v16 or higher) and npm.
2. Steps:
Open the frontend repository from the root folder: cd car-rental-frontend
o Install dependencies: npm install
o Start the development server: npm run dev
o Access the app at http://localhost:3000.

Backend Setup
1. Pre-requisites:
o Install Java JDK (v17 or higher) and Maven.
o Ensure that the Brevo API key is available.
2. Steps:
o Open the backend repository from the root folder: cd car-rental-backend
o Add the Brevo API key to application.properties:
brevo.api.key=ENTER_BREVO_API_KEY_HERE
o Build and run the backend: mvn clean install and mvn spring-boot:run
o Backend server will start at http://localhost:8080.
3. Database Configuration:
o H2 database is configured for in-memory testing by default.
 o Access the H2 console at http://localhost:8080/h2-console using:
▪ URL: jdbc:h2:mem:testdb
▪ Username: sa
▪ Password: (leave empty).

User Guide
1. Landing Page:
o Open the application at http://localhost:3000.
o Navigate to the login or sign-up page from the navbar.
2. Forgot Password:
o Use the "Forgot Password" link on the login page.
o Enter your email to receive a reset token.
o Use the token to set a new password and regain access.
3. Browsing Vehicles:
o Access the "Vehicles" page from the navbar.
o Use the search bar or filters to narrow down your options.
o Click on a vehicle card to view its details and reviews.
4. Booking a Vehicle:
o On the vehicle detail page, select your desired dates using the calendar.
o Ensure that the dates are available and click "Book Now."
o Check your email for a booking confirmation.
5. Managing Bookings:
o Go to the "Profile" page to view your bookings.
o Cancel a booking or leave a review/rating for completed rentals.
6. Updating Profile:
o Edit your details directly from the "Profile" page and save changes.
o Delete your account with a single click if required.
7. Logging Out:
o Click the "Logout" button in the navbar to end your session securely.
Troubleshooting
Common Issues and Fixes
1. Frontend Not Loading Properly
o Issue: Blank or broken UI after starting the frontend server.
o Cause: Missing dependencies or improper installation.
o Fix:
▪ Ensure all dependencies are installed: `npm install`
▪ Check for errors in the browser console and fix accordingly.
2. Backend Server Fails to Start
o Issue: Application crashes on running the Spring Boot server.
o Cause: Missing or incorrect configuration, such as the Brevo API key.
o Fix:
▪ Ensure the application.properties file contains the correct API key.
▪ Run Maven clean and install: mvn clean install and mvn spring-
boot:run
3. H2 Database Console Not Accessible
o Issue: Cannot open the H2 console or access test data.
o Cause: H2 database settings not loaded properly.
o Fix:
▪ Verify the H2 URL and credentials in the application.properties file.
▪ Ensure the database is configured with the correct JDBC URL:
spring.datasource.url=jdbc:h2:mem:testdb
4. Emails Not Being Sent
o Issue: No email received for booking confirmation or cancellation.
o Cause: Brevo API misconfiguration or email service failure.
o Fix:
▪ Verify the Brevo API key.
▪ Check the backend logs for Brevo-related errors.
5. JWT Token Issues
 o Issue: Unable to log in or access secured routes.
o Cause: Expired or invalid JWT token.
o Fix:
▪ Clear cookies or storage where the token is saved.
▪ Log in again to generate a fresh token.

Conclusion
The RentWheelZ Car Rental App is a comprehensive platform designed to streamline vehicle
rentals with a robust and user-friendly system. Its well-structured architecture ensures
smooth user experiences, from browsing vehicles to booking and managing rentals. By
leveraging technologies like Next.js, Spring Boot, and the H2 database, the app provides a
seamless integration of frontend and backend functionalities. Features like dynamic
calendars, secure JWT authentication, and email notifications via Brevo enhance usability
and reliability.
Future iterations aim to introduce advanced features such as an admin dashboard and
payment gateway, positioning RentWheelZ as a scalable solution for the car rental industry.
The app's modular design, efficient development practices, and focus on user-centric
workflows make it a promising tool for real-world deployment.

Appendices
1. API Endpoints
1. a) Reviews API
Base URL: /api/reviews
• Get All Reviews
o Endpoint: GET /api/reviews
o Description: Fetches a list of all reviews.
o Response: List of Review objects.
• Get Review by ID
o Endpoint: GET /api/reviews/{id}
o Description: Fetches a review by its ID.
o Query Parameter: token (JWT token)
 o Response: A Review object if found, or appropriate error code.
• Create or Update Review
o Endpoint: POST /api/reviews
o Description: Saves a new review or updates an existing one.
o Query Parameter: token (JWT token)
o Request Body: Review object.
o Response: Created or updated Review object.
• Delete Review
o Endpoint: DELETE /api/reviews/{id}
o Description: Deletes a review by its ID.
o Query Parameter: token (JWT token)
o Response: No content.
• Get Reviews by Vehicle ID
o Endpoint: GET /api/reviews/vehicle/{vehicleId}
o Description: Fetches all reviews for a specific vehicle.
o Query Parameter: token (JWT token)
o Response: List of Review objects.

1. b) Bookings API
Base URL: /api/bookings
• Get Bookings by Customer ID
o Endpoint: GET /api/bookings/customer/{customerId}
o Description: Fetches all bookings made by a specific customer.
o Query Parameter: token (JWT token)
o Response: List of Booking objects.
• Create Booking
o Endpoint: POST /api/bookings/create
o Description: Creates a new booking and sends a confirmation email.
o Query Parameter: token (JWT token)
 o Request Body: Booking object.
o Response: Created Booking object.
• Delete Booking
o Endpoint: DELETE /api/bookings/delete/{bookingId}
o Description: Deletes a booking and sends a cancellation email.
o Query Parameter: token (JWT token)
o Response: No content.
• Get Unavailable Dates
o Endpoint: GET /api/bookings/unavailable-dates/{vehicleId}
o Description: Fetches unavailable dates for a specific vehicle.
o Query Parameter: token (JWT token)
o Response: List of unavailable dates.

1. c) Users API
Base URL: /api/users
• Sign Up
o Endpoint: POST /api/users/signup
o Description: Registers a new user.
o Request Body: User object.
o Response: Registered User object.
• Login
o Endpoint: POST /api/users/login
o Description: Logs in a user and provides a JWT token and user ID.
o Request Body: User object (email and password).
o Response: Pair of JWT token and user ID.
• Forgot Password
o Endpoint: POST /api/users/forgotpass
o Description: Generates a reset token and sends a password reset email.
o Request Body: User object (email).
 o Response: Reset token or error message.
• Reset Password
o Endpoint: POST /api/users/resetpass
o Description: Resets the user's password using a reset token.
o Request Body: Reset token and new password.
o Response: Success or error message.
• Get User by ID
o Endpoint: GET /api/users/{userId}
o Description: Fetches a user by their ID.
o Query Parameter: token (JWT token)
o Response: User object if found.
• Update User
o Endpoint: PUT /api/users/{userId}
o Description: Updates the user's details.
o Query Parameter: token (JWT token)
o Request Body: Updated User object.
o Response: Updated User object.
• Delete User
o Endpoint: DELETE /api/users/{userId}
o Description: Deletes a user by their ID.
o Query Parameter: token (JWT token)
o Response: Success or error message.

1. d) Vehicles API
Base URL: /api/vehicles
• Get All Vehicles
o Endpoint: GET /api/vehicles/all
o Description: Fetches all vehicles.
o Query Parameter: token (JWT token)
 o Response: List of Vehicle objects.
• Get Vehicle by ID
o Endpoint: GET /api/vehicles/vehicle
o Description: Fetches a specific vehicle by its ID.
o Query Parameters: vehicleId, token (JWT token)
o Response: Vehicle object.

2. External Libraries and Tools

• Frontend: React Calendar, Axios for HTTP requests, and Vanilla CSS for styling.
• Backend: Spring Boot, Jakarta Persistence API, Brevo API for email.
• Database: H2 in-memory database.

3. Helpful Resources
• Spring Boot Documentation
• Next.js Documentation
• Brevo API Documentation
• React Calendar GitHub