Skip to main content
Inmobiliaria Web is built with modern web technologies focused on performance, type safety, and developer experience.

​
Core Framework

React 19

Latest version of React with improved server components and concurrent features

TypeScript 5.8

Type-safe JavaScript with advanced type checking and inference

​
Build Tools

Vite 7

Next-generation frontend tooling with lightning-fast HMR

TanStack Router Plugin

Automatic route tree generation with type safety

​
Vite Configuration

The project uses Vite with TanStack Router plugin for automatic code splitting:
vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { tanstackRouter } from "@tanstack/router-plugin/vite";

export default defineConfig({
  plugins: [
    tanstackRouter({
      target: "react",
      autoCodeSplitting: true,
    }),
    react(),
  ],
});

​
Routing & Navigation

TanStack Router 1.130

Type-safe routing with automatic code splitting, search params validation, and nested layouts
Key Features:
  • File-based routing with automatic route tree generation
  • Full TypeScript support with type-safe navigation
  • Built-in devtools for debugging routes
  • Search parameter validation
  • Nested layouts and route groups
Dependencies: 
"@tanstack/react-router": "^1.130.12"
"@tanstack/react-router-devtools": "^1.130.13"
"@tanstack/router-plugin": "^1.130.15"

​
Styling

Tailwind CSS 3.4

Utility-first CSS framework

clsx

Conditional className utility

tailwind-merge

Merge Tailwind classes intelligently

​
Custom Theme

The project extends Tailwind’s default theme with custom colors:
tailwind.config.js
theme: {
  extend: {
    colors: {
      primary: {
        500: '#f59e0b',  // Amber/Gold
        600: '#d97706',
        // ... more shades
      },
      secondary: {
        500: '#64748b',  // Slate
        800: '#1e293b',
        // ... more shades
      },
    },
    fontFamily: {
      sans: ['Inter', 'system-ui', 'sans-serif'],
    },
  },
}

​
Authentication

Better Auth 1.3

Modern authentication solution with email verification, password reset, and session management
Implementation:
  • Custom AuthContext for global auth state
  • SecureRoute component for protected routes
  • Email verification flow
  • Password reset functionality
Files:
  • src/lib/auth-client.ts - Auth client configuration
  • src/contexts/AuthContext.tsx - Global auth state
  • src/components/SecureRoute.tsx - Route protection

​
Maps & Geolocation

Google Maps API

Address autocomplete and geocoding services

Leaflet 1.9

Interactive maps with React bindings
Dependencies: 
"@googlemaps/js-api-loader": "^1.16.10"
"@types/google.maps": "^3.58.1"
"leaflet": "^1.9.4"
"react-leaflet": "^5.0.0"
"@types/leaflet": "^1.9.20"
Components:
  • AddressAutocomplete.tsx - Google Places autocomplete
  • PropertyMap.tsx - Leaflet map for property locations

​
UI Components & Icons

Lucide React 0.460

Modern icon library with 1000+ icons

React Hot Toast 2.6

Lightweight notification system

​
Toast Configuration

src/main.tsx
<Toaster
  position="top-right"
  toastOptions={{
    duration: 4000,
    style: {
      background: "#363636",
      color: "#fff",
    },
    success: {
      duration: 3000,
      style: { background: "#10b981" },
    },
    error: {
      duration: 5000,
      style: { background: "#ef4444" },
    },
  }}
/>

​
Drag & Drop

DnD Kit

Modern drag and drop toolkit for React - used for image reordering in property forms
Dependencies: 
"@dnd-kit/core": "^6.3.1"
"@dnd-kit/sortable": "^10.0.0"
"@dnd-kit/utilities": "^3.2.2"
Implementation:
  • DraggableImageItem.tsx - Sortable image component
  • Used in property creation/edit forms

​
Code Quality

ESLint 9

Code linting with React-specific rules

TypeScript ESLint 8

TypeScript-specific linting rules
Plugins:
  • eslint-plugin-react-hooks - Enforce hooks rules
  • eslint-plugin-react-refresh - Validate HMR setup

​
Development Tools

"scripts": {
  "dev": "vite",              // Start dev server
  "build": "tsc -b && vite build",  // Type check + build
  "lint": "eslint .",         // Lint codebase
  "preview": "vite preview"   // Preview production build
}
The project uses ES Modules ("type": "module") throughout the codebase for modern JavaScript features.

​
Utility Libraries

LibraryVersionPurpose
clsx2.1.1Conditional class names
tailwind-merge2.5.4Merge Tailwind classes without conflicts

​
Browser Support

The application targets modern browsers that support ES2020+ features. Vite automatically handles transpilation for the target environment.

​
Next Steps

Project Structure

Learn how the codebase is organized

Routing System

Understand the routing architecture

Build docs developers (and LLMs) love

Get started for freeTalk to us