All works

TRR Infra & Developers

A real estate platform for a land developer: interactive plot maps and bookings for buyers, and an admin panel for branches, sales and leads.

My role: Front end

  • React
  • React Bootstrap
  • Leaflet
  • Sass
Screenshot of TRR Infra & Developers
View live

The live link is a staging build of the front end. Its text is placeholder and listings need the API, which isn't deployed.

A web platform for TRR Infra & Developers, a land development company. Buyers browse ventures on a map, check which plots are free and book them; staff run sales, branches and enquiries from an admin panel. It was a team project: I built the entire web front end, 68 of the repo’s 77 commits, from September 2021 to January 2022. Teammates built the API and the Android app.

For buyers

  • Search ventures by country, state and area
  • Interactive Leaflet maps of each venture, with every plot colour-coded by status and showing its price and branch
  • Sign in with email or Google, reset a forgotten password, and see your bookings on a profile page
  • Brochures, FAQs with an “Ask a question” button, testimonials and a contact form

For staff

  • A role-based admin panel for super admins, admins and executives, protected by private routes
  • A dashboard of booked and sold plots, and branch management with executives assigned to each branch
  • A venture editor where staff draw plots on the map and set their details and status colours
  • Transactions, user management, contact requests with replies, testimonial review and an FAQ editor
  • Pagination, loading indicators and toast messages throughout

How it’s built

React with React Router, React Bootstrap and Sass. Maps use Leaflet with leaflet-draw for drawing plots and easyprint for printing them. Forms are validated with Yup, data comes from a REST API through Axios, and pages are prerendered with react-snap and react-helmet-async so search engines can read them.

More projects

Screenshot of Covid-19 Tracker

Covid-19 Tracker

Live Covid-19 numbers by country, with a world map, a trend chart and a sortable table.

  • React
  • Material UI
  • Leaflet
  • Chart.js
OfflineScreenshot of Share Files

Share Files

Upload files and share them with a single link. Self-hostable with Node.js and MongoDB.

  • Node.js
  • Express
  • MongoDB
Screenshot of Amazon Clone

Amazon Clone

An Amazon-style store with sign-in, a basket, Stripe checkout and order history.

  • React
  • Firebase
  • Stripe