⌜⌞⌝⌟
⊹⊹
production_ready

SECURITY SYSTEM COMPARISON APP

full-stack web app

A reference digital platform in the security sector for the Balearic Islands market - helping users compare, evaluate and request quotes for alarm systems for homes, offices and businesses.

∷∷∷∷

origin

https://caab.4hmartin.com/

section

Home

∷∷∷∷

category

production_ready

development type

full-stack_web_app

Heber Martin Rodriguez - Project gif
⌜⌞⌝⌟
⌜⌞⌝⌟

◈overview

CAAB (ComparA Alarmas Baleares) is a multi-page web platform designed to become the leading digital reference in the security sector within the Balearic Islands. Its core is an interactive alarm comparator that lets users quickly and clearly analyse differences between security products and services - including technical specs, protection levels, pricing, maintenance plans, smart home compatibility, mobile apps, and monitoring centre connectivity.

Beyond simple comparison, the platform acts as a strategic bridge between interested clients and verified security providers, featuring intelligent lead-generation forms, a quote request system, and an in-person advisory booking flow.

⌜⌞⌝⌟

◈key_features

for_end_users

    01.
  • Interactive comparator

    Select multiple products and compare them side by side in real time, with clearly structured differences.

  • 02.
  • Advanced filters

    Filter by alarm type, price range, security level, smart home compatibility, contract duration, company, and more.

  • 03.
  • Intelligent contact forms

    Adaptive fields pre-filled from the selected comparison, reducing friction at conversion. [global state - zustand]

  • 04.
  • Invoice review (Phase 2)

    Upload a current alarm invoice to receive a personalised market analysis within 48 hours.

  • 05.
  • Multi-language support

    Spanish, English, Catalan and German via i18n.

  • 06.
  • Fully responsive design

    Optimised for mobile, tablet and desktop.

for_admin

    01.
  • Authentication system

    An authentication system using Better Auth has been implemented to provide access to the administration panel.

  • 02.
  • Full content management panel

    Manage partner companies (CRUD), product listings (CRUD), available features/services (CRUD) and manage contact requests.

  • 03.
  • Lead notifications

    Automatic email alerts when a user submits a form, including the comparison data generated (email template designed for multiple email clients).

  • 04.
  • Data visualization

    Charts showing all grouped data, created using the re-charts library.

⌜⌞⌝⌟

◈architecture_diagram

Project architecture diagram - 4hmartin
⌜⌞⌝⌟
⌜⌞⌝⌟

◈database_diagram

Project database entity relationship diagram - 4hmartin
⌜⌞⌝⌟
⌜⌞⌝⌟

◈figma_wireframe

⌜⌞⌝⌟

◈screenshots_&_demos

Hero section desktop screenshot - 4hmartin
⌜⌞⌝⌟
Contact form desktop screenshot - 4hmartin
⌜⌞⌝⌟
Partner companies - Companies grid - Desktop screenshot
⌜⌞⌝⌟
Partner companies - Companies grid - Desktop screenshot
⌜⌞⌝⌟
How it works - Desktop screenshot
⌜⌞⌝⌟
Comparator - Products grid - Desktop screenshot
⌜⌞⌝⌟
Comparator - Filters - Desktop screenshot
⌜⌞⌝⌟
Comparator - Selected products to compare - Desktop screenshot
⌜⌞⌝⌟
Comparator - Product comparison table - Desktop screenshot
⌜⌞⌝⌟
Request quote - Multi-steps form - Desktop screenshot
⌜⌞⌝⌟
Home - Hero section - Mobile screenshot
⌜⌞⌝⌟
Partner companies - Mobile screenshot
⌜⌞⌝⌟
How it works - Mobile screenshot
⌜⌞⌝⌟
Comparator filters - Mobile screenshot
⌜⌞⌝⌟
Demo advice - Desktop screenshot
⌜⌞⌝⌟
Admin panel - Login form - Desktop screenshot
⌜⌞⌝⌟
Admin panel - Dashboard - Desktop screenshot
⌜⌞⌝⌟
Admin panel - Products list - Desktop screenshot
⌜⌞⌝⌟
Admin panel - Create new product - Desktop screenshot
⌜⌞⌝⌟
Admin panel - Companies list - Desktop screenshot
⌜⌞⌝⌟
Admin panel - Create new company - Desktop screenshot
⌜⌞⌝⌟
Admin panel - Contacts generated via request form - Desktop screenshot
⌜⌞⌝⌟
Request quote email example - Admin view (Gmail) - Desktop screenshot
⌜⌞⌝⌟
Request quote email example - Admin view (Gmail) - Desktop screenshot
⌜⌞⌝⌟
⌜⌞⌝⌟

◈design_inspiration

Logotype options for the client
⌜⌞⌝⌟
Header/Navigation design inspiration
⌜⌞⌝⌟
UI and filters examples
⌜⌞⌝⌟
UI and filters examples
⌜⌞⌝⌟
UI and filters examples
⌜⌞⌝⌟
Material design color picker
⌜⌞⌝⌟
⌜⌞⌝⌟

◈tech_stack

FOLLOW_THE_WHITE_RABBIT