const Projects = ({ github_repos }) => {
return (
{/* MEAL MIND */}
Revolutionize your meal planning and enjoy eating again with MealMind, the open-source app for people with picky eating habits and ADHD.
💼 Project Description
MealMind is a food tracking & meal planning app that helps people with Avoidant/Restrictive Food Intake Disorder (ARFID) and Attention Deficit Hyperactivity Disorder (ADHD) improve their eating habits. As someone who suffers from both ARFID and ADHD, I know first-hand how difficult it is to just eat... especially when certain foods or textures are a struggle to eat... or when I just forget to eat all day for no other reason than "I forgot" (oops). That's why I created MealMind, to make meal planning an enjoyable and stress-free experience.
I wanted to challenge myself and learn a new tech stack that I've never used before, so I chose to build MealMind using Nextjs/Typescript, Material UI (and a tiny bit of Ant Design), and Supabase. I went through superplate's set up of Refine.dev and also set up React Hook Forms and light/dark mode. While I didn't have time to fully utilize the i18n (important for me as a spanish speaker) and kbar interface, I plan to incorporate them more in the future to make MealMind even more user-friendly.
Creating MealMind has been the most important project for me. I wanted to build a tool that not only helps me manage my own eating habits, but also helps others with similar struggles. That's why I'm excited to make this an open-source project (my very first one as well), so that others can benefit from it and contribute to its development. I hope that MealMind can help those with ARFID and ADHD feel more confident in their ability to plan and enjoy their meals, and I'm excited to see how it evolves as a community-driven project :)
🧠 What I learned
- How Refine works and how to use it to quickly build CRUD based apps
- New languages & frameworks: Nextjs and Typescript
- New design systems: Material UI and Ant Design
- New database and auth manager: Supabase
- How to set up the app's infrastructure to work correctly with the frontend
- A lot of database design and mapping out ERDs
- How to map out an MVP and get a clear scope before starting to build
👤 Hackathon & Participant Info
refine Open Source Hackathon:
refine is a React-based framework for the rapid ✨ development of CRUD web applications. It eliminates the repetitive tasks demanded by CRUD operations and provides industry standard solutions for critical parts like authentication, access control, routing, networking, state management, and i18n. refine shines on data-intensive applications like admin panels, dashboards, internal tools and storefronts.
We're proud to have reached thousands of developers who used refine in our first year, and we couldn't have done it without an open source community! To celebrate this achievement with the community, we are excited to announce the launch of the first hackathon event.
This hackathon is an excellent opportunity for developers to showcase their skills and learn refine!
HACKATHON RESULT
ANNOUNCEMENT: https://refine.dev/blog/refine-hackathon-winners/
WON: Most Visually Pleasing
👀 Preview
Sign in or create a new account to start using MealMind:
DARK MODE: Sign in or create a new account to start using MealMind:
See a list of all your foods and quickly see what you've rated them:
DARK MODE: See a list of all your foods and quickly see what you've rated them:
Filter through all your food items with categories:
Create new food items with categories, eating & purchase locations, and notes:
Add new food items directly from the categories menu:
DARK MODE: Add new food items directly from the categories menu:
See all your foods organized into category buckets:
See a list of all your meal plans and date:
DARK MODE: See a list of all your meal plans and dates:
Create a new meal plan for any day:
Click into your meal plan to see more information and plan meals for breakfast, lunch, and dinner:
DARK MODE: Click into your meal plan to see more information and plan meals for breakfast, lunch, and dinner:
)
}
export default Projects;