SELECTED WORK / PROPERTY TECHNOLOGY
RentalGini↗
From finding a space
to taking the next step.
A property discovery experience that connects fresh listings, useful recommendations and clear enquiry journeys.
A team product. This case study focuses on my frontend and engineering contributions.
- My role
- Frontend & engineering
- Product
- Property discovery & enquiries
- Core stack
- Next.js · React · TypeScript
- Focus
- Experience, freshness & delivery
01 / THE CHALLENGE
Many kinds of spaces.
One coherent journey.
Finding a rental space means weighing location, price, amenities and availability across listings that keep changing. Operators need a practical way to publish those listings and receive enquiries.
RentalGini brings PG accommodation, coliving, apartments, student housing, coworking and commercial properties into one discovery platform. My work connected the browsing experience to fresh API data, property publishing and the next useful action.
The engineering briefMake the product responsive, keep property information available in the initial HTML, preserve search context and make form failures recoverable.
02 / MY CONTRIBUTIONS
The details between
a search and an enquiry.
Frontend implementation, REST API integration, rendering, technical SEO and delivery preparation.
Discovery that keeps its context
City, locality, budget, room type and amenities connect to API-backed filters. Listing and detail views keep relevant route and preference state aligned.
Details that support a decision
Property galleries, pricing plans, amenities, location information and FAQs help people compare living spaces and workspaces before making an enquiry.
Recommendations with reasons
Weighted scoring combines location, budget, property type, amenities and browsing signals to produce recommendations with a score and a reason.
A guided publishing flow
Property operators add details, location, amenities, pricing and images through a multi-step journey, with validation and a final review.
Enquiries that recover gracefully
Enquiry, callback and visit requests connect to backend services, with validation, loading, error and success states and Turnstile token handling.
From pricing to a quotation
Pricing-plan interfaces connect to quotation workflows, PDF generation and WhatsApp contact options so a property conversation can continue.
THE PROPERTY SEEKER
Keep the decision moving.
- Choose a location and preferences
- Compare listings and property details
- Review pricing and recommendations
- Enquire, request a callback or arrange a visit
THE PROPERTY OPERATOR
Turn details into a listing.
- Add property and location details
- Set amenities, room types and pricing
- Upload images and review the submission
- Publish through the property submission workflow
03 / SYSTEM & DELIVERY
Fresh data.
A connected interface.
Request-time rendering makes property content available in the initial HTML. APIs power the listing data and enquiry workflows.
Search & preferences
Route and filter state
Next.js rendering
Initial property HTML
REST services
Listings, pricing, enquiries
Useful next actions
Publishing and contact flows
- Interface
- Next.js · React · TypeScript · CSS · Bootstrap
- Data & rendering
- REST APIs · Server-side fetching · Request-time rendering
- Workflows
- Weighted recommendations · React PDF · Cloudflare Turnstile
- Delivery setup
- AWS EC2 · Node.js · Nginx · PM2 · CloudFront
RentalGini’s delivery setup uses EC2, Nginx and PM2 with CloudFront configuration. Preserving fresh property HTML through the cache is an important delivery consideration.
04 / PERFORMANCE & PROTECTION
Results, with
the measurement attached.
The supplied project notes record these local production-build CSS comparisons and a reported production blocked-request count.
Smaller initial CSS payloads
Estimated compressed bytes across three measured pages after scoping styles, removing a global icon stylesheet and deferring optional interfaces.
Unwanted requests blocked
Reported production result from contributions to protection against unwanted crawling, scraping and high-volume automated traffic.
- Turnstile token handling in enquiry forms
- Expiry, errors and retry behavior
- Legitimate access kept central to the work
This is a request count, not a count of attacks, companies or users. The reporting window and raw security logs were not supplied; a confirmed DDoS classification is not claimed.
Recorded CSS payload comparisons
Estimated compressed initial CSS bytes. These measure payload size separately from load timing, field Core Web Vitals or Lighthouse scores.
| Page | Before, bytes | After, bytes | Reduction |
|---|---|---|---|
| Homepage | 134,209 | 97,174 | 27.6% |
| Pricing | 134,800 | 96,938 | 28.1% |
| Contact | 125,909 | 88,021 | 30.1% |
05 / ENGINEERING DECISIONS
The choices
behind the interface.
Open a decision to explore the implementation and the constraint it addresses.
01Fresh listings without a full rebuild
Property information changes frequently. I used request-time server rendering and REST API integration so listing content is available in the initial HTML and can update on a subsequent request. The delivery configuration must preserve that freshness: caching assets and caching property HTML need different decisions.
02One contract for filters and navigation
Complex filters can drift when the interface, URL and API use different values. I normalized the state passed between route parameters, saved preferences and API payloads, keeping the browsing context relevant as a person moves between listing and detail pages.
03Search visibility across similar routes
I contributed dynamic metadata, canonical URLs, structured data, sitemaps, location routes and path-based pagination. The aim was to make each route’s purpose clear and support discovery of fresh property content. Those implementation changes do not establish an increase in rankings.
04Less initial work, optional features on demand
I hosted Inter fonts locally, scoped homepage and property-detail styles, removed the global Font Awesome stylesheet dependency and deferred optional callback forms and city-selection dialogs. The CSS comparisons below show the reported payload change; timing and field performance need separate measurements.
06 / WHAT I TAKE FORWARD
Clear state.
Honest evidence.
Keep filter state explicit, distinguish fresh server data from cached assets, make form failures recoverable and verify the final delivery path. Measure a change in the units the evidence supports.
Project contributions and measurements are based on the supplied project notes. Exact project dates were not supplied. Illustrative artwork does not reproduce confidential product screens.
BUILDING SOMETHING WITH COMPLEX WORKFLOWS?