Skip to main content
The Inmobiliaria Web project follows a clean, modular architecture with clear separation of concerns.

​
Directory Overview

src/
├── assets/          # Static assets (images, fonts)
├── components/      # Reusable React components
├── contexts/        # React Context providers
├── hooks/           # Custom React hooks
├── lib/             # External service integrations
├── pages/           # Page-level components
├── routes/          # TanStack Router route definitions
├── types/           # TypeScript type definitions
├── utils/           # Utility functions and helpers
├── main.tsx         # Application entry point
├── index.css        # Global styles & Tailwind imports
└── routeTree.gen.ts # Auto-generated route tree

​
Core Directories

​
Components (src/components/)

Reusable UI components used throughout the application.
  • AddressAutocomplete.tsx - Google Places autocomplete input
  • DraggableImageItem.tsx - Sortable image component for property forms
  • FilterSidebar.tsx - Property search filters
  • Footer.tsx - Global footer layout
  • Header.tsx - Global header with navigation
  • HomePageSearchBar.tsx - Search bar for homepage
  • ListingsSearchBar.tsx - Search bar for listings page
  • PropertyCard.tsx - Property preview card
  • PropertyMap.tsx - Interactive map with property markers
  • SearchBar.tsx - Generic search component
  • SecureRoute.tsx - Protected route wrapper
  • WhatsAppButton.tsx - Floating WhatsApp contact button
Components are organized as single-file components with all logic, styles, and JSX in one .tsx file.

​
Pages (src/pages/)

Page-level components that represent full views.

Public Pages

  • HomePage
  • ListingsPage
  • PropertyDetailPage
  • AboutPage (Nosotros)
  • ServiciosPage
  • QuieroVenderPage

Auth Pages

  • AuthPage (Login/Register)
  • ForgotPasswordPage
  • PasswordResetPage
  • EmailVerificationPendingPage
  • VerifyEmailPage

Protected Pages

  • AdminPage
  • PropertyFormPage
  • FavoritesPage

​
Routes (src/routes/)

File-based routing with TanStack Router. Each file represents a route. 
routes/
├── __root.tsx              # Root layout (Header, Footer, Auth)
├── index.tsx               # Homepage route
├── nosotros.tsx            # /nosotros
├── servicios.tsx           # /servicios
├── quiero-vender.tsx       # /quiero-vender
├── favorites.tsx           # /favorites (protected)
├── propiedades.tsx         # /propiedades (layout)
├── propiedades.index.tsx   # /propiedades (listing)
├── propiedades.$propertyId.tsx  # /propiedades/:id
├── propiedades.p.$slug.tsx      # /propiedades/p/:slug
├── listings/
│   └── p/
│       └── $slug.tsx       # /listings/p/:slug
├── auth.tsx                # /auth (layout)
├── auth/
│   ├── index.tsx           # /auth (login)
│   ├── forgot-password.tsx # /auth/forgot-password
│   ├── reset-password.tsx  # /auth/reset-password
│   ├── verify-email.tsx    # /auth/verify-email
│   └── verify-email-pending.tsx
├── admin.tsx               # /admin (layout, protected)
└── admin/
    ├── index.tsx           # /admin (dashboard)
    └── property/
        ├── new.tsx         # /admin/property/new
        └── edit/
            └── $propertyId.tsx  # /admin/property/edit/:id
Routes are automatically discovered by TanStack Router and compiled into src/routeTree.gen.ts. Never edit this file manually.

​
Contexts (src/contexts/)

React Context providers for global state management.

AuthContext.tsx

Manages global authentication state:
  • Current user session
  • Login/logout methods
  • User permissions
  • Session persistence

​
Hooks (src/hooks/)

Custom React hooks for reusable logic.

usePermissions.ts

Check user roles and permissions

useSEO.ts

Manage document title and meta tags

​
Lib (src/lib/)

External service integrations and client configurations.
  • api.ts - API client and HTTP request utilities
  • auth-client.ts - Better Auth client configuration
  • googleMaps.ts - Google Maps API loader and utilities

​
Types (src/types/)

TypeScript type definitions and interfaces.
  • api.ts - API response types and request payloads
  • index.ts - Core application types (Property, User, etc.)

​
Utils (src/utils/)

Utility functions and helper modules.

authErrorTranslator.ts

Translate auth errors to Spanish

errorHandler.ts

Global error handling utilities

search.ts

Search and filter logic

seo.ts

SEO utilities and meta tag generation

youtube.ts

YouTube embed helpers

index.ts

General utility functions

​
File Naming Conventions

Use PascalCase for React component files:
PropertyCard.tsx
HomePage.tsx
AddressAutocomplete.tsx
Use kebab-case and TanStack Router conventions:
index.tsx              → /
nosotros.tsx          → /nosotros
quiero-vender.tsx     → /quiero-vender
$propertyId.tsx       → /:propertyId (dynamic)
p.$slug.tsx           → /p/:slug (dynamic)
Use camelCase for non-component files:
usePermissions.ts
authErrorTranslator.ts
search.ts

​
Entry Point

​
src/main.tsx

The application entry point that:
  1. Imports global CSS (Tailwind)
  2. Creates the TanStack Router instance
  3. Configures the Toaster for notifications
  4. Renders the app with StrictMode
src/main.tsx
import { RouterProvider, createRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";

// Create router with configuration
const router = createRouter({
  routeTree,
  scrollRestoration: true,
});

// Register for type safety
declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

​
Root Layout

​
src/routes/__root.tsx

Defines the root layout that wraps all routes:
src/routes/__root.tsx
export const Route = createRootRoute({
  component: () => (
    <AuthProvider>
      <Header />
      <Outlet />  {/* Child routes render here */}
      <Footer />
      <WhatsAppButton />
      <TanStackRouterDevtools />
    </AuthProvider>
  ),
});
The <Outlet /> component is where child routes are rendered. This pattern enables nested layouts.

​
Component Organization Best Practices

Single Responsibility

Each component should have one clear purpose

Composition

Build complex UIs by composing smaller components

Colocate Logic

Keep related code together in the same file

Type Safety

Use TypeScript interfaces and types extensively

​
Assets

​
src/assets/

Static assets like images, fonts, and other media files. 
assets/
└── unnamed.webp  # Example image asset
Use WebP format for images to optimize file size and performance.

​
Generated Files

Never edit these files manually - they are automatically generated:
  • src/routeTree.gen.ts - Generated by TanStack Router plugin
  • Build output in dist/ directory

​
Configuration Files (Root)

project-root/
├── vite.config.ts       # Vite configuration
├── tailwind.config.js   # Tailwind CSS configuration
├── tsconfig.json        # TypeScript configuration
├── eslint.config.js     # ESLint rules
├── postcss.config.js    # PostCSS plugins
├── package.json         # Dependencies and scripts
└── index.html           # HTML entry point

​
Import Aliases

The project uses relative imports. For example: 
// From a route file
import HomePage from "../pages/HomePage";
import { authClient } from "../lib/auth-client";

// From a component
import { AuthContext } from "../contexts/AuthContext";
import { usePermissions } from "../hooks/usePermissions";
Consider adding path aliases in tsconfig.json for cleaner imports:
"paths": {
  "@/components/*": ["./src/components/*"],
  "@/lib/*": ["./src/lib/*"]
}

​
Next Steps

Tech Stack

Explore the technologies used

Routing

Learn about the routing system

Build docs developers (and LLMs) love

Get started for freeTalk to us