Skip to main content
This guide walks you through running the application and exploring its core features.

​
Prerequisites

Before you start, ensure you have:
  • A modern web browser (Chrome, Firefox, Safari, or Edge)
  • An internet connection for CDN dependencies
  • A local web server (or use npx serve for quick testing)

​
Run the Application

1

Clone the repository

Download or clone the source code to your local machine:
git clone https://github.com/eduardo24cba/paginasseghcamaras.git
cd paginasseghcamaras
2

Start a local server

Use any local web server. For quick testing:
npx serve .
Or use Python’s built-in server:
python -m http.server 8000
3

Open in browser

Navigate to http://localhost:8000 (or your server’s address) to see the landing page.
The application uses React Router with HashRouter for client-side routing.
1

View the product catalog

Click on the products link in the navigation bar, or navigate directly to:
http://localhost:8000/#/productos
This route loads the Main component from components/main.js:1.
2

Browse camera listings

The products page displays:
  • Left sidebar: Filter controls organized by category
  • Main content: Grid of camera cards showing available products
  • Each card: Shows camera image, model, resolution, and key specs
The application fetches camera data from a remote JSON endpoint at https://eduardo24cba.github.io/dataSsegh/camaras.json on initial load.

​
Use Filters

The application includes a powerful filtering system to help users find specific cameras.

​
Available Filter Categories

The sidebar displays three main filter categories:
  • Diseño (Design): Interior or Exterior cameras
  • Resolución (Resolution): 2MP, 4MP, 5MP options
  • Tipo de Cámara (Camera Type): Domo, Bullet styles

​
Apply a Single Filter

1

Click a filter option

In the sidebar, click any filter option (e.g., “Exterior”).
2

View filtered results

The URL updates to /productos/camaras/filtro/exterior and displays matching cameras.The filter logic is handled in components/filtercamaras.js:10-14:
let filtros_aplicados = filterArray(filter)

useEffect(() => {
    dispatch(filterCamarasAside(filtros_aplicados))
    setFiltrado(true)
}, [location.pathname])
3

See result count

The page header shows how many cameras match your filters (e.g., “12 Resultados”).

​
Apply Multiple Filters

1

Select additional filters

After applying one filter, click another option from a different category.
2

Filter combination

The URL updates to include multiple filters:
/productos/camaras/filtro/exterior-4-mp
The Redux store filters cameras that match ALL selected criteria using filterCamarasAside in store/camarasSlice.js:163-181.
3

View active filters

Active filters appear as removable badges at the top of the sidebar.

​
Remove Filters

Click the X button on any active filter badge to remove it. The filter removal logic is in components/navbarAside.js:53-60: 
onClick={()=> {
    let resultado = createSlug(createUrlFilter(filter, filtro))
    if(!resultado){navigate('/productos', {state:{text:['reset']}})}
    else{
        navigate(`/productos/camaras/filtro/${resultado}`, {replace:true})
        dispatch(backToInitialState([filtro]))
    }
}}
Removing all filters redirects you back to /productos with all cameras visible.

​
View Camera Details

Click any camera card to view detailed specifications:
1

Select a camera

Click on a camera card in the grid.
2

View details page

Navigate to /productos/camaras/:modelo to see:
  • Full camera specifications
  • High-resolution images
  • Detailed description
  • Technical features
3

Contact via WhatsApp

Use the floating WhatsApp button to inquire about the selected camera.

​
Next Steps

Installation Guide

Learn about browser requirements and CDN dependencies

Architecture

Understand the application structure and design patterns

Components

Explore the React component hierarchy

State Management

Learn how Redux manages application state

Build docs developers (and LLMs) love

Get started for freeTalk to us