Release

.eslintrc.json

@@ -1,14 +1,45 @@
 {
-  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "plugin:import/errors", "plugin:import/warnings", "plugin:import/typescript"],
+  "root": true,
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/strict",
+    "plugin:@typescript-eslint/stylistic",
+    "plugin:import/recommended",
+    "plugin:import/typescript"
+  ],
   "plugins": ["@typescript-eslint", "import"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "ecmaVersion": 2022,
+    "sourceType": "module"
+  },
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "project": "./tsconfig.json"
+      },
+      "node": true
+    }
+  },
   "rules": {
-    "import/order": ["error", {
-      "groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
-      "newlines-between": "always",
-      "alphabetize": {
-        "order": "asc",
-        "caseInsensitive": true
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index"
+        ],
+        "newlines-between": "always",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
       }
-    }]
+    ]
   }
 }

.github/workflows/build.yml

@@ -143,3 +143,35 @@ jobs:
       - name: Restart Kubernetes Pod
         run: |
           kubectl rollout restart deployment/veganify -n veganify-staging
+
+  e2e-tests:
+    needs: deploy-staging
+    if: github.ref == 'refs/heads/staging'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 9.12.1
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Wait for deployment to be ready
+        run: |
+          # Wait for 30 seconds to allow deployment to stabilize
+          sleep 30
+
+      - name: Run Playwright tests
+        run: npx playwright test

.github/workflows/pr.yml

@@ -1,36 +1,38 @@
 name: Build and Lint PRs
-
 on: [pull_request]
-
 jobs:
   regular_build:
     runs-on: ubuntu-latest
-
     steps:
       - uses: actions/checkout@v4
-
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.1
       - uses: actions/setup-node@v4
         with:
-          node-version: '18.x'
-          cache: 'npm'
-
-      - run: npm ci
-      - run: npm run build
-      - run: npm run lint
-
+          node-version: "20.x"
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
+      - run: pnpm install
+      - run: pnpm run lint
+      - run: pnpm run type-check
+      - run: pnpm run test
+      - run: pnpm run build
   legacy_peer_deps_build:
     runs-on: ubuntu-latest
     needs: regular_build
     if: ${{ always() && needs.regular_build.result == 'failure' }}
-
     steps:
       - uses: actions/checkout@v4
-
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.1
       - uses: actions/setup-node@v4
         with:
-          node-version: '18.x'
-          cache: 'npm'
-
-      - run: npm ci --legacy-peer-deps
-      - run: npm run build
-      - run: npm run lint
+          node-version: "20.x"
+          cache: "pnpm"
+      - run: pnpm install --no-strict-peer-dependencies
+      - run: pnpm run lint
+      - run: pnpm run type-check
+      - run: pnpm run test
+      - run: pnpm run build

.gitignore

@@ -37,3 +37,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+test-results/.last-run.json

.vscode/extensions.json

@@ -1,5 +1,7 @@
 {
   "recommendations": [
-    "inlang.vs-code-extension"
+    "inlang.vs-code-extension",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
   ]
-}
+}

.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "always"
+  },
+  "editor.formatOnSave": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "eslint.workingDirectories": [
+    {
+      "mode": "location"
+    }
+  ],
+  "eslint.options": {
+    "overrideConfigFile": ".eslintrc.json"
+  },
+  "typescript.tsdk": "node_modules/typescript",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-alpine AS base
+FROM node:20-alpine AS base
 
 # Install dependencies only when needed
 FROM base AS deps

README.md

@@ -13,44 +13,170 @@ Check if a product is vegan or not with <a href="https://veganify.app"><strong>
 </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. 
+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>	
+</details>
 
-
 The [Veganify Ingredients API](https://github.com/frontendnetwork/Veganify-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>
 
-
-## 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)
 
 <a href="https://fink.inlang.com/github.com/frontendnetwork/veganify?ref=badge"><img src="https://badge.inlang.com/?url=github.com/frontendnetwork/veganify" 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>
 
-
 ### Premium Supporters
+
 <a href="https://veganism.social/@mvtracing">
 	<picture>
 	  <source srcset="https://user-images.githubusercontent.com/4144601/218593453-28333f8a-3e24-46d2-8bc9-856eb2e4a390.png" media="(prefers-color-scheme: dark)" width="120">
@@ -65,13 +191,14 @@ or if you find something else you could improve, just open a new issue for it!
 	</picture>
 </a>
 
-## Dependencies & Credits 
+## Dependencies & Credits
 
 This repo uses:
-* [Quagga.js](https://serratus.github.io/quaggaJS/)
-* [OpenFoodFacts API](https://openfoodfacts.org/) & [OpenBeautyFacts API](https://openbeautyfacts.org/) [@openfoodfacts](https://github.com/openfoodfacts)
-* [Open EAN Database](https://opengtindb.org)
+
+- [Quagga.js](https://serratus.github.io/quaggaJS/)
+- [OpenFoodFacts API](https://openfoodfacts.org/) & [OpenBeautyFacts API](https://openbeautyfacts.org/) [@openfoodfacts](https://github.com/openfoodfacts)
+- [Open EAN Database](https://opengtindb.org)
 
 ## License
 
-All text and code in this repository is licensed under [MIT](https://github.com/frontendnetwork/veganify/blob/main/LICENSE), © 2023 Philip Brembeck, © 2023 FrontEndNetwork.
+All text and code in this repository is licensed under [MIT](https://github.com/frontendnetwork/veganify/blob/main/LICENSE), © 2024 Philip Brembeck, © 2024 FrontEndNetwork.