NodeWave-EA/sensors.AFRICA.Mapv2

About The sensors.AFRICA map showing data from air quality sensors deployed across the continent. Accessible at # sensors.AFRICA.Mapv2 A web application for visualizing real-time sensor data on an interactive map. Built for the sensors.AFRICA initiative to empower communities with accessible environmental data. ## Technologies Used - **Vue 3** (Composition API, Single File Components) - **TypeScript** - **Vite** (build tool) - **Pinia** (state management) - **Tailwind CSS** (utility-first styling) - **Grafana** (embedded charts) - **pnpm** (package manager) - **ESLint** (linting, see `eslint.config.ts`) - **Vercel** (deployment) ## Features - **Interactive Map:** - Visualize sensor locations and real-time/historical data overlays on a dynamic map interface. - Pan, zoom, and click markers to view sensor details. - Map logic is abstracted in `src/composables/useMap.ts` and styled via `src/utils/mapStyleUtils.ts`. - Supports theming and responsive design for all map interactions. - **Sensor Detail Views:** Drill down into individual sensor readings and history. - **Theme Toggling:** Switch between light and dark modes. - **Grafana Integration:** Embedded charts for advanced data visualization. - **Responsive UI:** Mobile-friendly, fast, and accessible. ## Architecture - **Frontend:** Vue 3 (Composition API, SFCs), TypeScript - **State Management:** Pinia (see `src/stores/`) - **Styling:** Tailwind CSS (see `tailwind.config.js`, `src/style.css`) - **API Layer:** All API calls centralized in `src/services/api.ts` - **Composables:** Shared logic in `src/composables/` (notably `useMap.ts` for map logic) - **Utilities:** Common helpers in `src/utils/` ## Directory Structure ``` src/ App.vue # Main app shell main.ts # App entry point style.css # Global styles components/ # Reusable UI components composables/ # Vue composables (logic reuse) router/ # App routing services/ # API integration stores/ # Pinia stores (state) types/ # TypeScript types utils/ …