Case Study: BETHACKERS
Main Challenge: Create Bet Picking and Analysis with Custom Design
Processing vast amount of data can always be a bit challenging. However, processing, analyzing and displaying it in a customized way is definitely an epic challenge. We went with the idea that there should in total be 3 parts. Main table display, the pick display tool and the calendar.
For the framework we opted to go with VueJS, due to its ease of use, flexibility and extensibility. However, as soon as we started, we hit the roadblock - VueJS templating markup was the same as Shopify Liquid. We, as Shopify web developers love a good challenge though. So, we changed the delimiters it to look like default JavaScript ES6 in order to avoid the collision and continued onwards.
Once basic design was ironed out, we were able to dynamically update the date, countdowns and everything else, just using VueJS and Moment (most useful time manipulation tool). For the days that there were no games, we opted to go with simple text showing that there are no games on a particular day, prompting user to pick another day.
In a nutshell, the most interesting part of the project is connecting the dots where they were "not supposed to be connected", by integrating VueJS on the front-end and creating a hyper customized design that would perfectly fit the narrative of the merchant's ideas, while allowing the merchant to completely maintain the control of all the aspects of the store.
Another day, another Kaleido Club project.