A clean, responsive web dashboard for a "Smart Community Health Monitoring and Early Warning System".
Built with React + Vite + TypeScript + Tailwind CSS. Includes pages for Dashboard, Symptom Reports, and Map View (Northeast India embed).
- Dashboard: top navbar, key stats, real-time charts (pH, turbidity, temp), sensor readings table, alerts panel
- Symptom Reports: villager report form (name, village, symptoms, date) + persisted table
- Map View: embedded Northeast India map and list of places with color-coded risk levels (Safe / Warning / Outbreak)
- Mobile-responsive, modern health + water theme (soft greens/blues)
- Dummy/placeholder data included so the UI is populated out of the box
- Clone repository
- Install:
- pnpm: https://pnpm.io/
- then run: pnpm install
- Development: pnpm dev
- Build: pnpm build
- Start production build: pnpm start
- Run tests: pnpm test
- Type checking: pnpm typecheck Notes: the project defaults to pnpm in package.json; adapt if you prefer npm/yarn.
- client/App.tsx — router + layout wrapper
- client/pages/Index.tsx — Dashboard page
- client/pages/SymptomReports.tsx — Reports page + form + table (localStorage)
- client/pages/MapView.tsx — Map view (Google Maps embed + place list)
- client/components/Layout.tsx — top navbar + shared layout
- client/global.css + tailwind.config.ts — theme tokens, colors, layout
- server/* — express endpoints (demo routes if needed)
- shared/* — shared types
- The Map View uses an embedded Google Maps iframe (no API key required for the simple embed).
- Clicking a place focuses the iframe on that coordinates. For more advanced interactivity (pan/zoom, geo features, markers, clustering), consider adding react-leaflet (OpenStreetMap) or Mapbox (requires API key).
- No secrets are required for the basic embed. If you add Mapbox or other provider, add keys via environment variables and ensure they're kept out of git (.env, CI secret store).
- To change theme colors, edit client/global.css variables (HSL format) and tailwind.config.ts extension tokens.
Connect useful integrations via the MCP popover for deployment, data, and tooling:
- Connect to Neon — serverless Postgres (DB)
- Connect to Netlify — continuous deployment & hosting
- Connect to Zapier — automation & workflows
- Connect to Figma — design import (use Builder.io plugin link in MCP)
- Connect to Supabase — DB + auth + realtime services
- Connect to Builder.io — CMS & content management
- Connect to Linear — project management & issues
- Connect to Notion — documentation storage
- Connect to Sentry — error monitoring & reporting
- Connect to Context7 — library docs and references
- Connect to Semgrep — security scanning / SAST
- Connect to Prisma Postgres — ORM for Postgres
(You can open the MCP popover from the Builder environment UI to connect any of the above.)
- Quick: connect the repo to Netlify or Vercel (MCP) and enable automatic deploys.
- Netlify: (MCP) recommended — builds the source server-side; no local build required prior to linking.
- Vercel: (MCP) recommended — automatic for frontend + serverless functions.
- Replace embedded map with react-leaflet for richer map controls and markers.
- Wire symptom reports to a persistent DB (Neon / Supabase) and add basic auth for reporting.
- Add realtime sensor feeds via WebSocket / server-sent events to push new alerts.
- Branch off main, make changes, run pnpm test and pnpm typecheck before PR.
- Follow existing file and component patterns (small, reusable UI components under client/components/ui).
- If UI looks off: confirm tailwind built and that client/global.css variables are HSL strings (tailwind uses hsl(var(--...))).
- If map embed is blocked: check CSP and embedding policy for Google Maps, or switch to leaflet + OSM.
If you’d like, I can:
- Create this README.md file in the repo for you, or
- Open a PR with README plus brief CONTRIBUTING and ISSUE_TEMPLATE files. Which would you prefer?