MIXIR

MIXIR: diversify your palette and 'mix-up' your culinary skills with a new food buddy.

Comment

Welcome to MIXIR!

Here you will learn how the development of MIXIR came to be, as well as how we (the developers) had created it!

Inspiration

When SheHacks initially released the hacker package, the theme was "Hacker's Kitchen", which we had taken quite literally-- we wanted to create something food-related, something that could connect people during COVID-19 and allow for improvements in culinary skills. The first things that drifted into our minds first were penpals and old family recipes! When we think of these, it feels... cozy... comforting. That's exactly what we wanted to portray in our website, leading us to decide the aesthetics of our formerly nameless website. Our colour palette was inspired by a friend of ours who had mentioned that certain colours could make you hungry, most of the them being warm, bright colours. We wanted to mellow it out though because sometimes we don't want to have intense hues glaring at us when we're on our screens. Also because pastel colours are pretty :D. Lastly, MIXIR's name had also been inspired from a friend of ours. After they heard our concept, they jokingly said, "That sounds like a dating site over food!" (which, by the way, that's not what MIXIR is, but we'll talk more about that later). We blew up from laughter hearing that and eagerly thought of kitchen machines that could represent this, landing on a KitchenAid mixer but Facebook already trademarked that name, so we 'mixed it up' a bit~ That's how our idea of MIXIR came to life!

What it does

Earlier we mention that MIXIR is NOT meant to be a dating site over food and it isn't. There are more than enough apps and websites trying to tie people together romantically, but what if you just wanted a friendly connection from halfway across the world? What if you wanted to share your families recipe in a small way? What if you wanted to broaden the horizons of your taste buds? All this can be accomplished through MIXIR, a website built to help you improve your culinary knowledge and connect with those around the world without words, but by food. The idea is that you sign up with different regions in mind, taking into account your allergies, dietary restrictions, and your taste preferences. After that, you submit your own recipe or snack that makes you happy onto MIXIR, and you'll later be given other possible foods that MIXIR thinks could be your next favourite!

How we built it

We used Python and Flask for the website framework. Using Python, we created a function to check to see how much spice, sweetness, savouryness, etc our comsumers preferred. We would then add up the scores and compare it to other recipe/ snack scores (with a marginal difference of 5) to match participants with a few recipes. If our consumers selected a dietary restriction, matches with those tags would be hidden from them, to ensure that they would be able to eat the food they receive. Our savior here was Figma, which allowed us to properly visualize what we wanted MIXIR to ideally look like. Once our Figma design was completed, we tried to use plugins to export our design into html and css, but we ran into a few challenges doing so. Once done, we would add the exported code into our Flask frame work to create our pretty website.

Challenges we ran into

Unfortunately for us, we ran into a lot of problems when we were trying to convert our Figma mock up into html. Since neither of us had used Figma, simply learning how to manipulate it was a challenge and once we developed the final interactive product, there were simply too many conversion issues too far gone to fix and troubleshoot within our time limit, thus preventing us from bringing our design onto our framework. Creating our logo was also a pain since we had to incorporate the letter "M" whilst making it look... not horrible. Making the logo on Figma was a learning curve on it's own, and once we had given up on that, we opened up Krita and resorted to drawing our logo there. Only problem, was that our stylus died... Just trust that the actual logo would like 100% better.

Accomplishments that we're proud of

Considering how both of us are beginner programmers and definitely not adept at using Figma, being able to make our website layout and the coding functions make us feel like proud parents to their child that just won bingo.

What we learned

We learned a lot about Figma and layout design, so the next time we use it, we'll be much more prepared. During this time, we had the opportunity to try out Flask, and while we got the initial server running with the ability to switch through pages, our lack of html and css knowledge impeded us from creating our final vision. Although, we still got to tap our toes into html and css, and while we are not the best with it, we are still proud to at least be able to do the bare minimum and make a home page. :D

Built With

Share this project:

Updates