BikeNav 🚲

A simple web app to help you find nearby bike parking.

I love biking places. I especially love biking to new places. Unfortunately, in our imperfect world, I never know if or where there will be a place to lock my bike at my destination. I often would spend time scouring Google Maps satelite images and street view to try to figure out what I do with my bike.

I got fed up with it, and created BikeNav! Using OpenStreetMap APIs, with BikeNav you can now easily find parking near you or get biking directions to the closest parking to your destination.

This application was one of my first forays into what the "cool kids" call "vibe coding" 😉 The original prototype was built using Builder.io, and for refinement and additional features I used the OpenCode CLI

🛠️ Tech Stack

This is a fully client-side app, making use of open-source mapping tools and APIs.

Frontend: React 18 + TypeScript + Vite
Styling: TailwindCSS 3 + Radix UI components
Mapping: Leaflet + React Leaflet
Routing: React Router 6
Data: OpenStreetMap APIs (Nominatim + OSRM)
Testing: Vitest
Icons: Lucide React

🚀 Getting Started

Prerequisites

Node.js 18.17 or later
Git

Local Development Setup

Clone the repository

git clone https://github.com/algabl/bikenav
cd bikenav

Install dependencies
```
npm install
```
Start the development server
```
npm run dev
```

The application will be available at http://localhost:8080.

📖 Available Scripts

npm run dev - Start development server at http://localhost:8080
npm run build - Build for production
npm run preview - Preview production build locally
npm test - Run unit tests
npm run typecheck - TypeScript type checking
npm run format.fix - Format code with Prettier

🌐 Production Deployment

Static Build

npm run build
npm run preview

The app builds to a static site that can be deployed to any static hosting service like:

Netlify
Vercel
GitHub Pages
AWS S3 + CloudFront

🏗️ Project Structure

client/                   # React SPA frontend
├── api/                  # API interface layer
├── components/           # React components
│   ├── ui/              # Reusable UI components (Radix + Tailwind)
│   ├── Map.tsx          # Leaflet map component
│   ├── SearchBox.tsx    # Location search with geocoding
│   ├── DirectionsList.tsx # Parking location results
│   ├── RouteDisplay.tsx # Route information display
│   └── ModeSelector.tsx # Toggle between parking/directions
├── hooks/               # Custom React hooks
├── lib/                 # Core business logic
│   ├── bicycle-parking.ts # OSM bicycle parking data fetching
│   ├── routing.ts       # OSRM bike route calculation
│   ├── types.ts         # TypeScript type definitions
│   └── utils.ts         # Utility functions
├── pages/               # Route components
│   ├── Index.tsx        # Main app page
│   └── NotFound.tsx     # 404 page
├── App.tsx              # App entry point with routing
└── global.css           # TailwindCSS styles

public/                   # Static assets
├── favicon.ico
└── robots.txt

Configuration files:
├── package.json         # Dependencies and scripts
├── tsconfig.json        # TypeScript config
├── tailwind.config.ts   # TailwindCSS config
├── vite.config.ts       # Vite build config
└── components.json      # Radix UI component config

🧪 Features

Interactive Map

Leaflet-powered mapping with OpenStreetMap tiles
Click-to-select locations for easy route planning
Real-time markers for start, destination, and parking locations
Route visualization with turn-by-turn directions overlay

Two Core Modes

Parking Mode

Find bicycle parking near any destination
Search by address using Nominatim geocoding
Distance and amenity info for each parking location
Visual markers showing parking availability and type

Directions Mode

Full bike route planning from start to destination
Optimal routing using OSRM bike-specific routing
Turn-by-turn directions with distance and duration
Parking integration - routes can include nearby bike parking

Smart Search

Address autocomplete with geocoding suggestions
Current location detection with GPS integration
Manual map selection by clicking anywhere
Location permission prompts for enhanced UX

Responsive Design

Mobile-first interface optimized for on-the-go use
Desktop-friendly with expanded sidebars and controls
Smooth animations and transitions between modes
Accessible UI built with Radix primitives

Open Source Data

OpenStreetMap for all mapping and location data
No API keys required - fully client-side operation
Community-driven bicycle infrastructure data
Real-time updates as OSM data improves

View original README on GitHub