Open PWA in browser | Product page on FrontEndNetwork | Use the API | iOS Shortcut | Uptime Status
- -## Installation -[Click here to see the installation guide!](https://frontendnetwork.github.io/veganify/) +## Developer Guide + +> [!TIP] +> We're using [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) 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: + +```bash +corepack enable +corepack prepare pnpm@latest --activate +``` + +### Getting Started + +1. Clone the repository: + ```bash + git clone https://github.com/frontendnetwork/veganify.git + cd veganify + ``` +2. Install dependencies & start dev server: + + ```bash + 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 + +```bash +# 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 -## Contribute & Support -We're happy you want to help! Please read our [Code of Conduct](https://github.com/frontendnetwork/veganify/blob/main/CODE_OF_CONDUCT.md). +> [!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 +- 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 `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 + +- Place all styles in the `styles` folder +- 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: -Please refer to our issue trackers to see where you could help: - [[Tasks] Code Improvements](https://github.com/frontendnetwork/veganify/issues/52) -- [[Tasks] Localization](https://github.com/frontendnetwork/veganify/issues/59) - Learn how to localize Veganify [here](https://frontendnetwork.github.io/veganify/localization) +- [[Tasks] Localization](https://github.com/frontendnetwork/veganify/issues/59)
- Installing veganify.app on your own server or hosting your own mirror is straight forward.
Here you can find out how it works and what to note.
The easiest way is to deploy the project to Vercel. Please note that Vercel is not GDPR compliant.
-npm install --global yarn)Download the latest release or just use the following command:
-$ git clone https://github.com/JokeNetwork/veganify.app.gitUse the following commands to install all at once:
-$ npm installor:
-$ yarn installIn a local environment you can just run:
-$ npm run startor:
-$ yarn startTo build the service just run:
-$ npm run buildor:
-$ yarn buildYou can then run the code in a normal Node.js production environment (Like with the help of supervisord).
-Please note that the service runs on Port 1030. You can change the port by editing the "start" command in the package.json at "start": "next start -p [Desired port]".
We use the Playwright Framework for our Frontend tests.
- For more information about Playwright, please visit https://playwright.dev.
To run the tests, just start the dev-environment:
-$ npm run devand then
-$ npm run testAll test should pass. Those test only check for the usabilty of the page. If you want to write your own tests, you can find the tests in src/tests/usability.spec.ts.
The API documentation was relocated and can now be found at one of the following locations:
- - -
- | Language | -Language Code | -Translated | -Validated | -
|---|---|---|---|
| English | -en |
- 100% | -✔︎ (Philip) | -
| German | -de |
- 100% | -✔︎ (Philip, Max) | -
| French | -fr |
- 100% | -✔︎ (Léa) | -
| Spanish | -es |
- 100% | -✘ | -
| Polish | -pl |
- 99% | -✔︎ (Lukem) | -
| Czech | -cz |
- 100% | -✔︎ (Michal) | -
- Localizations can be found in src/locales. All language
- files are in a [countrycode].json file. Please check our
- translations if there is already one localization file available in the
- language you are speaking. Otherwise, please create a new json file and
- duplicate the contents of the en.json file and translate
- the strings to your language.
-
- Legal documents and everything that is only available in English and/or German should not be translated. This would require us to get a Laywer everytime we got a new translation. Thank you very much! -
-- If you want to help us make the localization process faster, you can also modify the following files: -
-next.config.js: Add your locale ({yourlocale}) to the configuration:i18n: {
- locales: ['de', 'en', 'fr', 'es', 'pl', 'cz', '{yourlocale}'],
- defaultLocale: 'en',
-},src/pages/more.tsx: Add your locale to the change language page:<Link
- className="nolink"
- href="/more"
- locale="{yourlocale}"
- onClick={() => handleLanguageChange("{yourlocale}")}
->
- <div
- className={router.locale === "{yourlocale}" ? "option active" : "option"}
- >
- <input
- className="form-check-input"
- type="radio"
- name="flexRadioDefault"
- checked={router.locale === "{yourlocale}"}
- />
- <span className="price">{t("translation_string_for_your_locale")}</span>
- </div>
-</Link>locales/[...].json: Add the translation_string_for_your_locale for your locale to the other locales:/* src/locales/en.json */
-
-"More": {
- ...
- "english": "English",
- "german": "German",
- "spanish": "Spanish",
- "french": "French",
- "polish": "Polish",
- "cursed": "Cursed",
- "czech": "Czech",
- "translation_string_for_your_locale": "Your locale in e.g. english"
-},{t("Privacy.germanonly")}
+ +{t("germanonly")}
+ +{t("englishgermanonly")}
+ +{t("palmoil_desc")}
+ + } + /> + + {productState.animaltestfree !== "unknown icon-help" && ( +Algorithmwatch',
+ }),
+ }}
+ />
+
+ }
+ />
+
+ Veganify Grades',
+ }),
+ }}
+ />
+
+
+ Veganify Grades
+
+
+
+ }
+ />
+
+
+ {t("source")}:{" "}
+
+ {sources.api}
+
+ Grades
+
+
+ {t("notindb_add")}{" "} + + {t("add_food")} + {" "} + {t("or")}{" "} + + {t("add_cosmetic")} + + . +
+{t("ingredientcheck_desc")}
+ + + {result.vegan !== null &&{t("palmoil_desc")}
-Algorithmwatch', - }), - }} - /> -
Veganify Grades', - }), - }} - /> - - - Veganify Grades - - -
{t("licenses_desc")}
-
- © OpenFoodFacts Contributors, licensed under{" "}
-
- Open Database License
- {" "}
- and{" "}
-
- Database Contents License
-
- .
- © Open EAN/GTIN Database Contributors, licensed under{" "}
-
- GNU FDL
-
- .
- © Veganify Contributors and Hamed Montazeri, licensed
- under{" "}
-
- MIT License
-
- , sourced from{" "}
-
- VeganPeace
-
- ,{" "}
-
- PETA
- {" "}
- and{" "}
-
- The VEGAN WOLF
-
- .
- © Veganify Contributors, sourced from ©{" "}
-
- PETA (Beauty without Bunnies)
-
- .
-
- {t("notindb_add")}{" "} - - {t("add_food")} - {" "} - {t("or")}{" "} - - {t("add_cosmetic")} - - . -
-