- react
- gatsby.js
- node.js
- graphql
- html5
- css3
- google sheets
- markdown
- netlify
- design
- product photography
Project background
Lekker Limburgs is a regional product store in the Belgian province Limburg. They sell local beers, local wines, cold cuts, cheese, sweets, ...
The problem
As a small and local store with limited resources Lekker Limburgs had zero online presence at the time. On top of that, sales were going down year after year, there was no website, no presence on social media, nor was there a digital inventory of their product catalog to analyze suppliers, prices or margins.
The solution
Setting up social media was a no brainer and low hanging fruit, so I prioritized that as the first issue to tackle. Afterwards I started to create a huge google sheet containing the full product catalog, with meta data like the origin of the products, their content, product category, internal product numbers, purchase price, sale price, ... this would serve it's good use later on.
The website was next up, and turned out to be an ideal case study to put my learnings into practice. Via Wordpress and my newly acquired frontend skills I was able to setup a nice online presence in a matter of months.
Years later when I had shifted my focus fully towards javascript. The constant hassle of keeping wordpress plugins up to date, and the overall slowness of the site gave me the itch to fully rebuild it. And so I did. I chose to give gatsby a try. Known for it's fast, secure, and powerful open-source framework it served an ideal match for this big website upgrade.
It made a lot of sense to reuse all of the google sheet data as the main source of truth. Like that, the store manager could keep all of his product properties up to date in a well known tool, without the need of building an overengineered dashboard system to manage all of this.
Via a node.js script all the sheet's data is pulled in, and generates a markdown file per product. Then I set up gatsby so that the build process would generate a unique page per markdown file and hence product. All pages are statically built for faster load times and seamless navigation. With a push of the button, this script would rerun, recreate all the files and hence stay in sync with the latest updates of the google sheet.
Such a store is an ideal destination for tourists. Because most tourists do not speak Dutch, I added translation support for English, German, and French. The most spoken languages by tourists.
After all the SEO optimizations, blog posts, social media, product photography, and many created ads, sales and website traffic started picking up. Eventually we opened an extra pop-up store in the heart of the city.
Features
- Static Site Generation via markdown files
- Super fast e-commerce website
- Multi-language support
- Light mode / Dark mode
- Markdown blog pages
The impact
- Lekker Limburgs went from zero online presence to setting the benchmark in their sector: a well functioning e-commerce website and social media people were engaging with.
- After years of decline, sales went up again. We even opened a second store in the city centre.
- The volume of the website traffic went up, resulting in online orders, and more offline orders. People were now able to see the product catalog before coming to the store.
- Tourists now easily find the store, and can understand what the store is about, what the offer is, and how to easily reach it.
