You can tour this app's repo using CodeSee.
See the Refine Hackathon submission here.
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 :)
This refine project was generated with superplate.
- 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
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!
Katya Sarmiento
GitHub | LinkedIn | Twitter (not active)
ANNOUNCEMENT: https://refine.dev/blog/refine-hackathon-winners/
WON: Most Visually Pleasing
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:
- Search bar (and kbar) to quickly find food items or meal plans
- Spanish translations
- Calendar view of meal plans
- Track if you've eaten your meals or not
- Rate your meal plan each day
- A note section for each meal plan
- Account page to edit your avatar image, name, and login info
- Google sign up and login
- Importing and exporting food items and meal plans
- Set goals on eating more often, more variety, etc
You can check out our up-to-date roadmap here.
Sign up for a Supabase account
Create the following tables, triggers, functions, and RLS policies...
TABLE
- id int8 is identity and primary key
- created_at timestampz default now()
- updated_at timestampz default now()
- email varchar
- full_name varchar
- avatar_url text
FUNCTION
- Name: handle_new_user
- Schema: public
- Code:
begin
insert into public.profiles (user_auth, email, created_at, updated_at)
values (new.id, new.email, new.created_at, new.updated_at);
return new;
end;
TRIGGER
- Name: on_auth_user_created
- Table: auth.users
- Function: handle_new_user
- Events: AFTER INSERT
RLS POLICIES
SELECT - Profiles are viewable by users who created them
BEGIN;
ALTER POLICY "Profiles are viewable by users who created them." ON "public"."profiles" USING ((auth.uid() = user_auth);
COMMIT;
UPDATE - Users can update their own profile
BEGIN;
ALTER POLICY "Users can update own profile." ON "public"."profiles" USING ((auth.uid() = user_auth);
COMMIT;
TABLE
- id int8 is identity and primary key
- created_at timestampz default now()
- updated_at timestampz default now()
- title text default NULL
ROWS
Add the following categories or create your own:
- Bread/Bakery
- Breakfast
- Canned
- Condiment/Spice
- Dairy
- Deli
- Drink
- Ethnic
- Fast Food
- Frozen
- Fruit
- Grain
- Home-Made
- Meat
- Other
- Restaurant
- Sauce/Oil
- Seafood
- Snack
- Sweet
- Vegetable
RLS POLICIES
Disabled
- id int8 is identity and primary key
- created_at timestampz default now()
- updated_at timestampz default now()
- food_name text
- rating int4
- location text default NULL
- purchase_at default NULL
- notes text default NULL
- food_image text default url (pick whatever default image you want)
- added_by int 8 foreign key PROFILE.id
- added_by_auth uuid foreign key PROFILE.auth_id
- category_id int8 foreign key CATEGORIES.id
RLS POLICIES
INSERT - All users can insert foods
BEGIN;
ALTER POLICY "All users can insert foods" ON "public"."foods" WITH CHECK (true);
COMMIT;
SELECT - Users can see foods they've entered
BEGIN;
ALTER POLICY "Users can see foods they've entered" ON "public"."foods" USING ((auth.uid() = added_by_auth);
COMMIT;
UPDATE - Users can update foods they've entered
BEGIN;
ALTER POLICY "Users can update foods they've entered" ON "public"."foods" USING ((auth.uid() = added_by_auth);
COMMIT;
TABLE
- id int8 is identity and primary key
- created_at timestampz default now()
- updated_at timestampz default now()
- date date
- added_by int 8 foreign key PROFILE.id
- added_by_auth uuid foreign key PROFILE.auth_id
- total_foods int8 default 0 (needed for later features)
- total_foods_eaten int8 default 0 (needed for later features)
- day_rating int8
- notes text
RLS POLICIES
ALL - Enable all meal plan actions for user based on id
BEGIN;
ALTER POLICY "Enable all meal plan actions for user based on id." ON "public"."meal_plans" USING ((auth.uid() = added_by_auth);
COMMIT;
TABLE
- id int8 is identity and primary key
- created_at timestampz default now()
- updated_at timestampz default now()
- period int8
- eaten boolean default false (needed for later features)
- added_by int 8 foreign key PROFILE.id
- added_by_auth uuid foreign key PROFILE.auth_id
- meal_plan_id int8 foreign key MEAL_PLANS.id
- food_id int8 foreign key FOODS.id
RLS POLICIES
INSERT - Users can add meals to meal plans
BEGIN;
ALTER POLICY "Users can add meals to meal plans" ON "public"."meal_plan_meals" WITH CHECK (true);
COMMIT;
SELECT - Users can see the meals they've entered
BEGIN;
ALTER POLICY "Users can see the meals they've entered" ON "public"."meal_plan_meals" USING ((auth.uid() = added_by_auth);
COMMIT;
Set up Authentication with Supabase - Click Here for Docs
- Refine
- Supabase
- Node / Yarn
- Javascript / Typescript
- React / Nextjs
- Clone the repository:
git clone https://github.com/Kitkatnik/ks-MealMind.git
- Change directory and install dependencies:
cd directory
npm install
Set up local env variables
Add your Supabase API URL and KEY
yarn dev
yarn build
yarn start
To learn more about refine, please check out the Documentation
- Supabase Data Provider Docs
- Material UI Docs
- Inferencer Docs
- Material UI Light/Dark Mode Docs
- Material UI Custom Theme Docs
- Custom Layout Docs
- KBar Command Palette Docs
MIT