Snow Resort Powder Finder

TLDR

SnoWhen provides a clean interface for snow resort data. Due to API costs, the app has only a few resorts, but is set up to handle any amount of resorts. The app's features include the ability to register and to create, read, and update favorite resorts to make them easily accessible.

One of the challenges faced during development was the cost of the third-party API used to access the snow resort data. I considered using a Redis cache to reduce the number of API calls and improve performance but ultimately decided to set up a cron job to hit the API and store the data on the backend. This approach allows for saving snow history and customizing the data structure provided to the front end.

Another issue was deciding what and how much data to display. I decided to keep it simple and focus on the key factors that affect snow quality: predicted snow quantity and weather conditions.

Features and technology

SnoWhen has a modern tech stack that includes Next.js, Strapi, SCSS, and React Query for data synchronization.

I choose next.js to have a SPA-like feel with the options for SSG and SSR. Also, next.js made authentication easier as I could use the API routes as proxies to set my JWT securely in an HTTP-only cookie rather than simply in local storage or memory. I choose Strapi as my CMS to make adding new resorts to the application easy for non-technical users. Strapi also made setting up cron jobs simple, which I knew I wanted.

Lessons learned

One of the lessons learned during development was the importance of having a well-defined design system from the start. After continually adjusting designs in Figma, I realized the lack of a design system made the design process more difficult and time-consuming. In hindsight, I learned that although I can hack together a design, I do not have the skill set of a professional designer and should focus on development, not design.

Another lesson learned was how to use SWR and caches in React Query. After painstakingly setting up some fancy reducers to store my snow resort data, I doubted myself as I thought: "This doesn't seem right... Don't these reducers just store data from the back-end? Could I use react query here instead?". Eventually, after reading the Tkdodos blog, I learned that react-query helps to eliminate the need to store the back-end state on the front end. By improving developer and user experience via SWR, React query has been a game changer.