ClimBeast

A climbing social network and community built with Angular 22. Log your ascents, share with friends, discover climbing areas with topos created by local equippers, and support crag maintenance. Fully reactive architecture with Angular Signals, server-side rendering (SSR), and mobile-first design.

Features

• 📕 Digital logbook — track and share your ascents
• 👥 Social feed — follow friends, comment on attempts, celebrate sends
• 🗺️ Interactive map — discover climbing areas with vector topos
• ⛏️ Topos by local equippers — topos created and maintained by the community
• 🤝 Support equippers — direct donations for crag maintenance
• 📱 Mobile-first responsive design
• 🔍 Search and filter climbing spots
• 📍 Geolocation support
• 🌐 Multilingual support
• 📶 Progressive Web App (PWA) with offline support

Tech Stack

• Angular 22
  • SSR (Server-Side Rendering)
  • Zoneless change detection
  • Signals for state management
• Taiga UI
• Tailwind CSS 4
• Supabase (PostgreSQL + Auth + RLS)

Navigation

The application uses a responsive navigation system that adapts to the device's screen size. On desktop, it features a collapsible sidebar, while on mobile, it transitions to a bottom navigation bar.

Core Sections

• 🏠 Home: Personalized dashboard with recent activity and updates.
• 🗺️ Explore: Interactive map for discovering climbing spots with advanced filtering (grade, style, shade, etc.).
• 📜 Areas: A comprehensive list view of all climbing areas for quick access.
• ⚙️ Admin / My Areas: Management panel for administrators and equippers to curate crag data.
• 👤 User Profile: Access to your logbook, personal statistics, and account settings.

Content Hierarchy

• Area Details: Overview of a climbing region, including its crags and general info.
• Crag Details: Detailed view of a specific sector, featuring route lists, grade charts, and approach info.
• Topo Viewer: Interactive topo images with route overlays for precise navigation.
• Route Details: Technical specifications, grade distribution, and user ascent history.

PWA & Service Worker

The app is configured as a PWA using Angular Service Worker. It provides:

• Offline caching of the app shell and static assets.
• Installable manifest for mobile and desktop.

Development

Prerequisites

• Node.js & npm
• Supabase account (for database and auth)

Local Setup

bun install
bun start

SSR Testing

bun run build
bun run serve:ssr:climbeast

Contributing

This repo runs Prettier automatically before each commit via Husky + lint-staged.

---

With love, by Gabri Mejía ❤

ClimBeast 🚀