>My Climbing Repository<

Back to Projects
The inspiration for this product was from a personal gripe with the old moonboard website. If you're a climber like me you know how unsuable that website was. There were no filtering for climbs, looking for specific videos of was practically impossible. Nowaday a lot of people have dedicated instagram accounts to host their beta videos, but even then looking for specific videos for climbs are hard to find. MoonBoard did realease an updated at the end of 2023 for their application which is a bit more useable and you can now videos of specific climbs. But a lot of the videos that were previously referenced on their database got wiped so the older videos are harder to find. Troubled with this, I decided to my own climbing repository in which allows me to search and filter my own videos.

Architecture

The application is built up on Node/Express for the backend and React in the FrontEnd written TypeScript/Javascript following an MVC pattern and RESTful API's to transfer data. Since I'm not really expecting much traction on this application, and is mainly used for uploading videos once in a while, there is really no need to build full on distributed systems with microservices. A monolith is just fine.

There is an additional webscraping service managed by puppeteer to get required images/ videos links off of instagram. Because of the sheer amount of images and videos, if I were to store these by myself I would need to obtain somewhere close to a Petabyte of storage and I cannot afford that. So instead I'm leveraging Instagrams free public viewing storage instead. Storing the just the linking data, 1 video worth of information is roughly 1-3kb. Meaning I can have close to a MILLION videos for the free 1GB storage Supabase gives me

Challenges & Compromises

Initially, I aimed to integrate Instagram OAuth, considering many climbers maintain dedicated Moonboard Instagram accounts. However, encountering challenges, I had opted for Iframes to display videos. This proved to be a short term solution but provided long load problems and on mobile would crash even with lazy loading. I could not cache the Iframes because instagram embeds are dynamic. So then I pivoted to source out the videos. The videos links came with it's own share of problems. While they work indivdually accessed on the browser, I got Access-Control-Allow-Origin CORS errors when trying to load them from my frontend. While this no longer crashes when accessed on mobile, the experience isnt particuarly too great. So I may change the mobile version to only show an image and a link.

Next Steps

Since Moonboard took down their database of problems, I had to manually recreate the their problem dataset. This would take sometime. Ultimately I would like to have all different boards accessable and you can flip between them. Some UI cleanup and possible the ability to search up problems by holds