Real Estate Web App

Real Estate Web App is an open-source real estate web application boilerplate built with Next.js and Chakra UI that uses the Bayut API to display property listings. This repository was created for Hacktoberfest 2022, is open to contributions, and is live at a Vercel deployment, making it a ready starting point for anyone building a property search site.

What is Real Estate Web App?

Real Estate Web App is a GitHub project that combines a Next.js v12.1 server-rendered frontend with Chakra UI v2.2.1 for responsive styling and the Bayut API (accessed through RapidAPI) for real estate data. The app takes property listing data from Bayut and presents it in a searchable, responsive web interface. It is deployed on Vercel and the live demo is linked in the repository. The project includes a Figma UI prototype named "Magic Properties" that defines the intended layout, and it is maintained by a small team of contributors listed in the README.

Key Features

• Next.js v12.1 with SSR — Renders pages on the server for faster initial loads and better SEO; the project ships with standard npm run dev and npm i setup commands.
• Chakra UI v2.2.1 — Provides a set of accessible, themeable React components that make the interface responsive out of the box.
• Bayut API integration — Fetches property details and search results from the Bayut API, which is listed as a RapidAPI resource in the README.
• Vercel deployment — The app is pre-deployed at a public Vercel URL, so you can see the result without running code locally.
• Figma prototype — A design mockup is available so contributors and users can compare the implemented UI with the intended design.
• Open contribution workflow — The README includes a full step-by-step guide for adding a star, forking, cloning, branching, committing, pushing, and creating a pull request.
• Hacktoberfest-friendly — The project explicitly accepts pull requests and states which contribution types are welcome: UI/design changes, new functionality, and typo fixes.

Who is it for?

Real Estate Web App is for developers who want a functional real estate listings site without building from scratch. It is also useful for Hacktoberfest contributors seeking a small, well-documented open source project to practice pull requests. Freelancers and startups needing a demo of a property portal can use the deployed version and codebase as a starting point.

What can you do with Real Estate Web App?

• Developers: Clone the repository, install dependencies with npm i, and run the app locally with npm run dev to get a working property listing site.
• Open source contributors: Improve the UI/design, add new functionality, or fix typos, then follow the README's detailed pull request instructions to submit changes.
• Designers: Reference the linked Figma prototype to suggest UI adjustments before implementing them in Chakra UI components.

How does Real Estate Web App work?

The app uses Next.js server-side rendering to generate pages, and property data is pulled from the Bayut API through RapidAPI. After cloning, you install dependencies and start the development server; the README links to the Next.js docs, Chakra UI getting-started guide, Bayut API page, and Vercel deployment docs for further setup.

FAQ

Is Real Estate Web App free?

Yes, the repository is public and open source. It was created as a Hacktoberfest 2022 project, and the README invites anyone to create a pull request to participate.

How do I run Real Estate Web App?

You need Node.js and npm. Clone the repository, run npm i, then run npm run dev. The README lists these as the only commands required.

What API does Real Estate Web App use?

It uses the Bayut API for property details, accessed through RapidAPI. The README links to the Bayut API listing on RapidAPI as a resource.

Can I contribute to Real Estate Web App?

Yes. The project explicitly accepts contributions and describes the accepted types: changing the UI/design, adding functionality, or fixing any typo. The contribution steps are documented in the README.