Skip to main content
The SSEGH Security Cameras application is built with a modular component architecture. Each component serves a specific purpose in creating a seamless user experience for browsing and viewing security cameras.

​
Core Components

The application consists of five main component categories:

NavbarTop

Top navigation bar with logo and main menu items (Productos, Nosotros, Contacto)

NavbarAside

Sidebar navigation with dynamic filtering options for camera attributes

​
Product Display Components

CardsCam

Camera card component that displays key specifications and product images

ListCam

Container component that renders multiple camera cards with result counts

​
Filter Components

FilterCamara

Main filtering logic component that manages camera filtering state and URL parameters

​
View Components

ViewCamera

Detailed camera view with full specifications and product information

CardCamara

Individual camera detail card used within ViewCamera

​
Technology Stack

All components are built using:
  • React - Core UI library (via CDN, no build step)
  • React Router DOM - Client-side routing and navigation
  • React Redux - State management for filtering and camera data
  • Bootstrap 5 - Styling and responsive layout
The application uses React via CDN without a build step. Components are written as plain JavaScript functions and rely on global variables like ReactRouterDOM and ReactRedux.

​
Component Architecture

The components follow a functional pattern with React hooks: 
const ComponentName = ({ props }) => {
  const { useHook } = React
  const { useRouterHook } = ReactRouterDOM
  const { useReduxHook } = ReactRedux
  
  // Component logic
  
  return (
    // JSX markup
  )
}

​
Data Flow

  1. Camera data is stored in Redux state
  2. URL parameters control active filters (/productos/camaras/filtro/{filter})
  3. NavbarAside displays available filter options based on current camera data
  4. FilterCamara applies filters and dispatches Redux actions
  5. ListCam renders filtered results using CardsCam components
  6. ViewCamera displays individual camera details based on model parameter

​
Next Steps

Navigation Components

Learn about NavbarTop and NavbarAside components

Product Cards

Understand how camera cards are displayed

Filtering System

Explore the filtering logic and sidebar

Camera Views

Dive into detailed camera view components

Build docs developers (and LLMs) love

Get started for freeTalk to us