As a group of teens taking our first steps towards independent living, needing to prepare our own meals has served as a significant hurdle. Most online recipes are confusing-- each one seems to have a different format, a different measuring system, and unfit serving sizes that forces us to recalculate each ingredient individually. And even if we do find a good recipe, we would often forget the link and website name by the time we want to make it again. We think that there is no reason why online recipes have to be so cluttered and obscure, so our web app is designed to make cooking just as easy as eating.

What it does

Our web app has several functions that help customize and organize recipes from all over the web. Users can either search for a dish by name or input an URL, and our site parses through the site and leaves only the most important bits: the ingredients, and the instructions. Users can then adjust the serving size, and all ingredients are automatically updated to proportion. In addition, individual recipes can be saved and further customized, as we allow users to annotate and edit their copy. We hope that our web app can serve as a digital cookbook, filled with personalized and streamlined recipes chosen by each user themselves.

How we built it

At the beginning of XHacks, our team began work on developing a React.js frontend and flask backend for our REST API. Using axios, we were able to connect the frontend with the backend. We took shifts working on the code since everyone was in different countries. We all took on different roles, whether it was developing code, planning, design, or the presentation itself.

Challenges we ran into

  1. integrating react js and flask app took up alot of time, and it keeps on giving us network error,
  2. integrating HTML CSS to react js makes the code become abit messy and confusing, took me a while to get around it
  3. time constraints - we want to make so much more but time is very limited so we have to accommodate it by cutting down our flow
  4. Connecting backend to frontend or vice-versa

Accomplishments that we're proud of

1.We successfully created a login system with database which uses hashed passwords , giving a extra layer of security to the app.

What we learned

One of us was a complete beginner in web development, and she managed to learn and create the homepage within 2 weeks of learning HTML CSS, Other than developing our coding skills, One of our member did not have any experience designing a web app but she took this opportunity to explore UI design for our team. Planning wise, even though we already cut down so many features, we realised that there were still too much on our plate, so we learned how important it is to just dedicate our time to one, strong feature instead of many unfinished ones.

What's next for ForMeal: Recipe Editor and Organizer

Our team has an intensive list of features to add to ForMeal. One of our most ambitious possibilities is the option to click-and-buy, where users can connect to nearby grocery stores offering online service and purchase missing ingredients right on our site. We believe that this app can save a lot of headache for a lot of people, and look forward to work together and take this project a step further.

Share this project: