Skip to main content

​
Welcome to Inmobiliaria Web

This guide will help you go from zero to your first property listing in under 10 minutes. Inmobiliaria Web is a modern real estate management platform built with React, TypeScript, and Better Auth.
Before starting, make sure you have completed the installation steps and have your development server running.

​
Initial Setup

1

Start the Development Server

Launch the Vite development server:
npm run dev
Your application will be available at http://localhost:5173
2

Create an Admin Account

The first step is to create an admin account. Navigate to the auth page and sign up:
// Using Better Auth client from src/lib/auth-client.ts
import { authClient } from "./lib/auth-client";

await authClient.signUp.email({
  email: "[email protected]",
  password: "securepassword",
  name: "Admin User",
  callbackURL: "/admin"
});
Check your email for the verification link before proceeding. Email verification is required for security.
3

Verify Your Email

Click the verification link sent to your email. Better Auth handles the verification automatically and redirects you to the callback URL.The verification endpoint is: http://localhost:10000/api/auth/verify-email
4

Elevate to Admin Role

By default, new users have the user role. To manage properties, you need admin access. Update the user role directly in the database:
UPDATE users 
SET role = 'admin' 
WHERE email = '[email protected]';

​
Create Your First Property Listing

Now that you have admin access, let’s create your first property listing.
1

Navigate to Admin Dashboard

Go to /admin in your browser. The SecureRoute component will verify your admin role:
// From src/routes/admin/property/new.tsx
<SecureRoute requiredRole="admin">
  <PropertyFormPage />
</SecureRoute>
2

Fill Property Details

Click “Nueva Propiedad” to open the property creation form. The form includes:
  • Basic Information: Title, description, and status
  • Property Type: Casa, Departamento, PH, Terreno, etc.
  • Operation Type: Venta (Sale) or Alquiler (Rent)
  • Pricing: Price, currency (ARS/USD), and optional expenses
  • Location: Street address with Google Maps autocomplete
  • Features: Bedrooms, bathrooms, garage spaces, surface area
  • Amenities: Balcony, terrace, garden, laundry, pets allowed
  • Images: Drag-and-drop image upload with ordering
  • Video: Optional YouTube video URL
Use the AddressAutocomplete component for accurate location data with coordinates.
3

Add Property Images

Upload property images using the drag-and-drop interface:
// Images are handled in PropertyFormPage.tsx
const handleImageUpload = async (files: FileList) => {
  const newImages = Array.from(files).map(file => {
    return {
      file,
      preview: URL.createObjectURL(file),
      orderIndex: existingImages.length + index
    };
  });
  setFormData(prev => ({
    ...prev,
    images: [...prev.images, ...newImages]
  }));
};
Images support:
  • Drag-and-drop reordering
  • Mark as main image (star icon)
  • Rotation controls
  • Preview before upload
4

Set Location with Google Maps

Enter the property address using the autocomplete feature. The system will automatically:
  • Validate the address using Google Maps Places API
  • Extract latitude and longitude coordinates
  • Display the location on an interactive map
// From src/components/AddressAutocomplete.tsx
const handlePlaceSelect = (place: google.maps.places.PlaceResult) => {
  const location = {
    street: place.name,
    city: place.address_components.find(c => 
      c.types.includes('locality')
    )?.long_name,
    province: place.address_components.find(c => 
      c.types.includes('administrative_area_level_1')
    )?.long_name,
    latitude: place.geometry?.location?.lat(),
    longitude: place.geometry?.location?.lng()
  };
};
5

Submit the Property

Click “Guardar Propiedad” to create the listing. The API call creates the property with all metadata:
// From src/lib/api.ts
const createProperty = async (formData: FormData) => {
  const response = await api.properties.create(formData);
  return response;
};

// API endpoint: POST /api/properties
The property is created with:
  • Unique slug generated from title
  • All images uploaded to storage
  • Metadata associations (type, subtype, features, tags)
  • Location data with coordinates

​
Access Your Property

After creation, your property is accessible at multiple endpoints: 
GET /api/properties/:id

​
Example API Call

// Fetch property by slug
import { api } from "./lib/api";

const property = await api.properties.getBySlug("casa-en-barrio-norte");

console.log(property);
// Returns:
// {
//   id: "123",
//   slug: "casa-en-barrio-norte",
//   title: "Casa en Barrio Norte",
//   price: 250000,
//   currency: "USD",
//   propertyType: "casa",
//   listingType: "venta",
//   bedrooms: 3,
//   bathrooms: 2,
//   location: {
//     street: "Av. Santa Fe",
//     city: "Buenos Aires",
//     latitude: -34.5945,
//     longitude: -58.3974
//   },
//   images: ["url1", "url2"],
//   ...
// }

​
Next Steps

Browse Properties

View and filter all property listings with advanced search

API Reference

Explore all available API endpoints and methods

Authentication

Learn about user authentication and role-based access

Deployment

Deploy your application to production

​
Common Tasks

​
Filtering Properties

import { api } from "./lib/api";

// Filter by property type and price range
const properties = await api.properties.list({
  propertyType: ["casa", "departamento"],
  listingType: ["venta"],
  minPrice: 100000,
  maxPrice: 500000,
  bedrooms: 2,
  location: "Buenos Aires",
  page: 1,
  limit: 20
});

​
Adding to Favorites

// Add property to user favorites
await api.properties.addToFavorites("property-id-123");

// Remove from favorites
await api.properties.removeFromFavorites("property-id-123");

// Get user's favorite properties
const favorites = await api.users.getFavorites();

​
Updating Property Status

// Admin only: Update property status
await api.admin.updatePropertyStatus("property-id-123", "vendido");

// Available statuses:
// - activo: Active listing
// - pendiente: Pending approval
// - reservado: Reserved
// - vendido: Sold
// - alquilado: Rented
// - pausado: Paused
Need help? Check out the Installation Guide for detailed environment setup or the API Documentation for complete endpoint references.

Build docs developers (and LLMs) love

Get started for freeTalk to us