farah1902/UrbanVue3D

3D visualization Full Stack application using Django, PostgreSQL and React, UrbanVue3D, to interactively explore rooftop segmentation and uilding heights in Ben Guerir City, Morocco. # UrbanVue3D **An interactive 3D visualization platform for rooftop segmentation and building height exploration in Ben Guerir City, Morocco.** ## 🚀 About UrbanVue3D UrbanVue3D is a full-stack web application that enables users to visualize and analyze urban rooftop segmentation and building heights in **Ben Guerir City, Morocco**. This project integrates **Django, PostgreSQL, and React** to provide an interactive 3D urban exploration experience. ## 🔥 Key Features - **3D Rooftop Segmentation**: Visualize segmented rooftops derived from advanced deep learning models. - **Building Height Estimation**: Display accurate building height data for solar energy planning and urban development. - **Interactive Map & Controls**: Explore the city dynamically with zoom, pan, and layer toggling. - **Seamless Backend & Frontend Integration**: Powered by **Django (REST API)**, **PostgreSQL**, and **React (Three.js for 3D visualization)**. - **Optimized for Performance**: Efficient database queries and smooth front-end rendering. ## 🛠️ Tech Stack - **Frontend**: React, Three.js, Leaflet.js, TailwindCSS - **Backend**: Django, Django REST Framework - **Database**: PostgreSQL (PostGIS for geospatial data) - **Deployment**: Docker, Nginx, AWS/GCP (Optional) ## 4. Detailed Overview of UrbanVue3D Application Pages ### 4.1. Dashboard ### Overview The **UrbanVue3D Dashboard** is a comprehensive web application built using **React.js, Django, Leaflet, and Mapbox**. It serves as the primary interface for visualizing **3D urban models** and managing various aspects of the project. ### Key Interface Components #### 1. Sidebar Navigation - Provides quick access to key sections such as **Leaflet, Mapbox, Papers, Applications, and About GEP**. - The **"About Project"** section includes a documentation link for additional insights, particularly useful for new users. #### 2. Dashboard Cards - Offers a summary of key urban metrics: - **Buildings**: Total count and percentage growth. - **T …