Contact person: Real Estate Marketing

Phone:Show

Email:Show

Location: Kragujevac, Serbia

Budget: Recommended by industry experts

Time to start: As soon as possible

Project description:
"The goal of the project is the development of a website for the interactive presentation of the building, focused on architectural visualization and sale of apartments. The site allows users to explore the building through a 3D model with rotation, search filters (floor, area, number of rooms, status), and hotspots that dynamically display apartment information. The admin panel enables content management (images, renderings, texts, statuses) through an interface similar to an Excel spreadsheet. The site is optimized for fast loading (3-5 seconds per page), SEO, and responsive design for desktop, tablet, and mobile devices.
2. Functionality of the site
2.1. Public part (Frontend)
The site is designed to attract potential buyers through an interactive and visually attractive presentation of the building.
2.1.1. Interactive 3D view of the building

Model View: Loads a 3D building model (.gltf or .obj format) that the user can rotate and zoom.
Rotation controls: The left and right arrows in the middle of the screen allow you to rotate the building by predefined angles (eg 0°, 90°, 180°, 270°).
Hotspots on the facade: Rectangles on the facade (denoting apartments) react to a click and change color according to filters:

Green: Apartments with a selected number of rooms (eg 3 rooms).
Yellow: Reserved apartments.
Red: Sold apartments.


Loading speed: Model and interactions optimized to load within 3-5 seconds.

2.1.2. Filters and search

Filter Bar: At the bottom of the screen, a horizontal scrollable bar contains:

Slider for choosing a floor (depending on the number of floors in the building).
Filter for area (eg 30-50m², 50-80m²).
Filter by number of rooms (1, 2, 3, etc.).
Status filter (vacant, reserved, sold).
Filter reset button.
List of apartments: Display of all apartments that match the filters (eg cards with basic data).


Dynamic update: Clicking on a filter (eg “3 rooms”) colors the corresponding apartments on the 3D model and updates the list.

2.1.3. Popup window for apartment

Activation: Clicking on the rectangle of the apartment on the facade opens a popup window.
Popup content:

Basic information: apartment ID, status (vacant/reserved/sold), floor, area, number of rooms.
The "Details" button leads to a detailed presentation.


Design: Minimalist, with clear text and contrasting colors.

2.1.4. Detailed presentation of the apartment

Display: After clicking on "Details", a full-screen or modal window opens with the following elements:

Header: Apartment and slat number (eg "Apartment A-12, Slat B").
Buttons: Four buttons below the header:

Apartment base: Shows a 2D floor plan (image, .jpg or .png).
3D base: Displays an interactive 3D model of the apartment (.gltf).
Pictures of the apartment: Gallery of renderings or photos.
Virtual tour (optional): Embed iframe with Matterport, 3D Vista or similar platform.


Content under the buttons: Dynamically changes when the button is clicked (eg clicking on "Basic" shows the floor plan, clicking on "3D" shows the 3D model of the apartment).
Square footage: List of square footage (eg living room: 20m², bedroom: 15m²) on the left side of the window.


Navigation: Button to return to the 3D view of the building.

2.1.5. Login icon

Position: Small icon in the upper right corner (eg user profile or classic "login" icon).
Functionality: Click opens the login form (username/password or OAuth, e.g. Google). It leads to the admin panel.

2.1.6. Additional functionalities

Responsive design: Adapted for desktop, tablet and mobile devices.
SEO optimization: Meta tags, fast loading, and URL structure for search engines (eg "building-Belgrade-apartments").
Integrations:

Google Analytics for tracking visits.
Buttons for sharing on social networks (WhatsApp, Facebook, Instagram).
Google Maps to show the location of the building.



2.2. Admin part (Backend)
The admin panel is protected by a login and allows the management of all content displayed on the site.
2.2.1. List of apartments (Excel-like interface)

Table: Excel-like interface with columns:

Apartment ID
Status (vacant, reserved, sold)
Floor
Area (m²)
Number of rooms
Lamella
Date added
Upload field for media (images, renderings, 3D models, links for virtual tours)


Table functionalities:

Adding, editing, deleting apartments.
Filters and search by column.
Export to .xlsx format.
Import data from Excel.



2.2.2. Content management

Media upload:

Images and renders (.jpg, .png) for base and gallery.
3D models (.gltf, .obj) for apartments or building.
Links for virtual tours (eg Matterport iframe).
Texts: Description of the apartment, square footage, architectural features.


Status update: Change of status (vacant/reserved/sold) is reflected on the frontend (painting of apartments on the facade).
Custom fields: Possibility to add additional information (eg materials, parking, orientation).

2.2.3. Security

Authentication: Login with username/password or OAuth.
Roles: Admin (full access) and editor (content editing only).
Protection: HTTPS, encrypted passwords, SQL injection protection.

3. Technical requirements
In order for the site to fulfill the described functionalities, the following technologies and tools are required:
3.1. Frontend

Technologies:

React.js: For interactive interface, modals, and filters.
[login to view URL] or React Three Fiber: To display and interact with 3D models (rotation, hotspots).
Tailwind CSS or Bootstrap: For responsive and modern design.
React Modal: For popups and detailed presentation.


Libraries:

react-slider for floor slider.
react-share for social networks.
xlsx for export/import tables.



3.2. Backend

Technologies:

Node.js + Express: For API (CRUD operations, file upload).
MongoDB or MySQL: For database (flats, users).
Multer: For uploading images, renders, and 3D models.


API endpoints:

POST /api/apartments: Adding an apartment.
GET /api/apartments: List of apartments with filters.
PATH /api/stanovi/:id: Updating an apartment.
DELETE /api/stanovi/:id: Deleting an apartment.
GET /api/stanovi/export: Export to Excel.
POST /api/stanovi/import: Import from Excel.



3.3. 3D elements

Models: Created in Blender or Spline, exported as .gltf for quick loading.
Virtual tours: Embed iframes with Matterport, 3D Vista, or Pano2VR.
Optimization: Compression of models and images to load within 3-5 seconds.

3.4. Hosting

Platform: Vercel (free for small projects), AWS, or Hostinger (~5-10€/month).
Domain: Custom domain (eg "[login to view URL]") via GoDaddy or local providers.
SSL: Free SSL certificate (eg Let's Encrypt).

4. Design and user experience

Aesthetics: Modern, clean design with a focus on architecture (large images, minimalistic fonts, contrasting colors).
Navigation: Intuitive, with clear filters and interactive elements (arrows, hotspots).
Speed: All pages and 3D models load in 3-5 seconds.
Responsiveness: Adapted for mobile devices (eg swipe to rotate on phone).

5. Additional functionalities

Analytics: Google Analytics to track visits and interactions (eg clicks on apartments).
Marketing: Social sharing buttons and call-to-action (eg “Contact Sales”).
Scalability: Ability to add more buildings or projects in the future." (client-provided description)