Sukoon Residency is an apartment building in Kerala with nine long-term 2BHK flats and one short-stay unit. I built two things for it: a public website that shows the building and takes enquiries, and a private admin dashboard where the owner reads those enquiries, generates tenancy contracts and tracks rent.
The website
I started it in July 2025 with the page structure and dummy content. In February 2026 I rewrote it completely.
It's one page, in plain HTML, CSS and JavaScript with no framework. The sections are hero, stats, about, apartments, short stay, amenities, gallery, location and contact.
Motion
GSAP with ScrollTrigger runs scroll reveals, parallax on the hero and about images, and counters that tick up in the stats bar. Lenis smooths the scrolling.
Liquid glass
The nav and contact bar use an SVG filter with a slight colour split and light distortion. Phones get a plain blur, and unsupported browsers fall back to a standard blur.
Gallery
GLightbox opens photos full screen.
Getting in touch
A floating WhatsApp button, a WhatsApp bar on mobile, a Google Maps embed and a contact form.
The contact form first posted to Formspree. Once the dashboard existed, I pointed it at my own backend so every enquiry lands where the owner works.
The admin dashboard
The dashboard puts the building's paperwork in one place: enquiries, contracts, tenants and rent.
- Form submissions
- Lists website enquiries, marks them read, deletes them
- Contracts
- A form that produces a ready-to-sign tenancy agreement as a PDF
- Tenants
- Every tenant from a generated contract, filtered by active or expired, with edit and delete
- Rent
- Records payments and deposits, and shows who is paid, due or overdue
- Apartment details
- Maps each of the nine flats to its utilities
Contracts
The owner picks an apartment and fills in the tenant, dates and money. The form then fills in what it can: the parking number matches the apartment, the electricity meter comes from the flat, and the monthly lease is prefilled by apartment type. The duration comes from the two dates, and the net monthly amount is lease plus service charges minus discount.
The backend drops these values into a LaTeX template and runs XeLaTeX twice. The output is a bilingual agreement, each clause in English with a Malayalam translation beside it. Every contract gets a running number per year, and the PDF is named with that number and the tenant's name. Generating a contract also saves the tenant, so the Tenants and Rent pages fill themselves.
Rent
Each tenant card shows their status. Payments are allocated oldest first: money fills the earliest unpaid month, and any extra rolls into the next. A month shows as due from five days before the 1st and overdue after it. Security deposits are recorded separately and count toward available credit. The dashboard shows expected rent, total outstanding and missing months in each tenant's history.
How it's built
Frontend
sukoonresidence.com
Static site
Cloudflare Pages
- React 18
- Vite
- React Router
- Lucide icons
API
Oracle server
Express API
Nginx, Let's Encrypt, PM2
- Node.js
- Express
- JWT authentication
- Protected routes
Admin dashboard
admin.sukoonresidence.com
Dashboard
Cloudflare Pages
- React + Vite
- Sidebar (collapsible)
- Dark theme (IBM Plex Mono)
Frontend
React 18, Vite, React Router and Lucide icons. A dark theme in teal, set in IBM Plex Mono, with a sidebar that collapses to icons and expands on hover.
Backend
Node.js and Express. Login checks a bcrypt hash and returns a JWT that lasts 24 hours. Every route except the public enquiry endpoint needs it.
Storage
JSON files on disk. Rent payments are split into one file per year. It's a single building, so a database wasn't worth running yet.
Process
Conventional commits, with GitHub Actions bumping versions on every push to main. The website has 41 commits. The dashboard has 118, written over two days in February 2026.
Problems worth telling
Dates that meant different things on different machines
- Problem
- Contract dates are stored as MM/DD/YYYY, which JavaScript's date parser reads inconsistently.
- Fix
- A parser that splits the string and builds the date from its parts.
Downloads with the wrong name
- Problem
- The browser couldn't read the filename the backend set on the PDF, because CORS hides that header by default.
- Fix
- Exposing the header fixed the download name.
Malayalam in LaTeX
- Problem
- The bilingual template needed proper fonts for the Malayalam script.
- Fix
- Moved to XeLaTeX with a dedicated Malayalam font.
What's next
- Reply to enquiries by email or WhatsApp from the dashboard, and add search, filters and CSV export.
- Preview a contract before download, and keep a history of past contracts.
- Add rate limiting to the enquiry endpoint, and move to SQLite if the data grows.