MealMind

About

💼 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 :)

🖥 Tech Stack

This refine project was generated with superplate.

🧠 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!

PARTICIPANT

Katya Sarmiento

GitHub | LinkedIn | Twitter (not active)

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:

Roadmap

• 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.

Set up Project

Database Set up

Sign up for a Supabase account

Create the following tables, triggers, functions, and RLS policies...

PROFILES

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;

CATEGORIES

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

FOODS

• 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;

MEAL PLANS

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;

MEAL PLAN MEALS

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;

Authentication

Set up Authentication with Supabase - Click Here for Docs

Prerequisites

• Refine
• Supabase
• Node / Yarn
• Javascript / Typescript
• React / Nextjs

Install Project

• 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

Environments

Running the development server.

    yarn dev

Building for production.

    yarn build

Running the production server.

    yarn start

Learn More

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

License

MIT