"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
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.
- 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
- Are you a designer ? Join the design team
- Using more openfoodfacts-js
- Using more openfoodfacts-webcomponents
- Support for Open Prices
- Support for Nutri-Patrol
The Open Food Facts community uses Slack for communication. You can join the #off-explorer channel on the Open Food Facts Slack.
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 installBefore running the project, set up the environment variables:
cp .env.example .envEdit the .env file as needed to configure your development environment.
Then start the development server:
pnpm run devTo create a production version:
pnpm run buildYou can preview the production build with pnpm run preview.
The app was initially created by @VaiTon. Since then, many people have contributed to it:
