5 Picos

5 Picos

Non-competitive trail running event across the 5 peaks surrounding Pamplona. Interactive maps, weekly registration, and community features.

  • Next.js
  • TypeScript
  • Tailwind CSS
  • libSQL
  • Turso
  • NextAuth.js
  • Leaflet
  • OpenTopoMap
Live demo ↗ Source code ↗

Open 5 Picos in a new tab ↗

What it is

5 Picos is a full-featured event management platform for a non-competitive trail running / hiking event across the five peaks surrounding Pamplona (Irulegui, Higa, El Perdón, Sarbil, San Cristóbal). Five Saturdays, five stages, one adventure.

Built for the event organizer to showcase the race, explain the goals and stages, and let participants sign up — including authentication and an admin dashboard.

Interactive topographic map

Each stage has a GPS route loaded from GPX-to-GeoJSON conversion into the database. The Leaflet-based map renders all five routes with OpenTopoMap tiles and lets users click a stage card to highlight its route on the map. The map loads client-side via next/dynamic so it doesn’t affect SSR.

Weekly registration system

Participants create an account (email/password or Google OAuth via NextAuth.js) and enroll in individual stages. The organizer opens or closes registration per stage from the admin panel, and participants can cancel their enrollment at any time from a profile page.

Dual authentication

  • Email / password — credentials stored with bcrypt hashing in libSQL.
  • Google OAuth — via NextAuth.js with auto-provisioning. Sessions are managed server-side with JWT.

Admin dashboard

Authenticated admin users can view a paginated list of participants per stage and edit stage details (name, dates, distances, open/close registration). The admin is seeded on first setup.

Mobile-first and fully in Spanish

The entire UI — content, labels, dates, everything — is in Spanish (Peninsular locale). The responsive layout works across mobile and desktop with Tailwind CSS and a mobile-first design flow.

Architecture

  • Next.js 16 App Router — server components by default, client components only where interactivity is needed (map, registration buttons).
  • libSQL (SQLite-compatible) — local SQLite for development, Turso for production.
  • Tailwind CSS 4 — utility-first styling with CSS variables for theming.
  • No ORM — raw SQL queries via @libsql/client for simplicity and control.