Veganify

Check if a product is vegan or not with » Veganify.app

Overview

Veganify checks the barcode (EAN or UPC) of a food- or non-food-product and tells you if it is vegan or not. It is an useful tool for vegans and vegetarians - Developed with usability and simplicity in mind, so without distracting irrelevant facts or advertising. Veganify combines the Databases of OpenFoodFacts, OpenBeautyFacts and Open EAN Database, as well as our very own ingredient checker in one tool.

See an example of how it works!

The Veganify Ingredients API checks the products ingredients against a list of thousands of non-vegan items.

Open PWA in browser | Product page on FrontEndNetwork | Use the API | iOS Shortcut | Uptime Status

Developer Guide

Tip

We're using Conventional Commits for commit messages. Please follow this convention when making changes.

Prerequisites

• Bun 1.4 or later (package manager, test runner and runtime)

Getting Started

1. Clone the repository:

   git clone https://github.com/frontendnetwork/veganify.git
   cd veganify

2. Install dependencies & start dev server:

   bun install
   bun run dev

Project Structure

src/
├── app/[locale]/     # App Router pages (i18n-routed)
├── app/globals.css   # Tailwind v4 theme tokens (light / dark / OLED)
├── components/       # React components
│   ├── ui/           # Design system primitives (button, dialog, switch…)
│   ├── shared/       # Shared components across app
│   └── ComponentName/  # Feature components
│       ├── hooks/    # Component-specific hooks
│       ├── utils/    # Component-specific utilities (+ tests)
│       ├── models/   # Component-specific types/interfaces
│       └── index.tsx # Main component file
├── lib/              # Shared libs (contexts, springs, utilities)
├── models/           # Global type definitions
├── i18n/             # next-intl routing configuration
├── locales/          # Translation files
└── tests/            # Test setup & Playwright E2E tests

Development Commands

# Start development server (Turbopack)
bun run dev

# Lint + type-check + unit tests in parallel
bun run check

# Run linting (Biome)
bun run lint

# Run type checking
bun run type-check

# Run unit tests
bun run test

# Run end-to-end tests
bun run test:e2e

# Build for production
bun run build

# Start production server (port 1030)
bun run start

# Start staging server (port 1031)
bun run stage

Development Guidelines

Note

We're aware not everything in this repo follows those standards. This is because of how the project was started and evolved. We're working on improving this.

Component Structure

• Break down components into smaller, reusable pieces
• Each significant component should have its own directory with the following structure:
  • hooks/ for component-specific hooks
  • utils/ for component-specific utilities
  • models/ for component-specific types
• Small, simple components can be single files

Testing

• All utility functions must have 100% test coverage
• Unit tests are written using the Bun test runner
• Components currently don't require test coverage
• Playwright is used for end-to-end testing but currently only covers a few basic use cases. More tests are needed.

TypeScript

• TypeScript is mandatory
• The any type is not acceptable unless absolutely necessary
• Always define proper interfaces and types in the appropriate models folder
• Use type inference when possible

Internationalization

• Use next-intl for translations
• Add new translations to all language files in /locales
• Follow the existing translation key structure

Code Style

• Follow Node.js, React, and Next.js best practices
• Use the App Router pattern for routing
• Keep components pure and functional when possible
• Use hooks for state management and side effects
• Follow the DRY (Don't Repeat Yourself) principle
• Use meaningful variable and function names
• Write comments for complex logic
• Keep functions small and focused

Styling

• Use Tailwind CSS v4 utilities exclusively; no SCSS, no component-level CSS files
• Theme via the semantic oklch tokens in src/app/globals.css (light / dark / OLED)
• Shared patterns and design-system primitives live in src/components/ui/

When making a contribution, please follow these guidelines to ensure consistency and maintainability.

Remember that every contribution, no matter how small, is valuable to the project. Thank you for helping make Veganify better!

Support

Please refer to our issue trackers to see where you could help:

• [Tasks] Code Improvements
• [Tasks] Localization

or if you find something else you could improve, just open a new issue for it!

Support us

Premium Supporters

Dependencies & Credits

This repo uses:

• Quagga.js
• OpenFoodFacts API & OpenBeautyFacts API @openfoodfacts
• Open EAN Database

License

All text and code in this repository is licensed under MIT, © 2024 Philip Brembeck, © 2024 FrontEndNetwork.