A landing page and an app to calculate our dietary and environmental impact and to showcase Danone products. Built with Next.js for the Danone Hackathon organized by Nuwe.

Live site

🛠 Tools

I've used the new App router from Next.js 13. Other tools I've used are Sanity as a headless CMS, and Framer Motion and Lenis for animations. The deployment was done with Vercel.

⚡️ Features

• A bespoke design with a unique look and feel, animations, microinteractions and smooth scrolling. Here's the figma file

• A diet calculator which offers insight into your ideal calory intake base on the data provided. It also allows to set your personal calory goals.

• A Product page with sophisticated sorting and filtering.

• A and intuitive search snippet to easily find matching products.

• A system of favourite products which allows to track any desired items.

• A profile dashboard that allows to both update your dietary data and to view and manage product favourites.

• Sanity's headless CMS infrastructure to manage all product information in the simplest and quicket of ways. The studio is deployed hand in hand with the main application, and it is very easy to access.

• Fully deployed to Vercel on the edge.

✅ Code quality

The code has been checked with SonarCloud and it passed all tests:

🗂 Folder layout

This is a regular Next 13 app, so you'll find:

• The app directory, holding all the routes as page.js files. This is folder-based routing, so /upload/page.js can be accessed at https://mainurl.com/upload.
• The components folder, which collects all standalone components, along with the Providers that handle user data.
• The public folder, which contains static assets. . The sanityfolder, holding all Sanity related files. Here all data schemas are created to model the structure of the products.

🏁 Start the app

To start the app and run it on a local development server, you must simply run npm run dev.

To access sanity's studio visit https://danone-hackathon.vercel.app/admin.

If you want to test a production ready build, you'll have to run npm run build and, when that's done, npm run start.

🚀 Roadmap

• Make the app fully responsive

• Improve the Product details page