OnlyChefs

OnlyChefs
Featured Unlockable Recipes
Step-by-step Recipe Guide
Unlocked Recipes

Inspiration

In our fast-paced, bustling world, cooking is nothing short of a tedious task. Most importantly, finding the motivation to cook a healthy, nutritious meal at home with McDonald's being around every corner has always been extremely difficult. That is, until now. Meet OnlyChefs.

What it does

OnlyChefs is a Progress Web App (PWA) that allows individuals to truly enjoy and crave the home cooking journey through a gamified user interface. When users log onto the app, they are provided the option to view a collection of previous recipes they have unlocked based on if they wish to gain or lose weight, along with a navigation bar leading to gacha, recipes, fitness calculator, information, and quiz pages.

Gacha Page

The gacha button is one of the main ways that users can unlock new recipes. Essentially, the gacha mechanic allows individuals to "roll" for featured recipes, with the roll involving RNG. It's similar to buying Willy Wonka chocolate to potentially receive a golden ticket, but for recipes.

Recipes Page

The recipes button is synonymous with the home page. It displays all the recipes that the user has unlocked in a nice, symmetrical, trading card fashion. The user can click on any recipe they wish to cook, and it'll provide step by step instructions, ingredients, and nutritional facts for it.

Fitness Calculator Page

The fitness calculator page is a way for users to determine an estimated amount of calories and macronutrients they should consume to achieve their fitness goals (lose/gain weight). It provides options to enter gender, weight (both metric and imperial), and outputs a detailed table display calories and other macronutrients.

Information Page

The information page provides a nice, compact overview of all the macronutrients and the part they play in our diets.

Quiz Page

The quiz page is one of the main ways that users earn points to spend on gacha rolls. Users are provided with a recipe for a certain dish, but with one ingredient missing. It is then the user's goal to determine what that missing key ingredient is.

How we built it

We built OnlyChefs using a free and open-source front-end compiler known as Svelte. This was a huge aid in enabling us to simultaneously develop cross-platform UIs for desktop, and mobile, including iOS. Along with this, we used TypeScript to develop our data models and a temporary database.

Challenges we ran into

There was definitely no shortage of challenges throughout our hacking journey. Implementing the actual gacha banners took quite a while, as we had to design assets and animations for them. Along with this, expanding a specific recipe card and displaying its contents was a tedious task due to all the layout constraints in place. Last but not least, we had to refactor our data model for the recipes within the last night of the hackathon which lead to a fun night of debugging :)

Accomplishments that we're proud of

Honestly, we're pretty glad that we were able to develop a functioning web app. Developing all our assets in-house was also a fun learning experience throughout the hackathon. Along with this, Svelte was a new technology for four of us, so we were glad to have picked up another tool in our toolkit.

What we learned

Similar to above, Svelte was a new technology for most of us, so learning how to use and model with this framework was definitely a cool experience. We also were able to play around with different ways of designing assets, and were able to learn about many useful features of GitHub that we never knew existed!