Skip to content

Add allergen information tracking (gluten, dairy, nuts, eggs) #81

@CarlosCanet

Description

@CarlosCanet

Description

Implement allergen tracking and display system to help users identify teas that may contain or be contaminated with common allergens (gluten, dairy products, nuts, eggs).

Context

Many tea blends include ingredients that can trigger allergic reactions. Users with food allergies need clear allergen information before consuming any tea. This feature adds safety and transparency to the tea catalog.

Allergen Categories to Track

  1. Gluten: Present in some tea blends with barley, wheat, or malt
  2. Dairy/Lactose: Milk powder, cream, whey in chai or flavored teas
  3. Nuts: Almonds, hazelnuts, pistachios in blend ingredients
  4. Eggs: Rare but possible in some specialty blends

Tasks

Database Schema

  • Add Allergen model or extend Tea model with allergen fields
  • Decide: separate Allergen table (many-to-many) vs boolean flags on Tea
  • Run Prisma migration
  • Update seed data with allergen information

Option A: Boolean flags (simpler for MVP)

model Tea {
  // ... existing fields
  containsGluten    Boolean @default(false)
  containsDairy     Boolean @default(false)
  containsNuts      Boolean @default(false)
  containsEggs      Boolean @default(false)
  allergenNotes     String? // Free text for cross-contamination warnings
}

Option B: Separate table (more flexible)

model Allergen {
  id    String @id @default(cuid())
  name  String @unique // "Gluten", "Dairy", "Nuts", "Eggs"
  icon  String? // Icon or emoji
  teas  Tea[]  @relation("TeaAllergens")
}

model Tea {
  // ... existing fields
  allergens      Allergen[] @relation("TeaAllergens")
  allergenNotes  String? // Cross-contamination warnings
}

Backend

  • Add allergen fields to Tea creation/edit forms
  • Update DAL functions (createTea, updateTea) to handle allergens
  • Add validation (Server Actions or API routes)
  • Update tests to cover allergen scenarios

Frontend - Display

  • Show allergen badges on tea day pages
  • Add allergen icons/symbols (⚠️ for warnings)
  • Display allergen notes/warnings prominently
  • Use accessible color coding (not just color, also icons/text)

Frontend - Input (Admin/User)

  • Add allergen checkboxes to AddTeaInfoForm
  • Add allergen checkboxes to EditTeaInfoForm
  • Add optional textarea for allergen notes
  • Add helpful tooltips/examples

UX Enhancements

  • Add allergen filter to tea filtering system (Add tea filtering system (by theine, milk, infusion time, type) #80)
  • Show "Allergen-free" badge for teas with no allergens
  • Add user profile allergen preferences (save user allergies)
  • Warning modal before viewing tea day if user has matching allergy
  • Color-coded severity (contains vs "may contain traces")

UI/UX Design

  • Badge Style: Use daisyUI badge with warning colors
    • Contains allergen: badge badge-error
    • May contain traces: badge badge-warning
    • Allergen-free: badge badge-success
  • Icons: Use react-icons or emojis (🌾 gluten, 🥛 dairy, 🥜 nuts, 🥚 eggs)
  • Position: Below tea name, above ingredients list
  • Mobile: Stack badges vertically if needed

Example Display

Té Pakistaní
🥛 Contains Dairy | 🥜 May contain traces of nuts
⚠️ Allergen note: Produced in facility that handles gluten

Acceptance Criteria

  • All 4 allergen types tracked in database
  • Allergens displayed on tea day pages with clear icons/badges
  • Admin/users can add allergen info when creating/editing tea
  • Allergen notes field available for additional warnings
  • Accessible design (screen reader compatible, not color-only)
  • Tests cover allergen CRUD operations
  • No breaking changes to existing Tea data

Safety & Compliance Notes

  • Add disclaimer: "Allergen information is user-contributed and may not be 100% accurate. Always check tea packaging."
  • Consider legal review for allergen disclaimers (depending on jurisdiction)
  • Allow users to report incorrect allergen information

Future Enhancements

  • User allergen profile (save "I'm allergic to nuts")
  • Email/notification warnings if assigned tea contains user's allergen
  • Allergen severity levels (contains, traces, facility)
  • Support for additional allergens (soy, sesame, sulfites, etc.)
  • Allergen reporting/verification system (community moderation)

Technical Notes

  • Use TypeScript enums for allergen types if using separate table
  • Add proper indexes for allergen queries
  • Consider i18n for allergen names (multilingual support)
  • Ensure form validation prevents empty submissions

Priority: High (safety/accessibility concern)
Phase: Post-MVP / Priority Enhancement
Estimated Effort: 1-2 days (schema + forms + display + tests)
Related: #80 (filtering system can include allergen filters)

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions