Mealio

As students at the University of Leeds, my team and I feel a deeply personal connection to this project. This isn’t just a theoretical problem it’s something we experience first hand, every single day. Through countless conversations, we’ve realized that no matter the year, degree, or background, nearly every student here struggles with the same issue. These issues involve finding the time, energy, and motivation to eat properly. And this isn’t just a Leeds problem it’s a nationwide crisis for university students. Too often, we’re too exhausted to cook, spend too long deciding what to eat, or simply forget to eat altogether, buried under coursework, lectures, and society commitments. But skipping meals isn’t just an inconvenience; it’s a serious health risk. Research from the Journal of the Academy of Nutrition and Dietetics links it to an increased risk of cardiovascular disease and even higher mortality rates. The National Institute of Health warns that poor meal habits lower energy levels, compromise immunity, and impair cognitive function, all of which make university life even more challenging. Yet, this struggle is normalized, joked about, and branded as the "typical university experience" when in reality, it’s a plague on student health. That’s why we created Mealio, to challenge this harmful mindset and provide a real solution. Our hope is that this project sparks awareness, inspires action, and paves the way for even greater innovations to transform student nutrition for good.

Mealio is a dynamic web application designed to take the stress out of meal planning and make cooking feel less like a chore. With real-time recipe and meal suggestions, students can instantly generate ideas for what to cook, eliminating the frustration of deciding what to eat. By streamlining this process, Mealio transforms cooking from a tedious task into a quick, effortless, and even enjoyable part of the day. Beyond just meal suggestions, Mealio helps students track their eating habits by logging their meals throughout the week. But what truly sets it apart is its interactive progress tree, a beautifully growing visual that flourishes as students log their meals. This tree serves as a powerful motivation tool, symbolizing both physical and mental growth through consistent, healthy eating. By simply ensuring they eat at least two meals a day, students can see their progress reflected in a rewarding and tangible way. With Mealio, eating well becomes second nature. It’s not just about food it’s about building sustainable habits, improving well-being, and making healthy living easier for every university student.

How we built it

For the front end, we chose React.js, leveraging its ability to build a rich, interactive user interface while taking advantage of our team’s existing experience with the framework. React was the ideal choice for its component-based structure, making development more efficient and allowing us to easily share and modify code within the team. Its SEO-friendly nature also made it a strong contender for future scalability. A key design decision was our color palette a harmonious blend of green and blue. Green symbolizes growth, health, and improvement, reflecting the user’s journey, while blue adds a striking contrast for a visually appealing experience. Instead of a traditional scroll-based website, we implemented React Routers, an industry-standard feature that ensures smooth, efficient navigation. Core features like the sign-up/login system and the dietary preferences setup were built to create a seamless and personalized experience for users. For the back end, we implemented Python Flask, a lightweight yet powerful framework perfect for handling requests efficiently. Flask’s simplicity and flexibility made it an excellent choice, allowing seamless integration with our React front end. Its built-in routing capabilities enabled smooth data handling between users' dietary preferences, meal tracking, and personalized recommendations, ensuring a fast and responsive experience. One of Mealio’s most innovative and visually striking features is the dynamic progress tree, built using JavaScript on the canvas element. Every time a user logs a meal, the tree grows by one segment, symbolizing their physical and mental growth. If a single tree surpasses seven layers, a new tree sprouts, reflecting continuous improvement. The trees are saved in localStorage, allowing users to revisit their progress. With custom branching angles, each tree is unique, creating a deeply personal visual representation of their journey. This combination of thoughtful front-end design, a robust back-end structure, and a gamified, interactive progress system makes Mealio a truly engaging and meaningful application.

In the early stages of planning, we faced a significant challenge choosing the right project. Our team’s ambition and drive for innovation pushed us to explore bold ideas, even considering merging two challenges into one. However, time constraints meant we had to prioritize feasibility over scale. At one point, we explored a project involving bus routes, but without a clear problem to solve or a defined impact, we decided to pivot. To break the deadlock, we took a step back. Each team member brainstormed individually, then we regrouped and pitched our ideas. After a dynamic exchange of concepts, Mealio was born, an idea that resonated with all of us as a solution to a widespread, yet overlooked, student struggle. Bringing Mealio to life wasn’t without challenges. Tree visualization required precise positioning, smooth animations, and optimized performance to handle complex branches while ensuring each tree was unique. Backend development threw us hurdles like connectivity issues and syntax errors, but through tedious debugging and strong teamwork, we tackled them head-on. Despite the obstacles, our passion and collaboration turned Mealio from a mere idea into a functional, engaging, and impactful application one that we hope will change the way students approach healthy eating.

Throughout this project, one of our biggest accomplishments was the way we truly came together as a team. From the very beginning, we engaged with each other, sharing ideas, collaborating closely, and ensuring every team member had a role that played to their strengths. We effectively delegated tasks, balancing front-end, back-end, and design elements, while also pushing ourselves to learn and step outside our comfort zones. Many of us took on leadership roles at different points, ensuring that every challenge we faced was met with a solution-driven mindset. One of our proudest moments came near the very end of the project when we finally got an important snippet of code working the section that handled dietary and allergy requirements. This was a crucial feature, and we had faced multiple hurdles along the way, but through persistence and teamwork, we successfully implemented it. Knowing that this feature enhances the user experience and makes Mealio more inclusive made all the effort worth it. Another standout achievement was the visual progress tree a feature that not only worked technically well but also added a deeply personal touch to the app. Seeing the tree grow as meals were logged made the experience more engaging, and it became the true highlight of the project. This innovation showcased our creativity and problem-solving skills, and we hope to expand on this concept in the future. Overall, we are incredibly proud of how we worked as a team to bring Mealio to life.

Our team brought together a diverse set of skills some specialized in front-end development, others in back-end architecture. This mix of expertise became one of our biggest strengths. We learned from each other every step of the way, whether it was mastering React Routers for seamless navigation or understanding how our front-end seamlessly interacted with the back-end. For those less experienced in back-end development, seeing how data flowed behind the scenes was eye-opening, sparking newfound curiosity and inspiring some of us to dive deeper into backend technologies. One of the most exciting aspects of this project was the tree visualization feature. Watching the tree grow dynamically as users logged their meals was not only a technical achievement but a truly captivating experience. The challenge of ensuring smooth animations, precise positioning, and unique branch formations pushed our creativity to new heights. This innovation excites us for the future we hope to expand on this technology in new and inventive ways, integrating it into even more creative and interactive projects. Mealio wasn’t just about building an app; it was about pushing boundaries, learning from each other, and creating something meaningful that could inspire even greater innovations ahead.

This is a small step toward tackling a large scale issue, but our mission goes beyond just an app, we aim to spark real change in university eating habits. The struggle to maintain a balanced diet is often overlooked and normalized among students, but we refuse to let it stay that way. Our goal is to bring this conversation to the forefront, engaging universities through discussions and partnerships to secure the resources needed for a more expansive, feature-rich platform. Future enhancements could include a personal food journal, allowing users to store pictures and notes of their meals, as well as an AI-powered camera feature that analyses food from images, automatically tracking nutritional information. By addressing these often-dismissed challenges, we can reshape the way students approach nutrition. A healthier student body leads to sharper minds, better focus, and improved well-being. If we can transform individual habits, we can create a ripple effect that changes the entire university experience and beyond.

Built With

• apis
• database
• javascript
• python