When we grouped together for the hackathon, the whole team really liked the very first idea that was given to us by Kurius. Then we decided to come up with ideas, everyone suddenly thought of having a canada wide map. One of the team members suggested we get the data from about all the food banks in Canada so we did that, we created a program that got all the food banks listed from a website we found online. We wanted to apply everyone’s skills to use so we decided on a website for the reason as Choccobunnies had a strong background in HTML and CSS. We made a quiz using python as Panther was good at it and the backend was handled by Saad while the graphics and research was handled by Melted. Our team was our inspiration because we all had the right skills to balance out our team.

What it does

We make it simple and easy for anyone at risk looking for food to connect with exactly whom they need. Meaning, all they need to do is enter their location in our interactive Canada wide map, on the search bar, and they will see ALL the nearby food banks there, right at the tip of their fingers. We currently have :

-Relevance filter based on: -location (province or city?) -radius (in km)

-Filter your search through: -food allergies (nut, dairy, gluten)

  • food restrictions: (halal, kosher, vegan)

-Map: -locators in blue -hovering over it would reveal their name?

  • Draggable stick person? (like in google maps)

Food Bank information(displayed) -Name -Phone number -Address -Longitude, Latitude

How I built it

We divided our website in two parts, the front end and the backend. Choco Bunnies worked on the frontend of the website while Saad and Panther worked on the backend. Together we built a functioning website. We used repl as it saves out code on the cloud and every member of the team has access to it. For the frontend, choco bunnies used HTML and CSS to design the layout of the web pages, from buttons to images everything used HTML and CSS. A slideshow was added on the home page to make it more interactive which included a bit of the javascript which was the backend.

Saad2442 and Panther5252 was mainly in charge for the back end which included: Communication between javascript and python using flask Collecting data about all of the food banks in Canada Storing the data of all of the food banks as a custom database Making and handling request via the Geocoding API, Distance Matrix API and Directions API

Challenges I ran into

While making this website, we ran into many bugs, whether it was the maps javascript or the homepages html, as well as smoothly running our game and adding a messenger bot with sound effects that would display incorrect or correct answers there were many bugs. With the help of the whole team we were able to fix all the bugs and make a nice website.

Accomplishments that I'm proud of

-Design of the website (color theme, gifs, interactive features such as the map and game)

-Interactive features

-Extensive backend and front end coding, as well as relevant and bright images

What I learned

It takes WAY longer than 36 hours to create a functioning and appealing website Implementing the frontend with the backend is more difficult than it seems TEAMWORK and COMMUNICATION is essential, otherwise nothing will get done as no one will be at the same page or work towards a common understood and agreed upon goal or goals(s)

  • Workflow charts and organized displays divided into 3 sections: to do, doing, and done. This really helped us see what we did and where we were headed,

What's next for Meal Mogul

(will qualify to win vouchers or coupons to grocery stores/chain/franchised foodplace) -covid related stuff? -locate host families -drop down menu with options like (school, family, student, individual)

1) Locate temporary/full time host/adoption families as a person in need, or become a temporary/full time host/adoptee through our partner organizations!

2) 2) Messenger bot for quick FAQ’s and Messenger bot for help from our very own bot!he's probably busy eating!

3) YAYY. We are growing! We now have head offices in 5 locations in Ontario, 2 locations in Montreal and 12 more across Canada. How exciting!

Built With

Share this project: