Skip to content

Latest commit

 

History

History
119 lines (81 loc) · 4.12 KB

README.md

File metadata and controls

119 lines (81 loc) · 4.12 KB
Raw

Umeme Upo?

A Next Js app that shows you the current power status of various areas in Dar es Salaam, Tanzania.

There are 2 main repositories for this project:

  • Umeme Upo - The Next Js Web App
  • Umeme Upo Esp32-ping - The ESP32 code that adds a new record to the database every after a certain amount of time.

How it works

  1. The ESP32 device pings makes a request to the API every 5 minutes. This is like a heartbeat.
  2. The API then adds a new record to the database recording the time and location of the ping.
  3. When a user visits the website, the website checks the database for the last ping if it was within the last 5 minutes, it shows the power status as ON, otherwise it shows the power status as OFF. The website refreshes every 30 seconds to check for new values in the database.

You can also check on the flow charts below.

Flow Chart 1 (Website):

Flow Chart 1

Flow Chart 2 (ESP32 Device): Flow Chart 2

Features

  • [✅] Shows you the current power status of your area.
  • [✅] Change Area to view power status.
  • [✅] Shows the last time the power check was done
  • [✅] Funny / Not so Funny Quotes
  • [ 🔜] Share power status on social media
  • [ 🔜] Share Quotes on social media.
  • [ 🔜] Realtime Power Status Update

Later On:

  • Mobile App
  • Push Notifications
  • SMS Notifications
  • Email Notifications
  • WhatsAPP Notifications / Bot

Screenshots

Umeme Upo Dark

Umeme Upo Light

(From the Figma File)

Supported Areas

  • [✅] Makumbusho Currently only supports Makumbusho area. More areas will be added soon. If you want to add your area, please open an issue. or contact me on @fredygerman_

Design (UI/UX)

The Amazing designs done by @faustin_henry.

Amazing Logo by @makindajack.

You can help improve it by visiting the Figma File and requesting access.

Tech Stack

  • Next Js
  • Typescript
  • Chadcn UI (Components Library) - Chadcn
  • Tailwind CSS (Styling)
  • Supabase (Database and API)
  • @tanstack/react-query (Data Fetching) - React Query
  • Vercel (Frontend Hosting)
  • ESP32 device to ping the API

Database Schema

The example schema for the database per area is as follows:

-- Create makumbusho_logs table
CREATE TABLE makumbusho_logs (
    id serial PRIMARY KEY,
    created_at timestamptz DEFAULT now(),
    errors jsonb DEFAULT '{}',
    source text
);
-- Create makumbusho_errors table
CREATE TABLE makumbusho_errors (
    id serial PRIMARY KEY,
    created_at timestamptz DEFAULT now(),
    errors jsonb DEFAULT '{}',
    source text
);

API

The API is auto generated by Supabase. You can view the API docs here. This helps us use the ESP32 devices to add new records to the database by making a simple request to the API. i.e. POST https://<your-project>.supabase.co/rest/v1/<your-table> with the body being the data you want to add.

Contributing

If you want to contribute to this project, please open an issue. Areas that need help:

Visit the Contributing Guidelines for more information.

Code of Conduct

Visit the Code of Conduct for more information.

License

This project is licensed under the MIT License - see the LICENSE file for details.