Rental Management App

Customer Dashboard
Seller Dashboard
Inbox
Profile Section
Product Page
Home Page

Inspiration

The inspiration came from a simple observation: we all have expensive items sitting in our closets—a power drill for a single project, a high-end camera for one vacation, or event supplies for a single party. At the same time, we've all needed an item for a short-term task but didn't want the high cost or waste of buying it new.

We wanted to build the bridge between these two groups. Our goal was to create a trusted, community-based "library of things" that promotes a circular economy, helps people save money, and allows item owners to earn passive income from their "idle assets."

What it does

RentalApp is a full-stack, peer-to-peer marketplace that allows users to:

As a Seller: Sign up and easily list items for rent. They get a dedicated Seller Dashboard to manage their products, view incoming rental requests, and Approve or Decline them.

As a Customer: Browse a public marketplace of all available products. They can request to book an item for a specific date range, track the status of their rentals on a Customer Dashboard, and securely upload their profile information.

For Both: Once a rental is approved, a private chat room is instantly created, allowing the Customer and Seller to communicate in real-time to coordinate pickup and return, all from within the app's Inbox.

How we built it

We built this as a full-stack application with a decoupled frontend and backend.

Frontend (Client): A responsive Next.js 14 app built with TypeScript, using shadcn/ui and Tailwind CSS for a modern, beautiful UI. We used Zustand as our global state manager to keep the user's login status perfectly in sync across all components, like the Navbar.

Backend (Server): A robust REST API built with Node.js and Express.js, connected to a MongoDB Atlas database via Mongoose. Authentication is handled securely using JWT (JSON Web Tokens) and http-only cookies.

Real-Time Chat: We implemented a real-time chat feature using Socket.IO. The backend creates specific "rooms" for each booking, and the frontend client joins these rooms to send and receive messages instantly.

Services & Deployment: We used Cloudinary for all image hosting (profile pictures, product photos) and Web3Forms for our serverless contact form. The frontend is deployed on Vercel, and the Node.js backend is deployed on Render.

Challenges we ran into

Our biggest and most frustrating challenge was a classic "stale state" problem. When a user would log in or sign up, they would be redirected to the homepage, but the Navbar would still show "Login / Sign Up." The Navbar, being a separate component, had no way of knowing that the user's authentication status had changed on a different page.

We solved this by implementing Zustand as a lightweight global state manager. Instead of just redirecting, the Login and Signup pages now update a central "user store" with the new user's data. The Navbar is subscribed to this store, so the moment the user is set, the Navbar instantly and automatically re-renders to show the user's dashboard and profile picture. This fixed the bug everywhere and made the entire application feel much more responsive.

Accomplishments that we're proud of

We are incredibly proud of building a truly end-to-end, full-stack application in such a short time, not just a simple prototype.

Our biggest accomplishment is the real-time chat and booking system. The logic that connects a Customer and Seller through a booking, approves it, automatically marks the product as "Rented Out," and then creates a private chat room for them is a complex, professional feature that we are thrilled to have working perfectly.

What we learned

This project was a deep dive into the realities of full-stack development. We learned:

State Management is Critical: We learned firsthand why global state management (like Zustand) is not just optional but an absolute necessity in a modern React application to prevent a stale and buggy UI.

Deployment is Half the Battle: Architecting the code is one thing; deploying it is another. We learned how to deploy a complex "monorepo" to two different platforms (Vercel and Render) and expertly debug the real-world CORS and environment variable issues that connect them.

The Power of Decoupling: Having a separate backend and frontend made it much easier to debug. When the chat failed, we could isolate if the problem was the frontend emitting or the backend listening.

What's next for Rental Management App

This is a strong foundation, and we're excited to build on it. Our immediate next steps are:

Payment Integration: Integrate Stripe or Razorpay to securely handle rental payments and security deposits.

Advanced Calendar System: Upgrade our inventory logic. Instead of just "available" or "rented," we will implement a proper calendar system that locks a product only for the specific dates it's booked, allowing for future bookings.

Notifications: Add push notifications to instantly alert a seller of a new rental request or a customer of an approval.

Location-Based Search: Implement a map and search feature to allow users to find items available near their location.