Flow Estate

An real estate website with 3D navigation
Explore the docs »

Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contact
6. Acknowledgments

About The Project

Flow Estate is a modern real estate web application featuring interactive 3D navigation for property exploration. Users can browse, filter, and view detailed listings, as well as register, log in, and upload their own properties with images and descriptions. The platform aims to provide a visually engaging and user-friendly experience for finding or advertising homes.

What problems does this website solve?

• Provides a clear and intuitive overview of the property's layout
• Enables targeted navigation between rooms and images for a better user experience

(back to top)

Built With

• 
• 
• 
• 

(back to top)

Getting Started

Manual Setup (Without Docker)

Prerequisites

• Java Development Kit 21 or above Download
• Apache Maven Download
• Node.js Download
• PostgreSQL Download

Installation

1. Clone the repo

   git clone https://github.com/github_username/repo_name.git

2. Get a free Embed Map API Key at Google Cloud (This is needed for property location)

3. Replace the placeholder api key to your api key inside Frontend/env.example and rename it to .env

   VITE_GOOGLE_MAPS_API_KEY=yourapi;

4. Create PostgreSQL database

5. Fill out the backend .env file variables inside Backend/env.example and rename it to .env

    GOOGLE_CLIENT_ID=your-google-client-id;
    GOOGLE_CLIENT_SECRET=your-google-client-secret;
    APP_BASE_URL=http://localhost:your-backend-port;
    DB_URL=jdbc:postgresql://localhost:your-db-port/;your-db-name;
    DB_USERNAME=your-db-username;
    DB_PASSWORD=your-db-password;
    SECRET_KEY=your-random-secret-key;
    EXPIRATION=your-expiration-time-in-ms;

6. Step inside the frontend folder and install NPM packages

   npm install

(back to top)

Usage

Once the application is running, you can explore its features:

• Browse Properties: On the main page, you can see a list of available properties. Use the search bar and filters to narrow down the results by location, price, number of rooms, and other criteria.
• View Property Details: Click on any property to see its detailed page, which includes a gallery of images, a description, and key information.
• 3D Navigation: Experience an interactive 3D tour of the property layout for a more immersive viewing experience.
• User Authentication: Register for a new account or log in with existing credentials to access personalized features.
• Upload Your Property: Authenticated users can upload their own properties by filling out a multi-step form with details, location, and images.

(back to top)

Roadmap

• Make pages responsive
• Validate form inputs
• Filter properties
• Add floorplan and connect pictures with rooms
• Multi-language Support
  • Hungarian

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contact

Kristof Toth

• www.linkedin.com/in/tóth-kristóf-70068928b
• tothkrisz2000@gmail.com

Project Link: Github projects link

(back to top)

Acknowledgments

• Tool for responsive design
• Icons I used for the project.

(back to top)