Real estate listing page

A preview of the desktop version of this real estate listing pageEnter demo
Source code available upon request

I built a responsive server-rendered real estate listing page, APIs, and tour scheduling functions for a client in February–March 2020. Here are the client's original requirements:

This project is best suited to be built by someone who considers, at least to a degree, themselves a full stack developer. You will be in charge of the design, UI, front-end, and back-end.

We are building a real estate solution enabling “For Sale By Owners” to represent themselves without a Real Estate Agent.

I am reaching out in hopes you can assist in creating the public listing/property page of our solution. The public listing page would need to be built using Next.js, Redux, React-Thunks, Express. We are using Firebase & Firestore for the backend.

Please be mindful we are completely self taught and have no formal experience in contracting out work, working with a team, etc. We will be very receptive to your suggestions to improve flow, efficiency, and design.



1. Project Overview

The scope of this project includes but not limited to the following:

  • Server Side Authentication through firebase, firestore
  • Creating UI & State for all parts and features of the page
  • Creating the UI & State for the supporting pages (provided in the mock up)
  • Creating efficient database queries/writes through redux actions

The project requires the following:

  1. Next.js for server side rendering
  2. React.js
  3. Redux for State Management
  4. Express.js
  5. Material-UI as the CSS framework
  6. Google Firebase/Firestore / Google Cloud

Other dependencies preferable but not required:

  • React-Redux
  • Redux-Form
  • Redux-Thunk

7. Feature Breakdown

  1. Photo Gallery
    1. Must function like to photo gallery
    2. Has ability to upload video
    3. One picture/thumbnail links to google maps (similar to
    4. Example Link:
  2. Authentication
    1. Wire up to firebase auth to accept google and facebook login
    2. Limits access to specified parts of listings page when unauthenticated
    3. Register form will ask the user to upload proof of funds or pre-approval letter. Form should accept jpeg, png, and pdf formats.
  3. Scheduling
    1. Each listing has a user determined general availability for time and days they are able to show the property and the schedule should reflect this.
    2. Design it to accomodate 30 minute or hourly increments depending homeowner preference in database
    3. Read and display real-time availability from database
      1. Real time availability includes homeowners general availability and appointments already booked. 1 appointment per slot
    4. Availability has 15 minute gap between appointments
    5. This is most important feature on the listing page
    6. “Start a conversation / Make an offer” buttons don't require any functionality. Just add them to the UI
    7. Login is required to book an appointment
  4. Questions & Answers
    1. Questions and Answers are displayed based on the homeowner setting questions public or private.
    2. Login is not required to book an appointment. If they are not authenticated, they must submit name, email, and question. If they are authenticated, form should only ask for the question.
  5. Documents
    1. Login not required to download
    2. Listing has a document collection that includes id, name, description, download link
    3. Design should be similar to mock up but there is wiggle room to make this how you like
  6. Home Details
    1. Initial state should show 14 items from the database
    2. When they click view more, it should pull all home details from the database. This amount could differ between homeowners.
    3. Need UI functionality for the expandable tabs (calculator, mortgage rate, nearby school). We will add the calculator, mortgage rate, and school apis ourselves.
  7. Footer
    1. Add it to the UI but doesn't need to be fully functional

8. Design

Keep the design as close to the mock-up as needed. Functionality takes priority over aesthetics and form. With that being the case, please make the page as clean and minimal as possible.

Colors: ​Use the mock up as a guide or your own discretion but we plan to go back in and add our themed colors for headings/ subtitles/buttons/etc.


Title/Headlines: N​unito

Body: Open Sans

I ended up making the following recommendations, all of which the client agreed with:

The design of the listing page was inspired by the general layout of a prototype the client made on, but I did recreate it from scratch. Here are a few of the design points I'm particularly proud of:

Hope you enjoy this demo, and if you'd like me to build something similar for you, I'd love to get in touch!


Enter demo
Source code available upon request