🌱 FloraWeb

FloraWeb is a web application for managing smart plant IoT sensors.
It allows you to:

• authenticate and work in a protected area of the app
• browse your devices and see their current status
• monitor measurements (soil moisture, temperature, light, battery level)
• configure thresholds for alarms and reading/check intervals
• control automatic watering and light‑based movement

The project is intended as a real-life control panel for a plant watering system and as a portfolio piece showcasing frontend architecture and integration with an IoT backend.

---

Tech stack

• Frontend: React, TypeScript, Vite, React Router
• State management: Zustand (separate stores for auth, devices, alarms, measurements)
• Styling & UI: Tailwind CSS, custom UI component library (Button, Card, Input, EmptyState, LoadingSpinner, etc.)
• API layer: custom services for domain areas (auth, devices, measurements, alarms, config, control), typed with shared API types

---

Features

• Authentication & protected routes

  • Login/register flow with token handling
  • ProtectedLayout wrapping private pages
  • Auth state persisted via dedicated store

• Devices & measurements

  • Devices list with status badges
  • Details view with recent measurements
  • Dedicated pages for alarms and historical measurements

• Device configuration

  • Rich form for configuring device behavior (DeviceConfigPage)
  • Handling nullable and numeric values (mapping between empty fields, null, and 0)
  • Separate sections for readings/alarms, light, and watering
  • Flags for automatic watering and light movement, with configurable intervals

• UX & error handling

  • Loading and error states (spinners, inline error messages)
  • Clear empty states when no data is available
  • Polish i18n for user-facing copy

---

Project structure (simplified)

• src/components/ – shared UI and domain-specific components (devices, layout, etc.)
• src/pages/ – routed pages (auth, devices, alarms, measurements, profile)
• src/services/ – API integration grouped by domain
• src/store/ – Zustand stores for each domain
• src/types/ – shared API types
• src/utils/ – helpers for formatting, validation and alarm cooldown logic

---

Getting started

pnpm install    # or npm install / yarn
pnpm dev        # start Vite dev server

By default the app expects a running backend providing authentication, devices, measurements, config and control endpoints.
You can adapt the base URL and endpoints in the API configuration files under src/config and src/services.

---

Status

FloraWeb is an ongoing personal/portfolio project used as a real control panel for a home plant watering system and as a showcase of frontend architecture for IoT dashboards.