Skip to content

Sembauke/opm-node-counter

Repository files navigation

🗺️ OPM Node Counter

{12432492-6221-4D7F-8379-6BFF4B745C66}

A real-time dashboard for tracking OpenStreetMap (OSM) statistics and changeset activity. This Next.js application provides live updates of node counts, changeset totals, mapper activity, and more with a beautiful, modern UI.

OPM Node Counter Dashboard React TypeScript Chakra UI

✨ Features

  • Real-time Statistics: Live tracking of OSM nodes, changesets, and mapper activity
  • Beautiful Dashboard: Modern glass-morphism UI with smooth animations
  • Live Updates: WebSocket integration for real-time data updates
  • Mapper Analytics: Track unique mappers, top contributors, and activity patterns
  • Changeset Monitoring: View recent changesets with detailed information
  • Responsive Design: Works perfectly on desktop and mobile devices
  • Dark Theme: Eye-friendly dark mode with cyan accent colors

📊 Dashboard Features

  • Total Nodes: Real-time count of all OSM nodes
  • Total Changesets: Track total number of changesets
  • Unique Mappers (Hour): Number of unique contributors in the last hour
  • Top Mappers: Most active contributors
  • Average Changes (Hour): Average changes per hour
  • Largest Changeset: Biggest changeset in the current hour
  • Nodes per Minute: Real-time calculation of node creation rate
  • Recent Changesets: Live feed of latest OSM changes

🛠️ Tech Stack

  • Framework: Next.js 15.1.7 (App Router)
  • Language: TypeScript
  • UI Library: Chakra UI 3.8.0
  • Real-time: Socket.IO
  • Database: Redis (for caching and real-time data)
  • Styling: CSS Modules with custom animations
  • Icons: React Icons
  • Animations: React CountUp for number animations

📦 Installation

Prerequisites

  • Node.js 18+
  • npm, yarn, pnpm, or bun
  • Redis server (for real-time features)

Setup

  1. Clone the repository

    git clone https://github.com/Sembauke/opm-node-counter.git
    cd opm-node-counter
  2. Install dependencies

    npm install
    # or
    yarn install
    # or
    pnpm install
    # or
    bun install
  3. Start Redis server

    # Install Redis if you haven't already
    # On Windows: Use WSL or Docker
    # On macOS: brew install redis
    # On Linux: sudo apt-get install redis-server
    
    redis-server
  4. Run the development server

    npm run dev
    # or
    yarn dev
    # or
    pnpm dev
    # or
    bun dev
  5. Open your browser Navigate to http://localhost:3000

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published