Pin Point DevLog: Week 1
Pin Point Devlog: A Week of Challenges, Learnings, and Wins
This past week has been a rollercoaster of development, configuration, and overcoming unexpected challenges while working on Pin Point. Here's a breakdown of what went down!
🚀 Kicking Off the Week
We started off strong by fixing up some frontend components and backend configuration. With a solid foundation, I moved on to automating deployments using Azure DevOps Pipelines to deploy both my database and API to the backend.
I initially hosted the frontend as an Azure Static Web App. It was incredibly easy to deploy and worked well right out of the box. However, things quickly took a turn when I started integrating Google Search Console, Google Analytics, and Google AdSense.
🔎 SEO Woes & The Vite Problem
Being a backend developer, I hadn’t given much thought to SEO before. My past frontend work had been on internal tools where SEO doesn't matter. But now, I had to ensure Pin Point was optimized for search engines.
I soon realized that using Vite for a public-facing application was a terrible choice for SEO. I spent quite a bit of time trying to implement static page generation in Vite, but it turned out to be super complicated. So, I decided to research the best frontend framework for an SEO-heavy project.
After reading multiple sources, I discovered that Next.js had everything I needed: server-side rendering (SSR), static site generation (SSG), and built-in SEO optimizations. I bit the bullet and decided to migrate to Next.js while we were still early in development.
🔄 Moving to Next.js
To my surprise, migrating to Next.js wasn't as bad as I expected. That said, I did run into some nasty issues with react-simple-maps and the ZoomableGroup component.
Since Next.js requires pages to be server-rendered, the ZoomableGroup had problems because it required client-side interaction for zooming. This led to constant selection.interrupt errors. After struggling with this for a while, I found a solution:
✅ Removed the initial zoom from ZoomableGroup
✅ Moved zoom settings to the ComposableMap component, configured dynamically based on the country
This fixed the issue and allowed smooth client-side interactions without breaking SSR.
🛠️ The Pipeline Nightmare
Once the frontend migration was done, I faced a bigger challenge: getting Next.js to deploy properly in Azure DevOps Pipelines and App Services.
At first, I had package conflicts due to mistakenly having both a package-lock.json and a yarn.lock file. That was easy to fix. However, the real problems started when I deployed to an Azure App Service. The app wouldn’t start because it couldn’t find Next.js to run next start.
I spent the entire weekend trying to force the issue and keep everything in the Azure ecosystem, thinking:
It’s Microsoft, so it should be the best for my experience, right?
I was entirely wrong. I wasted so much time trying to get this to work, writing YAML files, debugging build errors, and tweaking configuration settings.
🚀 Discovering Vercel: The Game Changer
After all that frustration, I looked into Vercel for about two minutes and immediately decided to give it a shot. I had to:
✅ Create a GitHub account and push my code there
✅ Connect my repo to Vercel
✅ Deploy my application (which took 5 minutes)
✅ Set up custom domains & SEO optimizations instantly
No pipeline YAML files, no build errors—it just worked. It was beautiful.
🔧 Backend Progress & Next Steps
Despite the frontend and deployment struggles, I made great progress on the backend:
✅ Set up a database project
✅ Configured automated deployments
✅ Built a solid backend foundation
With this in place, I can now focus on the next major tasks:
- Migrate country data from the frontend to an API (serving from the database) as described here: Migrating static data
- Introduce GeoGuessr quizzes to attract more users and make Pin Point an even better resource!
🎯 Final Thoughts
This week was a huge learning experience—from understanding SEO challenges to moving to Next.js and deploying with Vercel. I wasted a lot of time on Azure App Services, but it taught me a valuable lesson:
Use the right tool for the job, not just what you're familiar with.
I'm excited about the future of Pin Point, and I can't wait to see where the next week of development takes me! 🚀
📌 Follow along for more updates!