Skip to main content

​
Technology Stack

Villa Buena E-Commerce is built with a modern React ecosystem leveraging industry-standard libraries for optimal performance and developer experience.

Frontend Framework

React 19.2.0 with functional components and hooks

Build Tool

Vite 7.3.1 for fast development and optimized production builds

State Management

Zustand 5.0.11 with persistence middleware

Data Fetching

TanStack React Query 5.90.21 for server state

Routing

React Router DOM 7.13.1 with nested routes

HTTP Client

Axios 1.13.6 for API communication

Authentication

Auth0 React 2.15.0 for secure user authentication

UI Framework

Bootstrap 5.3.8 with custom styling

​
Core Dependencies

The application leverages the following key dependencies from package.json:12-21: 
"dependencies": {
  "@auth0/auth0-react": "^2.15.0",
  "@tanstack/react-query": "^5.90.21",
  "axios": "^1.13.6",
  "bootstrap": "^5.3.8",
  "lucide-react": "^0.577.0",
  "react": "^19.2.0",
  "react-dom": "^19.2.0",
  "react-router-dom": "^7.13.1",
  "zustand": "^5.0.11"
}

​
Architectural Layers

The application follows a clear separation of concerns across multiple layers:
1

Presentation Layer

React components organized by feature (pages, components) that render the UI and handle user interactions.
2

State Management Layer

Zustand stores manage client-side state (cart, user data, UI preferences) with localStorage persistence.
3

Data Layer

React Query handles server state, caching, and data synchronization with automatic refetching and background updates.
4

Service Layer

Service modules encapsulate API communication logic and provide clean interfaces for data operations.
5

API Layer

Axios instance configured with base URL from environment variables for external API integration.

​
Application Entry Point

The application initializes in main.jsx:13-24 with a provider hierarchy: 
ReactDOM.createRoot(document.getElementById("root")).render(
  <QueryProvider>
    <Auth0Provider
      domain="dev-rafaelval.us.auth0.com"
      clientId="ripKJ8Jjq1c3gLEOcusOGUTBTFVGoVdG"
      authorizationParams={{ redirect_uri: window.location.origin }}
      onRedirectCallback={onRedirectCallback}
      cacheLocation="localstorage"
    >
      <RouterProvider router={router} />
    </Auth0Provider>
  </QueryProvider>,
);
The provider hierarchy ensures that React Query, Auth0, and React Router are available throughout the entire component tree.

​
Directory Structure

The source code is organized as follows: 
src/
├── app/
│   ├── providers/      # Provider components (QueryProvider)
│   ├── router.jsx      # Route configuration
│   └── Layout.jsx      # Root layout component
├── components/         # Reusable UI components
├── pages/             # Page-level components
├── store/             # Zustand state stores
├── services/          # API service modules
├── hooks/             # Custom React hooks
├── main.jsx           # Application entry point
└── index.css          # Global styles

​
Design Patterns

​
Provider Pattern

The application uses React Context providers for cross-cutting concerns like data fetching and authentication.

​
Custom Hooks

Business logic is encapsulated in custom hooks (useProducts, useProduct) that combine React Query with service layer calls.

​
Service Layer Pattern

API calls are abstracted into service modules, keeping components clean and focused on presentation.

​
Store Pattern

Zustand stores follow a simple create/update pattern with minimal boilerplate compared to Redux.

​
Build Configuration

The project uses Vite with minimal configuration in vite.config.js:5-7: 
export default defineConfig({
  plugins: [react()],
})
Vite’s near-instantaneous HMR (Hot Module Replacement) and optimized build process make it ideal for modern React development.

​
Environment Configuration

The API base URL is configured via environment variables: 
baseURL: import.meta.env.VITE_API_URL
This allows different configurations for development, staging, and production environments.

​
Next Steps

State Management

Learn about Zustand stores and client state patterns

Routing

Explore React Router configuration and navigation

API Integration

Understand API services and React Query integration

Build docs developers (and LLMs) love

Get started for freeTalk to us