DigsConnect is a student housing marketplace in South Africa. Students search by city or university, dig through property and room detail, message landlords, apply, save favourites, and even find potential flatmates (“digsmates”).
I was the primary frontend engineer on the web app through this build. The React setup, the routing and API client, the responsive layout system, the public pages, search, auth, the account area, landlord tooling, messaging, and the add-a-digs flow all came through me. It was a team, but the web client was my patch.
What I built
- The project foundation: a Create React App setup with routing, global styling and theming, code splitting, an error boundary, linting and formatting, and the build tooling around it.
- The public face of the site, from landing, about, FAQs and partners through to the blog and testimonials, with the header, footer, and mobile nav that hold it together.
- Search and discovery: location and university lookup, the digs search page with property-type filters, a map/list toggle over Mapbox, listing and room cards, and the pagination and mobile search header that make it usable on a phone.
- The property detail page and everything that converts off it: image carousel and full-screen gallery, room availability, the landlord and amenity accordions, similar listings, favourites, landlord messaging, and applications.
- The digsmate side, where students search for flatmates by budget, filter results, and start conversations (without the app awkwardly suggesting they room with themselves).
- Auth and the whole account area: a login/register modal with Google and Facebook sign-in, token refresh, profile editing, the wishlist, and a full messaging inbox with conversations, unread counts, replies, and archive.
- Landlord listing management: dashboards, active/searchable toggles, edit pages, room management, and the Digs Plus surfaces, all over an authenticated property API.
- The add-a-digs flow: a multi-step modal with room and bedroom steps, sliders, date and amount inputs, address autocomplete, and a confirmation and success state that writes back to the property API.
Then the unglamorous production work, the part that decides whether any of the above actually holds up: utility tests, image optimisation, a service worker and PWA registration, prerendering, accessibility labels, loader states, nginx config, and a long tail of QA fixes.
Hard parts
A marketplace has to serve both sides without either feeling like an afterthought. Students wanted fast search, clear listings, favourites, messaging, applications, and digsmate discovery. Landlords wanted listings that were quick to create and easy to keep current. Both had to feel first-class.
It was also just a lot of responsive surface area. Search, maps, listing pages, messages, landlord tooling, add-a-digs, all of it had to work on a phone, because that is where most people actually look for a place to live, usually in a hurry.
Stack
React on Create React App (with react-app-rewired), React Router, styled-components and styled-system, Formik and Yup, unstated for state, Mapbox GL with Google Places autocomplete, FilePond for uploads, Facebook and Google login, Jest, and an nginx and PWA setup for production.