will/water-station-tracker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
water-station-tracker/README.md
Will Bradley 7b332f873a Keep popups open/refreshed, rename app
2025-07-16 17:52:24 -07:00

2.7 KiB
Raw Blame History

CoolingStations.org Water Station Tracker

A mobile-first web application for tracking water refill stations with social login, real-time status updates, and interactive mapping.

Features

  • Multi-platform Authentication: Login via Google, Instagram, or traditional username/password
  • Interactive Map: View all water stations with color-coded status indicators
  • Mobile-First Design: Optimized for smartphones and tablets
  • Real-time Updates: Track refill times and estimated empty times
  • Status Color Coding:
    • 🟢 Green: Recently refilled
    • 🟡 Yellow: Needs refill soon
    • 🔴 Red: Empty
    • ⚫ Black: Not updated in 7+ days

Installation

  1. Clone the repository

  2. Install dependencies:

    npm install

  3. Set up environment variables in .env:

    SESSION_SECRET=your-secret-key
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
INSTAGRAM_CLIENT_ID=your-instagram-client-id
INSTAGRAM_CLIENT_SECRET=your-instagram-client-secret

  4. Run the application:

    npm start

OAuth Setup

Google OAuth

  1. Go to Google Cloud Console
  2. Create a new project or select existing
  3. Enable Google+ API
  4. Create OAuth 2.0 credentials
  5. Add authorized redirect URI: http://localhost:3000/auth/google/callback

Instagram OAuth

  1. Go to Instagram Developers
  2. Create a new app
  3. Add Instagram Basic Display product
  4. Create Instagram App
  5. Add redirect URI: http://localhost:3000/auth/instagram/callback

Database Schema

The app uses SQLite with three main tables:

  • users: User authentication and profile data
  • water_stations: Station locations and basic info
  • station_updates: Status updates with timestamps

API Endpoints

  • GET /: Public map view
  • GET /login: Login page
  • GET /dashboard: User dashboard (requires auth)
  • GET /api/stations: Get all stations
  • POST /api/stations: Add new station (requires auth)
  • POST /api/stations/:id/update: Update station status (requires auth)

Usage

  1. Public Users: Can view the map and station statuses
  2. Registered Users: Can add new stations and update existing ones
  3. Station Updates: Include description, refill time, and estimated empty time
  4. Mobile Interface: Responsive design works on all screen sizes

Development

For development with auto-reload:

npm run dev

Production Deployment

  1. Set NODE_ENV=production
  2. Configure HTTPS and update session cookie settings
  3. Set up proper database backup
  4. Configure reverse proxy (nginx recommended)

License

MIT License