What I Built

Kitchen Allergy Planner is a dark, futuristic food-tech web app that helps people plan meals around their food allergies.

I built it for a close friend who has to avoid certain foods because of allergies. Every week they repeat the same routine: reading ingredient lists, double-checking recipes, and worrying that one planned meal might hide an ingredient they must avoid. Most recipe sites and meal planners treat allergies as an afterthought, so I wanted a planner that starts with the allergy profile instead.

What it does:

Allergy profile: pick from 16 allergens across 6 categories (Dairy, Eggs, Nuts, Gluten, Seafood, Other).

Recipe discovery: search by name, ingredient or cuisine, filter (Safe, Contains Allergens, Vegetarian, High Protein, Quick Meals) and sort.

"Why?" explanations: an unsafe recipe doesn't just say "unsafe". It shows exactly which ingredients matched your profile, for example "Contains 2 ingredients from your allergy profile: cream (Milk), parmesan cheese (Cheese)."

Weekly meal planner: 7 days x 4 meals, with a live Weekly Safety Check showing how many meals are compatible and which ones need attention.

Ingredient Safety Scanner: type milk, rice, tomato, peanuts and see which ingredients match your profile.

Saved recipes, toast notifications, and a responsive layout with a sidebar on desktop and bottom navigation on mobile.

Local-first: everything is saved in the browser with localStorage, so there is no account and no data leaves the device.

The app avoids medical claims and shows this disclaimer: "Always verify ingredient labels and cross-contamination information. This application is for meal organization and educational purposes only and does not replace professional medical advice."

Code

raushanichaudhary77-create / kitchen_allergy_planner

🥗 A modern allergy-aware meal planning web app to manage allergies, discover compatible recipes, plan weekly meals, and generate smart shopping lists — built with a futuristic Food-Tech UI

🥗 Kitchen Allergy Planner

A dark, futuristic food-tech web app that helps you plan meals around your food allergies Built with plain HTML, CSS and JavaScript (Tailwind via CDN). No backend, no build step.

Always verify ingredient labels and cross-contamination information. This application is for meal organization and educational purposes only and does not replace professional medical advice.

Features

Allergy profile with 16 allergens in 6 categories
Recipe search, filters (Safe, Vegetarian, High Protein, Quick Meals) and sorting
"Why?" panel that shows exactly which ingredients match your allergies
Weekly meal planner (7 days x 4 meals) with a Weekly Safety Check
Ingredient Safety Scanner
Saved recipes, toast notifications, responsive layout
Everything saved in your browser with localStorage

Project structure

kitchen-allergy-planner/
├── index.html   # page layout
├── style.css    # custom styles (glass, glow, animations)
├── script.js    # data, state, views and events
└── README.md

How to run

Download or clone this…

View on GitHub

Project structure:

kitchen_allergy_planner/
├── index.html   # page layout
├── style.css    # glass, glow and animation styles
├── script.js    # data, state, views and events
└── README.md

How I Built It

The app is plain HTML, CSS and JavaScript with Tailwind CSS (via CDN). There is no backend and no build step, so a beginner can open index.html and start contributing right away.

Data: allergens and recipes live in two simple arrays in script.js. Each allergen has a list of keywords (for example, Wheat matches pasta, bread, flour, tortilla).

Matching: each recipe ingredient is compared against the keywords of every allergen the user selected. The matches power the "Why?" panel, the planner warnings and the dashboard stats.

State: one small state object (allergies, favorites, meal plan) is saved to localStorage, and the UI re-renders from it.

Real stats: dashboard numbers such as Safe Recipes and Meals Planned are computed from the current state, not hard-coded.

About AI: the allergen matching is simple keyword logic that runs in the browser. The app uses no AI model at runtime. I used an AI assistant (Claude, which is not open-weight) to help generate the first version of the code, and I then set up the project and repository myself.

Because matching is keyword-based, it can miss unusual ingredient names. That is why the app always tells users to verify labels.

Why Does Open Innovation Matter?

Food allergies are personal, and the data about them is sensitive. Building this as an open-source, local-first project means:

Privacy by default: the allergy profile never leaves the user's browser. There is no API, no account and no tracking.

Anyone can improve it: a recipe, an allergen keyword or a translation is a one-line change in a plain file. People in different countries can add the foods and ingredient names that matter in their own kitchens.

Transparent logic: anyone can read exactly how a recipe is flagged, instead of trusting a black box with something that affects their health.

Free to fork: a friend, a family or a community can adapt it to their own needs without asking anyone's permission.

DEV Community

kitchen-allergy-planner