Loading...

Build a Real Estate Platform with React and Webiny Headless CMS | Webiny

Heads up! This article was written before Webiny 6.0 was released and may contain outdated information.

Christopher Okoro

Nov 22, 2023

Build a Real Estate Platform with React and Webiny Headless CMS

Introduction

In this tutorial, we will learn how to build a Real Estate Platform with React and Webiny Headless CMS. We will also look into the Webiny GraphQL API advanced filtering with an example. Webiny is an open-source, developer-friendly CMS that is supported by cutting-edge tools and technologies like Node, React, and a GraphQL API. You have the option to integrate with tools like Gatsby, Nextjs, and Astro through the Content Delivery API. Webiny supports developers in the design, development, and deployment of applications on top of the serverless infrastructure.

Real Estate Platform Project Demo

Prerequisites

Set up your AWS credentials locally
Ensure that you have Node.js >= 14.15.0 installed.
Basic understanding of React and JavaScript
Star our GitHub Repo! 😉

Set Up a Webiny Project

The first step is to create a new Webiny project by executing the following command:

npx create-webiny-project real-estate-platform

Your project ought to be automatically set up as a result. You will be asked to choose the AWS region and the database that your project will use for deployment. We will be utilizing DynamoDB for this project. Once the folder has been created, navigate to the folder and input the command below

cd real-estate-platform && yarn webiny-deploy

With this, your project is created, and the application is deployed to your AWS account. Once deployed, you will see some of the URLs listed below in your terminal.

If you accidentally closed it, you may see the URLs by typing the yarn webiny info command.

Webiny URLs

Click on the Admin App link to continue. You will now be taken to the first page of the admin area, where you must fill out the registration form and complete all registrations.

One platform for all your content needs!

Webiny is the AI-programmable CMS that gives enterprises full control. Build, extend and automate your content operations with a platform designed to be shaped by both developers and AI agents.

Get started Learn more

Webiny screenshot

The content of the endpoint is displayed once the query is applied, as seen in the image above. Since our testing is complete at this point, we may continue.

Setting up our front-end

Now that we have successfully configured our CMS, added some data, and tested our API, we are required to show this data on our website. We will need to set up our front end in order to accomplish this. Enter the following command into your terminal:

npm create vite@latest
npm install
npm run dev

As observed, we will be using React Vite as it is a much faster local development server. This command creates a React folder with all the necessary project-related files. We must then add our components and stylings when the installation is complete.

Once all components are properly set up and styled, we can then proceed to display the content in the API.

Integrating Webiny CMS to fetch and display property data

We will need the access key or token we made before, combined with the read API URL, which can be found in the API playground, to accomplish this. To store them, we'll make a dotenv file in our directory.

VITE_WEBINY_GRAPHQL_TOKEN = Insert your access token here
VITE_WEBINY_GRAPHQL_URL = Insert your Read API url here

For GraphQL-based communication with the Webiny CMS in our application, we'll utilize the Apollo client. To install this, use the CLI command listed below:

npm install @apollo/client graphql

We must initialize ApolloClient after the installation is finished. Sending a configuration object with the uri and cache properties to its constructor in our main.js file.

ApolloClient utilizes an instance of InMemoryCache to cache query results after retrieving them, and the uri gives the URL of our GraphQL server.

Next, we'll use ApolloProvider to cover the App component in our main.js file.

import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  // gql,
} from "@apollo/client";

const client = new ApolloClient({
  uri: import.meta.env.VITE_WEBINY_GRAPHQL_URL,
  cache: new InMemoryCache(),
  headers: {
    Authorization: `Bearer ${import.meta.env.VITE_WEBINY_GRAPHQL_TOKEN}`,
  },
});

ReactDOM.createRoot(document.getElementById("root")).render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
);

Having completed setting up ApolloClient, the next step is to extract the data and send to their respective components. To do this, open the FlatPage components , import useQuery and gql in both components, and then enter your query for both components.

import { useQuery, gql } from "@apollo/client"

//Adding a query list to the FlatPage component
const GET_HOMES = gql`
  query {
      listFlats {
        data {
          coverImage
          name
          address
          price
        }
      }
    } 
`;

According to what is shown above, listFlats, which aisre executed by GET_HOMES, return arrays of flats with certain properties in their data objects: coverImage, name, address, and price.

To accommodate the anticipated data, we will add three instances or states. The same notification seen above will appear whenever the data is loading or there is an error. Then the data is saved in a variable.

