ComRent is a full-stack application designed to streamline the management of a computer rental center. It provides a real-time dashboard for monitoring PC statuses, a user-facing payment and session management interface, and a comprehensive admin panel for analytics, configuration, and control.
This project simulates a real-world scenario for a PC rental business, allowing users to select available computers, make payments, and manage their sessions. Admins have a powerful backend interface to oversee operations, track revenue, manage pricing, and assist users. The application is built with a modern tech stack, prioritizing a responsive user experience and robust administrative control.
This section details the collaborative process of building the ComRent application.
The project began with a simple but powerful idea: create a real-time management dashboard for a computer rental shop. We established a core set of features to build an MVP (Minimum Viable Product):
- A "User View" with a grid of PCs showing their live status (Available, In Use, etc.).
- A "Admin View" with a detailed table to monitor and manage all PCs.
- A complete user flow: select a PC, choose a rental duration, simulate payment, and start a timed session.
- An admin panel for approving sessions, managing PC statuses, and overseeing operations.
With the plan in place, we built the application from the ground up using a modern tech stack. The initial development focused on creating the backend APIs to manage PC statuses, pricing, and user sessions, and building the frontend components with React, Next.js, and ShadCN UI for a clean, professional look. We established the two primary interfaces: the visual grid for users and the data-rich table for admins, along with a role-switcher to move between them.
As the core was solidified, we integrated key services to enhance functionality:
- Genkit & Resend: We implemented a Genkit flow to power our email system. This flow connects to the Resend API, allowing admins to generate and send customized invoices directly from the dashboard, complete with attached payment screenshots. This provided a seamless, professional communication channel with customers.
- QR Code Payments: To enhance the realism of the payment process, we integrated QR code images for GCash, Maya, and PayPal, making the user-facing payment screen more intuitive and visually engaging.
With the application ready for the world, we chose Railway as our deployment platform. The process involved:
- Pushing the finalized code to a GitHub repository.
- Connecting the repository to a new project on Railway.
- Configuring the environment, including setting up the necessary environment variables (
RESEND_API_KEY,GEMINI_API_KEY) and build commands. - Adjusting the
package.jsonstartscript tonext start -p $PORT, a crucial step that allows the hosting provider to dynamically assign the correct port. - Triggering a deployment, which Railway then automatically built and launched, making the application live and accessible on the web.
Through this journey, we not only built a functional application but also navigated and solved complex, real-world development and deployment challenges.
- Real-Time PC Status Grid: Color-coded cards display the live status of each PC (Available, In Use, Pending Payment, Maintenance, etc.).
- User Session Flow: Users can click an available PC to start the rental process, select session duration, and simulate a payment using QR codes.
- Live Session Timer: Users can see their remaining time with a live countdown timer and receive alerts as their session nears its end.
- Admin Dashboard: A centralized view for admins to monitor all PCs, manually change statuses, and manage user sessions.
- Role-Based Views: Easily switch between the "User" view and the "Admin" view to experience both sides of the application.
- Analytics & Reporting: The admin panel includes a detailed analytics dashboard to track revenue, sessions, peak usage hours, payment methods, and PC popularity.
- Dynamic Pricing Management: Admins can add, edit, or delete pricing tiers for different session durations.
- Email Invoice Template Editor: Admins can edit a master template for email invoices that are sent to customers.
- Integrated Chat: A built-in chat system allows users to request help and admins to respond from the dashboard.
- Notification System: Admins receive real-time notifications with sound alerts for important events like new payment approvals or finished sessions.
- Select PC: From the main grid, the user clicks an "Available" PC.
- Start Session: A dialog appears. The user confirms they want to start a session, which takes them to the payment page. The PC's status changes to "Pending Payment".
- Choose Duration & Payment: The user selects their desired rental time (e.g., 1 hour) and a payment method (e.g., GCash).
- Pay & Upload Proof: The user scans the displayed QR code with their mobile app to pay. They then upload a screenshot of the successful transaction.
- Notify Admin: After uploading, the user clicks "I Have Sent The Payment". The PC's status changes to "Pending Approval", and a notification is sent to the admin.
- Session Start: Once the admin approves the payment, the user's screen automatically updates, showing a live countdown timer. The PC's status is now "In Use".
- Session End: When the timer runs out, the user is notified with an alarm, and the PC's status changes to "Time's Up".
- Monitor Dashboard: The admin views a detailed table of all PCs and their live statuses.
- Receive Notification: A new notification with a sound alert appears for a PC that is "Pending Approval".
- Verify Payment: The admin clicks the "Proof" icon in the table to view the user's payment screenshot in a modal window.
- Approve Session: The admin changes the PC's status from "Pending Approval" to "In Use". This action automatically starts the session timer on the user's end.
-
Oversee & Manage: Beyond the core session flow, the admin has access to a powerful suite of tools via the sidebar navigation:
-
Chat: Communicate in real-time with users to provide support or answer questions directly from the dashboard.
-
Email Invoice: Send a customized email invoice to the user with the payment proof attached for their records.
-
Analytics: Switch to the Analytics tab to view comprehensive charts on revenue, sessions, peak hours, payment methods, and which PCs and session durations are most popular.
-
Pricing: In the Pricing tab, the admin can dynamically add, edit, or delete rental duration tiers and their corresponding prices.
-
Invoice Layout: Navigate to the Invoice Layout tab to edit the master template used for all generated email invoices, ensuring consistent and professional branding.
-
Audit Log: The Audit Log provides a chronological record of all significant actions taken by the admin, such as status changes, PC additions/deletions, and template updates.
-
-
Reset PC: Once a user's session is over ("Time's Up"), the admin can reset the PC by changing its status to "Available", making it ready for the next customer.
-
v1.5 (Analytics Overhaul)
- Added comprehensive analytics dashboard with multiple charts.
- Implemented daily and monthly performance tracking (Revenue & Sessions).
- Added charts for Peak Hours, Payment Method Distribution, and Live PC Status.
- Included a "Session Duration per PC" line graph to visualize popularity trends.
- Added key stat cards: Total Revenue, Total Sessions, Avg. Revenue/Session, Avg. Session Duration, and Active PCs.
-
v1.4 (Payment & UI Enhancements)
- Integrated real QR code images for GCash, Maya, and PayPal payment methods.
- Added a "How-to" guide popover on the payment page to assist users.
- Fixed a bug where a PC's status didn't update to "Pending Payment" upon selection.
-
v1.3 (Core Admin & User Features)
- Implemented a master email invoice template editor for admins.
- Developed a real-time chat system for user-admin communication.
- Created a notification panel with sound alerts for admins.
- Added a complete audit log to track all admin actions.
- Implemented dynamic pricing management in the admin panel.
-
v1.0 (Initial Release)
- Core application structure with Next.js and ShadCN.
- Real-time PC status grid for users.
- Basic admin dashboard with a table view.
- User session flow from PC selection to simulated payment.
- Framework: Next.js (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: ShadCN UI, Lucide Icons
- Charting: Recharts
- State Management: React Hooks (useState, useEffect, useContext)
- AI Integration: Genkit (for email generation flows)
- Email Sending: Resend
- Deployment: Railway
- Domain Registration: Hostinger
To get a local copy up and running, follow these simple steps.
- Node.js (v18 or newer recommended)
- npm, yarn, or pnpm
-
Clone the repository:
git clone <your-repository-url> cd comrent
-
Install dependencies:
npm install
-
Set up environment variables: Create a
.envfile in the root of the project and add the necessary API keys.RESEND_API_KEY=your_resend_api_key GEMINI_API_KEY=your_google_ai_api_key
-
Run the development server:
npm run dev
Open http://localhost:9002 to view it in your browser.
This application is configured for deployment on platforms like Railway or Vercel.
The package.json start script is set to next start -p $PORT, which allows the hosting provider to dynamically assign the port for the application to run on. Simply connect your GitHub repository to your hosting provider of choice, and it should build and deploy automatically.
- Full User Authentication: Implement a complete user account system where users can register, log in, view their session history, and save payment methods.
- PC Reservation System: Allow users to book or reserve a specific PC for a future time slot.
- Real Payment Gateway: Replace the simulated QR code flow with a real payment gateway integration like Stripe for automated payment confirmation.
- Advanced PC Management: Add features for admins to remotely lock, restart, or shut down PCs directly from the dashboard.
- Data Persistence: Replace the in-memory data stores with a proper database (e.g., Firebase Firestore, Supabase, or a traditional SQL database) to persist all data.
- This project was bootstrapped and developed with the assistance of Firebase Studio.
- UI components are from the excellent ShadCN UI library.
- Charting capabilities provided by Recharts.
- Email delivery is powered by Resend.
- Icons provided by Lucide.
- Domain is powered by Hostinger.
- Webhosting is powered by Railway.
- Version control is saved through Github
This project is open-source and available under the MIT License.