Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Real-time SL bus tracker using GTFS-RT data from Trafiklab, mapped to static PostgreSQL data. Built with Next.js.

Notifications You must be signed in to change notification settings

StyleSensei/minbuss-nu

Repository files navigation

Search for a bus line and instantly display busses from SL, Storstockholms Lokaltrafik πŸš€

dashboard

Introduction

Min Buss.nu is a Next.js application that show real-time bus information from SL (Storstockholms Lokaltrafik). It uses both static GTFS data and real-time GTFS-RT data from Trafiklab. The data is rendered on a map from Google Maps.

Flowchart

flowchart

Apply for API-keys

To get started with Min Buss.nu, you will need to apply for for two API-keys from Trafiklab. You can get started immediately by following the guide on Trafiklab. For this project you will need one key for GTFS Regional Realtime and one key for GTFS Regional Static Data. Since we will ask for real-time data quite frequently, you will also need to upgrade the quota for GTFS Regional Realtime to silver.

Next, you need to apply for a key from Google for the Maps Javascript API.

Tutorials

Create Database and Populate Tables πŸ—ƒοΈ

To serve the data, you will need a PostgreSQL-compatible database. This project uses Vercel Postgres, a serverless and scalable solution from Neon, but you can choose any database you prefer.

Currently, database migrations are not set up, so some manual steps are required:

Steps:

  1. Create the tables

Create the following five tables:

  • routes
  • stop_times
  • stops
  • trips
  • calendar_dates

You can find the required table structures and data types in the SQL schema files located in the /schema directory of this project. Use these files to create the tables in your database. You can also have a look at the UML diagram below.

UML diagram

uml Β 

  1. Download GTFS Static Data

Download the GTFS Regional Static Data from Trafiklab and unzip the file to access the .txt files.

  1. Populate the tables

Use a database tool like DBeaver or a SQL command-line tool to import the text files into the corresponding tables.

Create .env.local File πŸ”

  1. Create the file

In the root of the project, create a file named .env.local. This file will store your environment variables for local development.

  1. Add your variables

Place all your environment variables inside this file. For example:

NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your-google-maps-api-key
DATABASE_URL=your-database-url
  1. Why NEXT_PUBLIC ?

Environment variables prefixed with NEXT_PUBLIC are exposed to the client-side code in Next.js. Since Google Maps runs on the client, its API key must be prefixed NEXT_PUBLIC to make it accessible in the browser.

  1. Keep it secure

Ensure .env.local is listed in your .gitignore file to prevent sensitive data from being committed to your repository.

Clone repo and install dependencies βž•

git clone https://github.com/StyleSensei/degree-project-where-is-the-bus.git && cd where-is-the-bus && npm install

Getting Started πŸŽ‰

First, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Tech stack πŸ—οΈ

Tech stack

Core Framework and Language

  • Next.js (with App directory): Used for server-side-rendering, routing, and API handling.
  • TypeScript: Types! For improved developer experience.

Styling

  • Sass: Provides advanced CSS features like variables, mixins, and nesting for maintainable and scalable styling.

API Communication

  • Axios: Used for making HTTP requests to fetch real-time bus data and static GTFS files.

Database

  • Vercel Postgres: Serverless PostgreSQL database for scalability and easy integration
  • Drizzle ORM: For type-safe SQL queries.

Cache

  • Upstash Redis – Used to avoid unnecessary API calls and improve performance. We cache both real-time data from Trafiklab and static data from the database.

ProtoBuf parser

  • GTFS-realtime Language Bindings: For parsing the protobuf format into JavaScript objects.

Unzipper

  • Unzipper: allow access to the underlying files of the zip-archive we get from Trafiklab's GTFS Regional Static Data API.

CSV parser

  • Csv parser converts the unzipped csv/txt-files into JSON.

Validation

  • Zod & Drizzle-Zod: Allows us to generate Zod schemas from Drizzle ORM schemas and enable validation during runtime.

Linting and formatting

  • Biome: Ensures consistent code quality with built-in formatting and linting.

Map

  • Google Maps Javascript API: For map visualization.
  • @vis.gl/react-google-maps: React integration for efficient map rendering.

JS Animations

  • GSAP: for smooth movement of the bus markers.

Real-time data handling

  • GTFS-RT: For real-time bus position updates.
  • Static GTFS data: Used for mapping and bus route metadata.

Deployment

  • Vercel: For seamless deployment and serverless infrastructure.

Cron job for Static Data Updates ♻️

To ensure the static GTFS data remains up-to-date, a GitHub Actions workflow runs the GTFS update script once a month. Trafiklab updates the static data infrequently, so this monthly update is sufficient.

Using GitHub Actions

  • This project uses GitHub Actions to schedule and run the cron job. The workflow is configured to run monthly and execute the GTFS update script directly.
  • You can find the workflow configuration in the .github/workflows/cron-job.yml file.
Example GitHub Actions Workflow
name: Run GTFS Update Cron Job

on:
  schedule:
    - cron: '0 3 1 * *' # Once a month at 03:00 UTC on the first day
  workflow_dispatch:     # Allow manual triggering from GitHub

jobs:
  run-cron:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build cron job
        run: npm run build:cron

      - name: Run GTFS update script
        run: NODE_PATH=./dist-cron node scripts/updateGTFSData.mjs
        env:
          DATABASE_URL: ${{ secrets.DATABASE_URL }}
          GTFS_REGIONAL_STATIC: ${{ secrets.GTFS_REGIONAL_STATIC }}

Resources πŸ“

The GTFS Regional API documentation from Trafiklab was a key reference for understanding how to decode and use real-time transit data.

Learn More

To learn more about Next.js, take a look at the following resources:

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out Next.js deployment documentation for more details.

Contact

Got questions? Reach out!

About

Real-time SL bus tracker using GTFS-RT data from Trafiklab, mapped to static PostgreSQL data. Built with Next.js.

Resources

Stars

Watchers

Forks

Contributors 2

  •  
  •