A powerful Next.js web application that empowers users to make healthier food choices by analyzing products using the NOVA classification system. It identifies Ultra-Processed Foods (UPF) and suggests healthier alternatives.
- 3000+ UK Products: Comprehensive database sourced from OpenFoodFacts.
- NOVA Classification: Clear visual indicators for all 4 NOVA groups (1: Unprocessed to 4: Ultra-Processed).
- Barcode Search: Instantly find products by scanning or entering their barcode.
- Data Quality Indicators: "Traffic light" style badges (A-D) showing the completeness of product data.
- Basket Analysis: Add items to a virtual basket to see the overall health score and UPF percentage.
- Health Score: Real-time calculation of your basket's nutritional quality.
- Layout Options: Toggle between a standard list view and an immersive full-width layout.
- Better Choices: Automatically suggests healthier alternatives (lower NOVA group, better Nutri-Score) for UPF items.
- Swap Hover: Interactive hover cards showing details of suggested swaps.
- Explainability: Detailed breakdown of why a product is classified as UPF (e.g., "Contains High Fructose Corn Syrup").
- PWA Support: Installable on mobile and desktop with offline capabilities.
- Responsive Design: Optimized for all devices with a dedicated mobile filter drawer.
- Dark Mode: Sleek, eye-friendly dark theme support.
- Performance: Fast page loads using Next.js ISR (Incremental Static Regeneration).
- Framework: Next.js 16 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Icons: Lucide React
- Data: OpenFoodFacts API
- PWA: Next.js PWA + Service Worker
- Node.js 18+
- npm or yarn
# Clone the repository
git clone https://github.com/vibecoder01/upf.git
cd upf
# Install dependencies
npm install
# Run the development server
npm run devOpen http://localhost:3000 to view the app.
# Create optimized production build
npm run build
# Start production server
npm run startTo make the app accessible on mobile devices, you need to deploy it:
Deploy to a hosting platform like Vercel, Netlify, or similar:
# Example: Deploy to Vercel
npm install -g vercel
vercelOnce deployed, you'll get a public URL (e.g., https://your-app.vercel.app) that you can access from any device.
To test on your mobile device while developing locally:
-
Start the development server:
npm run dev
-
Find your computer's local IP address:
- Windows: Run
ipconfigand look for "IPv4 Address" - Mac/Linux: Run
ifconfigorip addr
- Windows: Run
-
On your mobile device (connected to the same WiFi network):
- Open your browser and navigate to
http://YOUR_IP_ADDRESS:3000 - Example:
http://192.168.1.100:3000
- Open your browser and navigate to
Once the app is accessible via a URL (either deployed or local network):
- Open the app URL in Safari
- Tap the Share button (square with arrow pointing up)
- Scroll down and tap "Add to Home Screen"
- Tap "Add" to confirm
- The app icon will appear on your home screen
- Open the app URL in Chrome
- Tap the menu (three dots) in the top-right corner
- Tap "Add to Home screen" or "Install app"
- Tap "Install" to confirm
- The app will be added to your home screen and app drawer
Note: PWA installation requires HTTPS in production. Local development (localhost or local IP) works without HTTPS. For production deployment, platforms like Vercel automatically provide HTTPS.
Once installed, the app provides powerful capabilities:
The app uses a Service Worker to cache resources and enable offline access:
- First Visit: When you first open the app, it downloads and caches essential files (HTML, CSS, JavaScript, icons)
- Subsequent Visits: The app loads instantly from the cache, even without internet
- Smart Caching: Product data you've viewed is cached, so you can browse previously seen products offline
- Network-First Strategy: When online, the app fetches fresh data and updates the cache in the background
- Graceful Fallback: If the network fails, the app serves cached content automatically
The installed PWA behaves like a native mobile app:
- Home Screen Icon: Launches directly from your home screen, just like any other app
- Full-Screen Mode: Runs without browser UI (no address bar or browser controls)
- Standalone Window: Opens in its own window, separate from your browser
- Fast Loading: Instant startup thanks to cached resources
- App Switcher: Appears in your device's app switcher/multitasking view
- Push Notifications (future): Can receive notifications even when the app is closed
Technical Note: The Service Worker (
/public/sw.js) intercepts network requests and implements a network-first caching strategy. This means you always get fresh data when online, but can still access cached data when offline.
The app fetches product data from the OpenFoodFacts API. Each product is analyzed and classified:
- NOVA 1 (Green): Unprocessed or minimally processed foods (e.g., fruits, vegetables, milk).
- NOVA 2 (Yellow): Processed culinary ingredients (e.g., oils, butter, sugar).
- NOVA 3 (Orange): Processed foods (e.g., canned vegetables, fresh bread).
- NOVA 4 (Red): Ultra-processed foods (e.g., soft drinks, packaged snacks).
The application implements robust security practices and error handling:
- Input Validation: Barcode search accepts only numeric input (max 13 digits)
- Data Validation: localStorage data validated before use to prevent corrupted data crashes
- Type Safety: Strict TypeScript types with union types for critical fields
- Image Security: Remote images restricted to trusted OpenFoodFacts domain
- No Dependencies Vulnerabilities: Zero npm security vulnerabilities
- XSS Protection: React auto-escaping prevents cross-site scripting
- API Timeout Protection: 60-second timeout with 3 retry attempts
- Graceful Degradation: App loads even if API fails, showing helpful message
- Smart Retry Logic: Exponential backoff for failed requests (2s, 4s, 6s delays)
- Service Worker Cache Cleanup: Automatic removal of old caches on updates
- Comprehensive Logging: Detailed error messages for debugging
- TypeScript Strict Mode: Full type safety across the codebase
- Error Boundaries: Proper try-catch blocks prevent crashes
- Performance Optimized: Next.js Image component for automatic optimization
- PWA Best Practices: Offline support with smart caching strategy
- Data provided by OpenFoodFacts.
- NOVA classification system developed by researchers at the University of São Paulo.