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

"Explorer" is the codename for the next gen frontend for Open Food Facts, built with modern web technologies (SvelteKit, Tailwind CSS, etc). It is currently in early development, and is not yet ready for production use. However, it is already possible to use it for development and testing purposes.

By building a new frontend, we want to be able to iterate faster on the user experience, provide a more modern and responsive design, and make it easier for contributors to contribute to the frontend.

Warning on the usage of AI tools

[!WARNING] While we support the usage of LLM-based tools to enhance productivity, we expect every contributor to review, test and more importantly take full responsibility of any code generated by these tools before opening a Pull Request.

Remember that most people here are volunteers, and the free time they spend on this project is time they could have spent with their family, friends, or on other hobbies. Please respect that by making sure your contributions are of high quality and don't create extra work for the maintainers.

For more information, see the Contribution Guidelines.

Design

New to the project? Check out our UX Contributing Guide for patterns, colors, and best practices.

• 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-js
• Using more openfoodfacts-webcomponents
• Support for Open Prices
• Support for Nutri-Patrol

Get in touch

The Open Food Facts community uses Slack for communication. You can 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

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

Building

To create a production version:

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: