Building a Modern Munro Tracking App: A Developer’s Journey into Frontend, Mapping, and Backend Technologies
As an aspiring developer venturing into a new project, Iโm seeking guidance and insights from the community. With several years of experience in web developmentโprimarily utilizing low-code and no-code platforms like Squarespace and WebflowโI feel ready to elevate my skills through a fresh challenge. Iโm confident in my foundational HTML and CSS, and Iโve dabbled in JavaScript to craft custom plugins. However, I recognize that my growth has plateaued, and Iโm eager to push my boundaries by building something meaningful and personally inspired.
The Inspiration: Scotlandโs Munro Hills
Being an avid hill-walker from Scotland, Iโve long been intrigued by the tradition of โMunro Baggingโโthe pursuit of summiting all the Munros, Scottish peaks over 3,000 feet. There are 282 such hills, and many enthusiasts track their progress using various online tools. Unfortunately, existing websites such as munromap.co.uk and munrobagger.scot feel outdated and lack modern features, especially social functionalities that allow users to compare their lists with friends or plan trips collaboratively.
Project Vision
I aim to develop a sleek, single-page application (SPA) that offers a refined user experience, complete with:
- Detailed individual Munro information pages optimized for SEO
- Interactive, map-based visualizations of the hills
- Social features enabling users to compare lists, share progress, and coordinate outings
My goal is to create a more engaging, contemporary alternative to current options, blending usability with community interaction.
Technology Stack & Approach
After researching suitable tools, hereโs my current plan:
- Frontend: Using Next.js for its powerful server-side rendering (beneficial for SEO) and Tailwind CSS for efficient, modern styling.
- Mapping: Implementing Mapbox GL to provide interactive, customizable map experiences of the Munros.
- Backend & Authentication: Leveraging Supabase for real-time database management, user authentication, and storage.
- Hosting: Deploying on Vercel, which pairs seamlessly with Next.js for smooth deployment and scaling.
Seeking Feedback
Given that this project represents a significant step up from my current skill set, Iโd love to hear your thoughts:
- Does this tech stack align well with my project goals?
- Are there alternative tools or approaches I should consider?
- Any tips or best practices for integrating