Case study

Qshelter

Qshelter is a real estate platform that helps users buy homes through direct payment, installment plans, or mortgage. The product spans a public website and an authenticated dashboard; I was brought onto a brownfield codebase to ship version 2 across both: a ground-up revamp of buggy, slow v1 experiences into TypeScript React apps with clearer architecture, stronger performance, and redesigned, mobile-friendly UI.

Visit live site

The Challenge (The “Why”)

Qshelter helps people buy houses with flexible purchase paths (direct payment, installment plans, or mortgage). It shipped as two surfaces (a marketing website and a logged-in dashboard), and both legacy codebases were unreliable and sluggish. Confusing state led to bugs; a mix of React Context and Redux caused extra rerenders and occasional stale data; duplicated markup made fixes risky. Mobile layouts lagged on both sides, and the product needed a credible v2 without rewriting the business behind the scenes.

The Technical Strategy (The “How”)

I led the v2 frontend for the website and the dashboard in React and TypeScript with Chakra UI for layout and theming, Framer Motion for interaction polish, and deployment on Vercel. In the dashboard, data from the APIs moved through TanStack Query; Redux Toolkit owned application and form state, replacing the old Context-plus-Redux tangle with a clearer split that reduced unnecessary renders and stale reads. The same performance discipline applied to the marketing site: correcting patterns that triggered extra rerenders, refactoring duplicated code into shared components, and tightening responsive behavior so both the site and the app felt usable on phones, not only desktop.

The Key Features & Contributions

Owned the brownfield revamp to Qshelter v2 across the public website and the authenticated dashboard: new architecture and UI on top of existing product constraints
Replaced the problematic Context + Redux combination with TanStack Query for server/API state and Redux Toolkit for client-side state, cutting rerenders and stale data issues
Performance pass across the website and dashboard: fixed render patterns, validated state boundaries, and removed redundant work in hot paths
Redesigned the experience with Chakra UI and refactored duplicated UI into reusable components shared where it made sense across both surfaces
Improved mobile responsiveness substantially so marketing pages and in-app flows worked comfortably on small screens

The Impact (The “Results”)

Version 2 shipped as a faster, more dependable experience for people exploring and buying homes on both the website and the dashboard: fewer bugs and snappier interactions, and a codebase that was easier to extend as listing and purchase flows evolved.

Technical Stack

React TypeScript Chakra UI TanStack Query Redux Toolkit Framer Motion Vercel