Overview
Genshin Cookbook is a webtool designed to help assist in tracking the 100+ recipes of Genshin Impact!
The site currently supports the in-game Cooking system, however I'm actively working on supporting the Alchemy and Smithing systems with plans to support the Furniture system shortly afterwards!
Story
When I picked up Genshin Impact back in 2021, I never thought the parts of the game that would hook me the most would be the Cooking and Crafting systems. With almost a 100 (and counting) recipes, I found myself quickly struggling to keep track of all of the ingredients required to perfect each dish...
Soon I was spending an hour or more every few days updating my hand-written progress sheets and grocery lists. I gave digital spreadsheets a try but found that the amount of text I'd have to scan through unpleasant to stare at for hours. After thorough digging online, I discovered that while there were many digital planers to assist in tracking character progression, there were none for cooking or crafting.
So I set about making my own~
was clearly in order!
The Tech Stack
The site is written using Sass, and Javascript through the React framework, and served through Cloudflare. A brief description of the technical details of the site can be found below. A more thorough explanation can be found at the repo using the link below.
Local Storage
The core functionality of the site is not reliant on cookies, but instead, on local storage. Upon hitting the site for the first time, a user's local storage is set with multiple string representations of their in-progress recipes, inventory, mora, and settings.
Existing users receive updates to their local storage whenever they refresh the site. This is done by checking their current local storage against the contents of master files and appending any missing information to their local storage values.
Server Storage
Luckily, the majority of the site's data can be kept server-side (exm. images of recipes and ingredients, details on how each recipe is made, etc)
Upon landing on the site, a user's local storage is scanned, updated if needed, and then used in conjunction with the server-side files to populate the UI and run simple calculations used in the cooking and crafting flows.