Real Estate Listing Page

Front end design based on a microservice architecture

Concept

An item detail page is one of the most essential interfaces we encounter on the web and the presentation and feel of these pages is often make or break for the success of a venture.

In this project, I worked with a team of three developers to build a listing page inspired by the popular New York City Real Estate service StreetEasy. Using the idea of microservices to structure our work, each team member designed a full stack application to contribute one of four discrete components to the page including: an image carousel, listing description, listing details and related listings section.

Implementation

My role in the project was twofold:

1. To implement the styling and overall architecture for the full listing page including using ReactDOM to render Webpack bundled components into a template structure and using a reverse proxy server to direct API requests for each component to respective microservices.
2. To design the image carousel component including:
   • Populating a MongoDB database with mock data to represent a realistic range of listings using Node.js and the Mongoose ODM library.
   • Building a REST API using Node.js with Express to query the database and serve JSON containing data related to each listing id number including URLs for listing photos, a floor plan image and map image provided by the open source Mapbox API.
   • Designing the data flow, appearance and interactions for the client application using React to pass common data to main carousel and modal components and using the ReactTransitionGroup addon to create animations on state changes. A different project might have prompted the use of existing carousel or styling libraries but implementing the component architecture and styling from scratch was a welcome challenge here.
   • Automating deployment of the component to an Ubuntu EC2 instance on Amazon Web Services using Bash scripting.
   • Writing unit and integration tests using Jest, Supertest, Mocha.js and Chai.
   • Optimizing component load time using Google Chrome's Lighthouse and gzip compression.

Links

The completed project is hosted live on AWS with 100 active listings representing a range of mock apartments for sale, each listing id is represented as a paramter in the url endpoint:

• Deployed listing page:
  • Visit a lower id like /0 for a more basic listing
  • Ids as high as /99 are used for fancier properties
  • The root endpoint shows a random listing

For more, please visit Github:

• Image Carousel Component
• Complete Page