Building a Modern Munro Tracking App: A Developer’s Journey from Novice to Creator
Embarking on a new side project can be both exciting and daunting, especially when aiming to challenge yourself beyond your current skill set. If you’re passionate about both web development and Scottish hillwalking, creating a dedicated platform to enhance the Munro-bagging experience could be the perfect venture. Here’s an overview of how to approach such a project, focusing on modern tools and best practices.
Understanding the Inspiration
For those unfamiliar, Munros are Scottish peaks exceeding 3,000 feet, with over 280 of these hills. Many enthusiasts keep track of their achievements, but existing websites—like munromap.co.uk and munrobagger.scot—often feel outdated and lack interactive features. The goal is to craft a sleek, single-page application that provides a superior user experience, including social functionalities like comparing lists with friends and planning trips.
Planning Your Tech Stack
Given your background working with no-code/low-code builders such as Squarespace and Webflow, and your familiarity with vanilla CSS, HTML, and basic JavaScript, this project is a great opportunity to elevate your skills using modern development frameworks and services. Here’s a suggested architecture:
Frontend Development
- Framework: Next.js — a powerful React framework optimized for server-side rendering and static site generation, ideal for SEO-friendly pages.
-
Styling: Tailwind CSS — a utility-first CSS framework that enables rapid, responsive UI design with minimal fuss, aligning perfectly with your goal for a premium appearance.
Mapping and Geographic Features -
Mapbox GL JS — an advanced JavaScript library for interactive, customizable maps, perfect for displaying Munro locations and hiking routes dynamically.
Backend, Authentication, and Database
- Supabase — an open-source Firebase alternative providing a scalable backend with real-time database, authentication, and storage solutions, simplifying the backend development process.
Hosting and Deployment
- Vercel — a seamless platform optimized for Next.js applications, offering fast deployment, scalability, and smooth integration.
Is This the Right Path?
Your chosen stack reflects current industry standards for building responsive, interactive web apps. While it represents a significant step up from your previous experience, it’s also a fantastic way to learn and grow as a developer. Here are a few tips:
- Start Small: Begin with core features—displaying Munro info, map integration, basic user login—and gradually add social features.
- Learn Along the Way: Utilize tutorials, official documentation, and community forums
