Veganify
Veganify is a modern webapp that allows you to easily scan EAN barcodes to check if a product is vegan-friendly. With a database of over 3 million products, you can quickly find out if your favorite foods and products are suitable for a vegan diet.
Install / Use
/learn @frontendnetwork/VeganifyREADME
Veganify
Check if a product is vegan or not with <a href="https://veganify.app"><strong>» Veganify.app</strong></a>
<br/> <a href="https://veganify.app"><img src="https://user-images.githubusercontent.com/4144601/233676587-c0b1f89a-9e1f-49f9-b4b9-fdbf1e592f5f.png" alt="Veganify Hero" align="center"></a> <br><br> <a href="https://www.producthunt.com/products/vegancheck-me?utm_source=badge-featured" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-topic-badge.svg?post_id=396704&theme=neutral&period=weekly&topic_id=43" alt="Veganify - Check if a product if vegan/vegetarian easily and fast | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> <a href="https://www.producthunt.com/products/vegancheck-me?utm_source=badge-featured" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-topic-badge.svg?post_id=396704&theme=neutral&period=weekly&topic_id=204" alt="Veganify- Check if a product if vegan/vegetarian easily and fast | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> </div>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.
<details> <summary>See an example of how it works!</summary> <img src="https://user-images.githubusercontent.com/4144601/198900839-8dc58d58-fdb8-48b6-93e4-a4662ae64954.mov" width="300"> <img src="https://user-images.githubusercontent.com/4144601/198900861-49ef1a5f-0663-4d73-b72d-d147cddaabd3.MP4" width="300"> </details>The Veganify Ingredients API checks the products ingredients against a list of thousands of non-vegan items.
<p align="center"> <a href="https://veganify.app">Open PWA in browser</a> | <a href="https://frontendnet.work/#projects">Product page on FrontEndNetwork</a> | <a href="https://frontendnet.work/veganify-api">Use the API</a> | <a href="https://shareshortcuts.com/shortcuts/2224-vegancheck.html">iOS Shortcut</a> | <a href="https://stats.uptimerobot.com/LY1gRuP5j6">Uptime Status</a> </p>Developer Guide
[!TIP] We're using Conventional Commits for commit messages. Please follow this convention when making changes.
Prerequisites
- Node.js 20 or later
- pnpm (enabled via corepack)
To enable pnpm using corepack:
corepack enable
corepack prepare pnpm@latest --activate
Getting Started
-
Clone the repository:
git clone https://github.com/frontendnetwork/veganify.git cd veganify -
Install dependencies & start dev server:
pnpm install pnpm dev
Project Structure
src/
├── @components/
│ ├── shared/
│ ├── ComponentName/
│ │ ├── hooks/ # Component-specific hooks
│ │ ├── utils/ # Component-specific utilities
│ │ │ ├── util.ts
│ │ │ └── util.test.ts # Utility specify tests
│ │ ├── models/ # Component-specific types/interfaces
│ │ ├── componentPart.tsx # Component files
│ │ └── index.tsx # Component files
├── @models/ # Global type definitions
├── styles/ # CSS styles
├── tests/ # Only test setup files & Playwright tests
└── locales/ # next-intl translation files
Development Commands
# Start development server
pnpm dev
# Run linting
pnpm lint
# Run type checking
pnpm check-types
# Run unit tests
pnpm test
# Run end-to-end tests
pnpm test:e2e
# Build for production
pnpm build
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 hooksutils/for component-specific utilitiesmodels/for component-specific types
- Small, simple components can be single files
Testing
- All utility functions must have 100% test coverage
- Tests are written using Jest for unit testing
- Components currently don't require test coverage
- Playwright is used for end-to-end testing but currently only coversa few basics use cases. More tests are needed.
TypeScript
- TypeScript is mandatory
- The
anytype is not acceptable unless absolutely necessary - Always define proper interfaces and types in the appropriate
modelsfolder - Use type inference when possible
Internationalization
- Use
next-intlfor 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
- Place all styles in the
stylesfolder - Keep styles modular and scoped to components when possible
- Be sure to use SCSS for styling
- Use CSS variables for theming and repeated values
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:
<a href="https://fink.inlang.com/github.com/frontendnetwork/veganify?ref=badge"><img src="https://img.shields.io/badge/Translate_Veganify-on_inlang-ccc?labelColor=fff&logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iMjU2LjAwMDAwMHB0IiBoZWlnaHQ9IjI1Ni4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDI1Ni4wMDAwMDAgMjU2LjAwMDAwMCIKIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPgo8bWV0YWRhdGE+CkNyZWF0ZWQgYnkgcG90cmFjZSAxLjE0LCB3cml0dGVuIGJ5IFBldGVyIFNlbGluZ2VyIDIwMDEtMjAxNwo8L21ldGFkYXRhPgo8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwyNTYuMDAwMDAwKSBzY2FsZSgwLjEwMDAwMCwtMC4xMDAwMDApIgpmaWxsPSIjMDAwMDAwIiBzdHJva2U9Im5vbmUiPgo8cGF0aCBkPSJNOTUgMjU0NiBjLTQxIC0xOCAtODMgLTY5IC05MCAtMTA5IC0zIC0xOCAtNCAtNTUwIC0zIC0xMTg0IDMgLTExNDUKMyAtMTE1MiAyNCAtMTE3OSAxMSAtMTUgMzMgLTM3IDQ4IC00OCAyNyAtMjEgMzEgLTIxIDEyMDYgLTIxIDExNzUgMCAxMTc5IDAKMTIwNiAyMSAxNSAxMSAzNyAzMyA0OCA0OCAyMSAyNyAyMSAzMSAyMSAxMjA2IDAgMTE3NSAwIDExNzkgLTIxIDEyMDYgLTExIDE1Ci0zMyAzNyAtNDggNDggLTI3IDIxIC0zMyAyMSAtMTE5NCAyMyAtOTU1IDIgLTExNzMgMCAtMTE5NyAtMTF6IG01NzAgLTYzMApjODEgLTM0IDk3IC0xMzMgMzEgLTE5MyAtMjkgLTI3IC00NCAtMzMgLTgxIC0zMyAtODMgMCAtMTM1IDQ3IC0xMzUgMTIyIDAgNDAKMjEgNzMgNjQgOTkgMzcgMjMgNzQgMjQgMTIxIDV6IG0xNDM1IC02MzYgbDAgLTU4MCAtMTIwIDAgLTEyMCAwIDAgNTgwIDAgNTgwCjEyMCAwIDEyMCAwIDAgLTU4MHogbS01NjYgMjcwIGM2MyAtMzIgMTA5IC04OSAxMzUgLTE2NyAyMCAtNTggMjEgLTg0IDIxCi0zNzMgbDAgLTMxMCAtMTIwIDAgLTEyMCAwIDAgMjc4IGMwIDI1MiAtMiAyODEgLTIwIDMxOSAtMjQgNTUgLTcwIDgzIC0xMzQKODMgLTY2IDAgLTEyMCAtMzIgLTE0NiAtODUgLTE5IC0zOCAtMjAgLTYyIC0yMCAtMzE4IGwwIC0yNzcgLTEyMCAwIC0xMjAgMCAwCjQzNSAwIDQzNSAxMTUgMCAxMTQgMCAzIC03NyBjMiAtNTggNiAtNzMgMTIgLTU4IDI3IDU4IDc5IDEwMyAxNTEgMTMyIDE3IDcKNjYgMTEgMTE1IDEwIDY4IC0yIDk1IC03IDEzNCAtMjd6IG0tODA0IC00MTUgbDAgLTQzNSAtMTIwIDAgLTEyMCAwIDAgNDM1IDAKNDM1IDEyMCAwIDEyMCAwIDAgLTQzNXoiLz4KPC9nPgo8L3N2Zz4K" alt="Veganify on Inlang" style="border-radius: 5%;"></a>
or if you find something else you could improve, just open a new issue for it!
Support us
<a href="https://github.com/sponsors/philipbrembeck"><img src="https://img.shields.io/badge/Sponsor%20on%20GitHub-white.svg?logo=githubsponsors" alt="Consider Sponsoring"></a> <a href="https://ko-fi.com/vegancheck"><img src="https://img.shields.io/badge/Buy%20us%20a%20coffee-white.svg?logo=kofi" alt="Buy us a coffee"></a> <a href="https://www.paypal.com/donate/?hosted_button_id=J7TEA8GBPN536"><img src="https://shields.io/badge/Donate%20with%20PayPal-blue?style=flat&logo=Paypal" alt="Donate"></a>
