Building and Deploying a Modern Real Estate Application with React and Next.js

In the world of web development, building responsive, modern applications has never been more accessible or essential. In this article, we’ll walk you through the process of creating a feature-rich real estate application using React and Next.js. This app, known as Realtor, will allow users to explore rental and sale properties, utilize advanced filtering options, and even view property details. By the end of this guide, you will not only understand how to utilize these technologies but also gain experience deploying your application.

Getting Started with React and Next.js

Building our realtor application starts by introducing you to the main technologies: React and Next.js. React is a popular JavaScript library for building user interfaces, particularly single-page applications, while Next.js is a powerful framework that enhances React with server-side rendering and static site generation capabilities.

Prerequisites

Before diving in, ensure you have the following:

• Basic knowledge of JavaScript, HTML, and CSS
• Node.js and npm installed on your machine
• A code editor (like Visual Studio Code)
• Basic understanding of API usage

Project Setup

To begin, we need to set up our Next.js project.

1. Create a new folder for your project, e.g., JSMRealEstate.
2. Open your terminal and navigate to that folder.
3. Run the command to initialize Next.js:

 npx create-next-app@latest realtor  

This command will create a new Next.js application in a folder called realtor.

Installing Required Packages

We’ll need additional libraries to create our UI and handle API requests. In the terminal, navigate to your project directory and run:

npm install @chakra-ui/react @emotion/react @emotion/styled axios framer-motion nprogress react-icons react-horizontal-scrolling-menu 

This command installs Chakra UI for styling, Axios for API calls, and other necessary utilities.

Building the Application Structure

Organizing your files correctly is key to developing scalable applications.

Directory Structure

The structure should resemble the following:

/realtor
 ├── /components
 ├── /pages
 │    ├── /api
 │    ├── index.js
 │    └── property
 │         └── [id].js
 ├── /utils
 ├── /assets
 ├── _app.js
 └── package.json

Implementing Core Features

Next, we will implement the essential features of our realtor application.

1. User Interface with Chakra UI

Utilizing Chakra UI, we can quickly create responsive layouts. Start by wrapping your application in the ChakraProvider in _app.js

import { ChakraProvider } from '@chakra-ui/react';  

function MyApp({ Component, pageProps }) {  
    return (  
        <ChakraProvider>  
            <Component {...pageProps} />  
        </ChakraProvider>  
    );  
}  
export default MyApp; 

This will give all your components access to the Chakra UI theme.

2. Fetching Data from RapidAPI

Data retrieval for our app will be handled using RapidAPI. Create a utility function in /utils/fetchApi.js to work with the properties API provided by RapidAPI:

import axios from 'axios';  
const baseUrl = 'https://bayut.p.rapidapi.com';  

export const fetchAPI = async (url) => {  
    const { data } = await axios.get(`${baseUrl}${url}`, {  
        headers: {  
            'X-RapidAPI-Key': YOUR_API_KEY_HERE,  
            'X-RapidAPI-Host': 'bayut.p.rapidapi.com',  
        },  
    }); 
    return data;
};  

Make sure to replace YOUR_API_KEY_HERE with your actual RapidAPI key.

3. Displaying Properties

The index.js page will serve as the homepage, where users can see available properties
Here’s a quick implementation of the component that fetches data and displays properties:

import { Box, Text, Button } from '@chakra-ui/react';  
// Import fetchAPI function here 
const Home = () => {  
    const [properties, setProperties] = useState([]);

    useEffect(() => {  
        const fetchProperties = async () => {  
            const data = await fetchAPI('/properties/list');  
            setProperties(data.hits);
        };  
        fetchProperties();  
    }, []);

    return (  
        <Box>  
            {properties.map(property => (  
                <Box key={property.id}>  
                    <Text>{property.title}</Text>  
                    <Image src={property.coverPhoto} />  
                </Box>  
            ))}  
        </Box>
    );  
};  
export default Home;

Implementing Filtering Functionality

A vital aspect of renting and buying properties is filtering results based on various criteria. The implementation would involve creating <Filters /> component and managing local state, which updates based on user inputs. This could include selecting number of rooms, prices, or property types.

Viewing Property Details

For detailed views of properties, we will create a dynamic route within Next.js for each property. This will be in /property/[id].js. This file fetches the specific property data when the user clicks on it from the listings.

Deploying the Application

After building the application, you can deploy it to platforms like Vercel, which supports Next.js applications seamlessly. Simply log in to Vercel, connect your GitHub, and import your project repository.

Conclusion

By following the steps in this guide, you have successfully built and deployed a modern real estate application using React and Next.js with API integration. The skills you've gained will be valuable for future projects, and this application serves as a solid addition to your portfolio. Keep diverse components and functionality in mind as you continue to enhance this project!

Get started today, sharpen your React skills, and explore the capabilities of Next.js in your projects, and don't forget to explore the vast resources available on RapidAPI for your future endeavors!

---

Ready to jump into your next project? Share your thoughts on the Realtor app, or let us know what features you’d like to see added!