// step3: Add instances for the data 
  const { loading, error, data } = useQuery(GET_HOMES);
  if (loading) return <p className="container">Getting all avaliable flats...</p>;
  if (error) return <p className="container">An error occurred:(</p>;

	const flats = data.listFlats.data;

After setting up all instances successfully, we routed all the pages of our project. For this project, we will be using react-router-dom version 6.16.0, as seen below.


  const router = createBrowserRouter([
    {
      path: "/",
      element: <Home />,
    },
    {
      path: "/flats-section",
      element: <FlatPage />,
    },
  ]);
  return (
      <RouterProvider router={router} />
  );

Since both components have similar functionalities, we will continue to focus on the FlatsPage components in this tutorial.

To get the data value returned based on the query we passed in our components, we will need to loop through the data stored in the flats variable and then display it with some styling.

<div className="cover-2">
          {flats.map((flat) => (
            <div className="cards" key={flat.id}>
              <img src={flat.coverImage} alt={flat.name} />
              <h3>{flat.name}</h3>
              <p>Address: {flat.address}</p>
              <p>Price: ${flat.price}</p>
            </div>
          ))}
        </div>

Now our webpage should be all set and should look like this:

You can construct and test-run your query using the API playground's documentation, which will show you how to organise your code for the best possible performance, as shown in the above image.

We will establish several states for the FlatPage component in order to hold the users inputs for property name, address, maximum price, and minimum price.

  const [title, setTitle] = useState("");
  const [address, setAddress] = useState("");
  const [minPrice, setMinPrice] = useState();
  const [maxPrice, setMaxPrice] = useState();

After that, we'll then need to update our query to include the webiny filter feature.

//Adding a query list to the FlatPage component
  const GET_HOMES = gql`
    query ListFlatsInput($where: FlatsListWhereInput) {
      listFlats(where: $where) {
        data {
          coverImage
          name
          address
          price
        }
      }
    }
  `;

The code above demonstrates how we renamed the GET_HOMES query ListFlatsInputs and modified the where parameter to include a condition, allowing the query to obtain a list of flats that meet the requirements we specified in the FlatsListWhereInput.

We will then change the instance data that we previously passed. Here, the conditional statement we introduced will be replaced with Apollo variables that define the query we will use to filter our data. We verify whether the states (which comprise the user inputs) are present in the fetched data from Webiny in the where object, as can be seen below.

// step3: Add instances for the data
  const { data, refetch } = useQuery(GET_HOMES, {
    variables: {
      where: {
        OR: [
          { name_contains: title },
          { address_contains: address },
          { AND: [{ price_gte: minPrice }, { price_lte: maxPrice }] },
        ],
      },
    },
  });

We also added a refetch function. The refetch function in Apollo Client is used to manually initiate a GraphQL query's refetch. By launching a fresh request to the GraphQL server, it allows you to modify the information shown in your application according to modified variables or circumstances without requiring a page refresh. This makes it possible for the data that has been searched to be updated dynamically and in real-time in reaction to UI modifications.

Next, in order to ease our search process, we will add some functionality and wrap the refetch function into a useEffect hook.

useEffect(() => {
    if (address || title || (minPrice && maxPrice)) {
      refetch({
        where: {
          OR: [
            { name_contains: title ? title : null },
            { address_contains: address ? address : null },
            { AND: [{ price_gte: minPrice }, { price_lte: maxPrice }] },
          ],
        },
      });
    }
  }, [title, address, maxPrice, minPrice, refetch]);

Changes to the title, address, minPrice, or maxPrice are tracked by this useEffect hook. A refetch function call is made in response to any change in these values, which reassembles the query parameters and updates the fetched data in Webiny CMS. The conditions within the OR array handle several search scenarios: filtered by name or address and by price range. Based on the filters that have been applied, the new data is reflected in the user interface.

Next We render input fields for the user to enter the pricing range, title, and address. To display the current values, we set the value of each input field to the relevant state variables**********. (title**********, address, minPrice, and maxPrice). When a user interacts with the input fields, we update the state variables using the onChange event handlers.

<div className="name-section">
<p>Search by name:</p>
<input
  type="text"
  placeholder="Search by name"
  value={title}
  onChange={(e) => setTitle(e.target.value)}
/>
</div>
<div className="name-section">
<p>Search by address:</p>
<input
  type="text"
  placeholder="Search by name"
  value={address}
  onChange={(e) => setAddress(e.target.value)}
/>
</div>

<div className="price-section">
<p>Search with price range:</p>
<div className="price-input">
  <div>
    Min{" "}
    <input
      type="number"
      placeholder="price"
      value={minPrice}
      onChange={(e) => {
        setMinPrice(e.target.value);
      }}
    />
  </div>
  <div>
    Max{" "}
    <input
      type="number"
      placeholder="price"
      value={maxPrice}
      onChange={(e) => setMaxPrice(e.target.value)}
    />
  </div>
</div>
</div>

Finally, using the search and filter criteria, we map through the flats array and display each filtered flats.

   <div className="cover-2">
          {flats?.map((flat) => (
            <div className="cards" key={flat.id}>
              <img src={flat.coverImage} alt={flat.name} />
              <h3>{flat.name}</h3>
              <p>Address: {flat.address}</p>
              <p>Price: ${flat.price}</p>
            </div> */

Conclusion

We have successfully built a Real Estate Platform with React and Webiny Headless CMS that is consuming data form Webiny Headless CMS. In this article we learned how to setup and use the Webiny CMS, configure content models and consuming data from React app. We also learn using the Webiny GraphQL API advanced filtering.

Full source code: https://github.com/webiny/write-with-webiny/tree/main/tutorials/real-estate-platform

This article was written by a contributor to the Write with Webiny program. Would you like to write a technical article like this and get paid to do so? Check out the Write with Webiny GitHub repo.