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
- Gluten: Present in some tea blends with barley, wheat, or malt
- Dairy/Lactose: Milk powder, cream, whey in chai or flavored teas
- Nuts: Almonds, hazelnuts, pistachios in blend ingredients
- Eggs: Rare but possible in some specialty blends
Tasks
Database Schema
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
Frontend - Display
Frontend - Input (Admin/User)
UX Enhancements
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
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
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)
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
Tasks
Database Schema
Allergenmodel or extendTeamodel with allergen fieldsOption A: Boolean flags (simpler for MVP)
Option B: Separate table (more flexible)
Backend
Frontend - Display
Frontend - Input (Admin/User)
UX Enhancements
UI/UX Design
badgewith warning colorsbadge badge-errorbadge badge-warningbadge badge-successExample Display
Acceptance Criteria
Safety & Compliance Notes
Future Enhancements
Technical Notes
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)