LONA

Overview

"LONA" is a modern web application designed for buying, selling, and renting properties. It features a responsive and user-friendly interface with advanced search capabilities, an interactive map integration, and secure user account management.

Note: The database is currently no longer live and cannot be accessed in the cloud. You will need to set up your own database instance for local or cloud deployment.

Features

• Search and Filter Properties: Users can search properties by criteria such as price, location, size, and property type (e.g., house, apartment, etc.). Advanced filters allow for a personalized search experience.
• User Authentication: Users can securely register, log in, and recover their accounts via email. Includes JWT-based authentication for secure access.
• Interactive Map: View property locations on an interactive map, filter properties directly on the map, and get directions.
• Admin Panel: Admins can manage property listings, approve user registrations, and remove inappropriate content.
• User Profiles: Users can manage their personal information, save favorite properties, and track their search history.

Technologies & Tools

• Frontend:

  • Next.js: Framework for building server-side rendered React applications.
  • Tailwind CSS: Utility-first CSS framework for fast, responsive UI development.

• Backend:

  • Node.js: JavaScript runtime for building the server-side application.
  • Express.js: Web application framework for building RESTful APIs.
  • PostgreSQL: Relational database for storing property and user data.

• Authentication & Real-time:

  • Firebase: For user authentication and real-time features.

• Mapping:

  • Leaflet: JavaScript library for interactive maps.

Getting Started

Follow these steps to get the development environment up and running.

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/real-estate-website.git

2. Navigate to the project directory:

   cd real-estate-website

3. Install dependencies for both frontend and backend:

   npm install

4. Set up your environment variables:

   • For frontend, create a .env.local file with the following variables:

     NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_google_maps_api_key

   • For backend, create a .env file with the following variables:

     DATABASE_URL=your_postgresql_connection_string
     JWT_SECRET=your_jwt_secret
     FIREBASE_CONFIG=your_firebase_config

Database Schema

• Users: Stores user information for authentication (email, password hash, etc.). Users can have multiple saved properties.
• Properties: Stores detailed information about properties, including price, location, description, and images.
• Locations: Stores geographic information for each property, including latitude and longitude.
• Images: Stores images and media for properties. Each property can have multiple associated images.

User Interface

Media5.mp4

Media4.mp4

Media3.mp4

Media2.mp4

Media1.mp4

Diagrams

• Use Case Diagram

• Sequence Diagram

• Activity Diagram