DEVLOG #5 — STARTED WORK ON ADMIN DASHBOARD, IMPLEMENTED LIVE FLOOR MAP

Work Done:

Started work on the admin dashboard
Built the floor map feature and made it show in which room a badge is currently in
Live badge dots render directly on the floor map, positioned in the room they were last detected in
Added StatCards to the Overview page -> Badges Online, Scanners Online, Rooms Occupied, Total Badges

Add dynamically updating status for scanners where pi-bridge sends a heartbeat and scanner-node responds to it
Add sections to admin dashboard to add, remove or manage badges and scanners, along with a logs section to log any changes

@BrunoGG on Spottr · 6 days ago

5h 46m 50s logged

Website: https://spottr.brunogg.in

Implemented a login page with Firebase Auth which supports but Google Sign-In as well as via Email & Password (Added a test user with its credentials posted on login page for future testing and for public showcase of the project)
Added Protected routes - dashboard will remain inaccessible without logging in
Switched the badge identification from using device_id ex. SPOTTR_BADGE_0XX to a MAC Address based identification coz its much more reliable and harder to spook
Fixed some major and minor bugs
Worked on the pi-bridge code to get readings of MAC Address.
Set up Firebase RTDB badges/ node — each badge registered by MAC address with label, owner name and active status. This will be used in the dashboard to display owner names instead of raw MAC addresses and also used to assign a badge to a user and block or allow access

Build the admin dashboard with live floor map giving location data for each badge user
Continue work on the landing page

@BrunoGG on Spottr · 9 days ago

6h 37m 15s logged

Website: https://spottr.brunogg.in

Built floating navbar with sliding hover pill animation on desktop
Added hamburger menu for mobile with smooth open/close animations and click-outside-to-close
Logo centers on mobile, left-aligns on desktop
Fixed SPOTTR intro animation to be properly centered on all screen sizes
Made hero section fully responsive for mobile
Pi Bridge now pushes live badge locations to Firebase RTDB and logs history to Firestore
Added online/offline detection for both scanner nodes and badges with 60 second timeout

Build admin dashboard with live floor map pulling from Firebase RTDB
Add How It Works, Hardware and Software sections to landing page
Add Firebase Auth to protect the dashboard
Flash second scanner node and test strongest-signal room detection across multiple rooms
Deep sleep badge firmware for battery life

@BrunoGG on Spottr · 13 days ago

4h 6m 47s logged

Finally the hardware arrived and I started work straight away…
First time diving into this deep of C++ programming… Dam it was tough fr

Website: https://spottr.brunogg.in/

Set up PlatformIO in VS Code for programming the ESP32 Boards
Flashed badge firmware on ESP32-C3 to continuously advertise via BLE with ID SPOTTR_BADGE_0XX
Built scanner node firmware for ESP32-C6 to scan for BLE Devices with ID starting from SPOTTR_
Set up Raspberry Pi OS and installed MQTT broker
Improved Scanner Node range by using antennas salvaged from old WiFi routers
Added 30 second heartbeat from scanner to monitor online/offline status

@BrunoGG on Spottr · 15 days ago

4h 49m 3s logged

Note: Hardware arrives on 7th June, the real work starts then

Website: https://spottr.brunogg.in

Designed a model for the badge using Fusion 360 and logo using Canva
Got Hero Section working
Added 3D model of the product in website using React Three Fiber
Added Intro animation to the website using AceternityUI where the SPOTTR text draws itself across the full screen with color gradient stroke on load, then fades to reveal the hero content. (Took alot longer to perfect and get timings as well as colors right 💀)