SriRentABike

The problem

Rental agreements handwritten on paper — slow, error-prone, and easy to lose. Bike availability tracked on a whiteboard with no history of past rentals. Damage reports and payment history were in physical folders that couldn't be searched. Agreement processing took 15 minutes per rental, creating queues during peak tourist season.

Why existing tools failed

Paper rental agreements create a bottleneck. Every rental requires manual form filling, manual bike availability checking, and manual filing. Whiteboard-based availability tracking can't handle concurrent check-ins and check-outs. When a customer returns a bike early, updating availability requires someone to erase and rewrite. Customer records in folders make it impossible to identify repeat customers or track damage patterns.

Constraints

The system had to work on mobile devices and tablets — the counter staff use phones, not desktops. Tourists needed to be able to fill agreements without creating an account. Electronic signatures had to be legally acceptable. PDF generation needed to produce professional, branded rental documents.

Solution

A mobile-first web application with React frontend and Express API backed by Supabase. The core flow: admin creates a guest link, sends it to the customer, customer fills the agreement on their device with a touch-based signature capture, admin reviews and confirms, and the system generates a branded PDF. Bike availability updates automatically with every rental. Guest access tokens provide secure, time-limited access for tourists without requiring account creation.

Architecture

React frontend on Cloudflare Pages. Express API on Railway. Supabase provides PostgreSQL with Row Level Security, authentication, and storage. Puppeteer in the API layer generates PDF rental agreements on demand. The signature capture runs entirely client-side using React Signature Canvas, sending only the signature image data to the API.

Key design decisions

• Guest link flow — admin generates a token, customer fills the agreement without registration. This removes the biggest friction point for tourists.
• React Signature Canvas for touch-friendly signature capture. Works on any device with a touch screen.
• Zustand for state management — lightweight and sufficient for a single-page flow.
• Tailwind CSS responsive design with mobile-first breakpoints. All interactive elements have 48x48px minimum touch targets.
• Priority-based column visibility in admin tables — less critical columns (passport no, email) hide on small screens.
• Puppeteer renders PDFs server-side with company branding injected into the template.

Tech stack

Screenshots

Result

Agreement processing time dropped from 15 minutes to under 3 minutes. Bike availability is now real-time and automatically updated. Customer records, damage reports, and rental history are fully searchable for the first time. The guest link flow eliminated the account-creation barrier for tourists.

Lessons learned

• Touch-based signature capture introduces image quality variability. Setting minimum resolution and providing real-time feedback on signature clarity was essential.

• Puppeteer PDF generation is resource-intensive. Consider caching generated PDFs and only regenerating on data changes.

• Guest link security requires careful expiration and one-time-use enforcement. A leaked token could allow unauthorized access to pending agreements.