Skip to main content

​
Frontend Overview

The Iquea Commerce frontend is a modern React application built with TypeScript, providing a fast and responsive user interface for the e-commerce platform.

​
Technology Stack

The frontend leverages cutting-edge web technologies:

React 19

Latest React with improved performance and new features

TypeScript 5.9

Type-safe development with advanced type checking

Vite 7

Lightning-fast build tool and dev server

React Router 7

Client-side routing with modern navigation

​
Key Dependencies

Based on the project’s package.json:
package.json
{
  "dependencies": {
    "jwt-decode": "^4.0.0",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "react-icons": "^5.5.0",
    "react-router-dom": "^7.13.0"
  },
  "devDependencies": {
    "@types/react": "^19.2.5",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^5.1.1",
    "typescript": "~5.9.3",
    "vite": "^7.3.1"
  }
}

​
Core Libraries

  • jwt-decode - Decodes JWT tokens for authentication
  • react-icons - Icon library with FiIcons and Material Design icons
  • react-router-dom - Client-side routing

​
Project Structure

The source code follows a modular, feature-based structure: 
src/
├── api/                  # API client and service modules
│   ├── client.ts        # Base HTTP client with auth headers
│   ├── auth.ts          # Authentication endpoints
│   ├── productos.ts     # Product endpoints
│   ├── categorias.ts    # Category endpoints
│   └── pedidos.ts       # Order endpoints
├── components/          # Reusable UI components
│   ├── Navbar.tsx       # Navigation bar
│   ├── Footer.tsx       # Site footer
│   └── ProductoCard.tsx # Product card display
├── context/             # React Context providers
│   ├── AuthContext.tsx  # Authentication state
│   └── CartContext.tsx  # Shopping cart state
├── pages/               # Route-level page components
│   ├── Home.tsx
│   ├── Login.tsx
│   ├── Register.tsx
│   ├── ProductList.tsx
│   ├── ProductDetail.tsx
│   ├── Cart.tsx
│   ├── Habitaciones.tsx
│   ├── Nosotros.tsx
│   └── Contacto.tsx
├── types/               # TypeScript type definitions
│   └── index.ts         # Shared interfaces and types
├── App.tsx              # Root application component
└── main.tsx             # Application entry point

​
Development Workflow

​
Starting Development Server

npm run dev
Starts the Vite development server with hot module replacement (HMR) on http://localhost:5173.

​
Building for Production

npm run build
Compiles TypeScript and creates an optimized production build in the dist/ directory.

​
Type Checking

TypeScript compilation happens automatically during build: 
npm run build  # Runs tsc -b && vite build

​
Linting

npm run lint
Runs ESLint with React-specific rules to maintain code quality.

​
Preview Production Build

npm run preview
Serves the production build locally for testing before deployment.

​
Configuration Files

​
Vite Configuration

vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

​
TypeScript Configuration

The project uses three TypeScript config files:
  • tsconfig.json - Base configuration
  • tsconfig.app.json - Application-specific settings
  • tsconfig.node.json - Node/build tool settings

​
Styling Approach

The application uses pure CSS without any CSS framework:
  • Component-specific CSS files (e.g., Navbar.css, Footer.css)
  • BEM-like naming convention (e.g., navbar__container, navbar__link)
  • Custom properties for theming
  • No CSS-in-JS or utility frameworks

​
Architecture Patterns

​
Context-Based State Management

Global state is managed using React Context API:
  • AuthContext - User authentication state
  • CartContext - Shopping cart state

​
Type-Safe API Layer

All API calls are typed with TypeScript interfaces, ensuring type safety throughout the application.

​
Component Composition

Reusable components follow React best practices:
  • Functional components with hooks
  • Props interfaces for type safety
  • Separation of concerns (UI vs. logic)

​
Next Steps

React Components

Learn about the UI component library

Routing Setup

Understand the application routing

State Management

Explore authentication and cart contexts

API Integration

See how the frontend connects to the backend

Build docs developers (and LLMs) love

Get started for freeTalk to us