Open Food Facts Explorer: the modern JS frontend to Open Food Facts

openfoodfacts-explorer is our experimental, next gen frontend. The idea is to reach feature parity on the essential stuff with the main frontend to eventually replace it, with a much better responsive UI (80%+ of our traffic is mobile web).

Warning on the usage of AI tools

We support the usage of AI tools to enhance productivity, but we expect you to review and test any code generated by these tools before opening a Pull Request. For more information, see the Contributing Guidelines.

Features

• Uses the official Open Food Facts NodeJS SDK
• Basic editing
• Product page display, including Knowledge Panels support
• Search
• Login support (simple login, NOT SECURE)
• Folksonomy Engine Support

Design

• We currently don’t have any real visual mockup of it, nor “artistic direction” so for the time being, we're copying key features from the current frontend, improving them whenever we can.
• Mockups on the current website
• Trying to create a digital twin of openfoodfacts-explorer
• Are you a designer ? Join the design team

Roadmap

• Using more openfoodfacts-nodejs
• Using more openfoodfacts-webcomponents
• Image editing and image upload
• Product Addition
• Support for Open Prices
• Support for Search-A-Licious (including facets)
• Support for Nutri-Patrol
• Support for static content (eg /discover, /contribute…)

Get in touch

• We e-meet Wednesdays · 11:00 – 11:25am - Time zone: Europe/Paris

  • 
  • Join by phone: https://tel.meet/uep-fhvf-gto?pin=8160344286211
  • Add the Event to your Calendar by adding the Open Food Facts community calendar to your calendar
  • Weekly Agenda: please add the Agenda items as early as you can. Make sure to check the Agenda items in advance of the meeting, so that we have the most informed discussions possible, leading to argumented decisions.
  • The meeting will handle Agenda items first, and if time permits, collaborative bug triage.
  • We strive to timebox the core of the meeting (decision making) to 30 minutes, with an optional free discussion/live debugging afterwards.
  • We take comprehensive notes in the Weekly Agenda of agenda item discussions and of decisions taken.

• You can also join the #off-explorer channel on the Open Food Facts Slack.

Developing

This project uses pnpm. If you have corepack enabled, you should be able to directly use pnpm commands. Otherwise, you can install pnpm with npm install -g pnpm.

First, install dependencies:

pnpm install

Environment Variables Setup

Before running the project, set up the environment variables:

cp .env.example .env

Edit the .env file as needed to configure your development environment.

Then start the development server:

pnpm run dev

# or start the server and open the app in a new browser tab
pnpm run dev -- --open

Building

To create a production version of your app:

pnpm run build

You can preview the production build with pnpm run preview.

Contributors

The app was initially created by @VaiTon. Since then, many people have contributed to it: