LIVE PREVIEWBUY FOR $23

NutriLoop — AI-Powered Vitamin and Health Dashboard

NutriLoop is a production-ready, front-end React template for constructing clever diet and health functions. It ships with a whole characteristic set protecting meal planning, macro monitoring, recipe era, grocery administration, exercise logging, weight monitoring, and a vibrant group feed — all wired to a unified AI engine that connects to 10 main AI suppliers, together with a totally offline, in-browser native AI possibility that requires zero API key.

This can be a front-end template. All knowledge is saved in browser localStorage by default, which implies patrons can consider and deploy it instantly with none backend. Builders can join it to any REST API or database by changing the state hooks in App.tsx with their very own data-fetching logic. The TypeScript interfaces in sorts.ts are already outlined and able to wire up.

AI and Workflow Highlights

  • 10 AI supplier integrations in a single unified API layer — swap suppliers with out altering any characteristic code.
  • Helps OpenAI (GPT-4o), Anthropic Claude, Google Gemini, Groq, Mistral AI, Collectively AI, DeepSeek, Cohere, OpenRouter (200+ fashions), and Native WebLLM (totally offline, WebGPU-powered).
  • AI-generated weekly meal plans — 7-day plan with breakfast, lunch, dinner, and snack for every day, structured as JSON and rendered straight into the UI.
  • AI recipe chef — generates customized recipes from user-specified substances, dietary restrictions, and prep time constraints.
  • AI exercise options — personalised exercise suggestions primarily based on person profile and health objectives.
  • AI wellness tip generator on the Dashboard, refreshed on demand.
  • AI grocery categorization — robotically types newly added grocery objects into the proper class utilizing a hybrid heuristic and AI fallback.
  • Native AI (WebLLM) — runs massive language fashions straight within the browser through WebGPU. Helps Phi-3.5 Mini, Llama 3.2, Gemma 2, and SmolLM2. No API key, no cloud, fully personal. Mannequin is cached after first obtain.
  • All API keys are saved in browser localStorage solely and are despatched solely to the chosen supplier’s official API endpoint. No secret’s ever despatched to any third-party server.

Core Function Modules

  • Authentication — Login, 3-step registration wizard, forgot password stream. Function-based UI with separate Admin and Person views. Session endured throughout browser restarts.
  • Dashboard — Calorie ring, macro progress bars, water consumption tracker, temper selector, fast meal log, weight entry, AI wellness tip, and an at-a-glance abstract of the day.
  • Meal Planner — Full 7-day weekly view. AI auto-generates a whole plan or the person manually provides, edits, and removes particular person meals per day per meal sort.
  • Recipe Hub — 15 built-in recipes with full macro breakdowns, ingredient lists, and step-by-step cooking directions. Filter by tag, type by prep time or energy, paginate. AI Chef generates new recipes from person enter.
  • Vitamin Tracker — Every day macro breakdown with a Recharts pie chart. Weekly calorie development bar chart. Day-by-day log historical past.
  • Grocery Record — Add objects manually or import from the lively meal plan. Class grouping (Produce, Protein, Dairy, Pantry, and many others.). Search, filter, and a devoted Buying Mode for in-store use.
  • Exercise Tracker — 2-step exercise logging modal. Filter by depth. Type by date or energy burned. 7-day exercise bar chart.
  • Weight Tracker — Every day weight log with an space chart historical past. BMI auto-calculated from peak and weight. Purpose weight reference line displayed on the chart.
  • Neighborhood — Public posts with likes, feedback, and tag filtering. Type by newest or most preferred. Share button with clipboard copy.
  • Profile Settings — Title, avatar add (saved as base64), peak, present weight, aim weight, calorie goal, dietary preferences, and allergy tags.
  • AI Settings — Full supplier administration web page. Choose supplier, select mannequin, enter and check API key, view mannequin benchmarks (pace, context window), and swap between suppliers with one click on.
  • Onboarding — 4-step guided onboarding wizard for brand new customers to arrange their profile earlier than coming into the principle app.

UI and Design

  • Constructed with TailwindCSS 3 utilizing a CSS variable token system — model colours, darkish mode palette, and spacing can all be modified from a single block in index.css.
  • Full darkish mode with system desire detection and localStorage persistence. Zero flash-of-unstyled-content on load.
  • Absolutely responsive throughout desktop, pill, and cell. Collapsible sidebar on desktop, swipe-friendly drawer on pill, and a hard and fast backside tab bar on cell.
  • Clean transitions and micro-animations all through. Loading skeletons, empty states, and toast notifications included.
  • Error Boundary part with a restoration UI prevents your complete app from crashing on sudden errors.
  • Constant icon system utilizing Lucide React (600+ SVG icons, tree-shaken at construct time).
  • Charts powered by Recharts 3 — Pie, Bar, Line, and Space chart sorts.

Developer Expertise

  • Written solely in TypeScript 5.8 with strict mode — no implicit any sorts anyplace within the codebase.
  • Organized part construction: elements/ui/, elements/pages/, elements/format/, elements/suppliers/, elements/shared/.
  • Path alias @/ configured in each Vite and TypeScript for clear imports.
  • ESLint configured with typescript-eslint, eslint-plugin-react-hooks, and eslint-plugin-react-refresh.
  • HashRouter used for max compatibility with static internet hosting (Netlify, Vercel, GitHub Pages, AWS S3) with none server-side redirect configuration.
  • Manufacturing construct output is a single static bundle in dist/ — deployable anyplace.
  • Detailed README.md, documentation.html, and set up.html included within the bundle.

Connecting a Actual Backend

NutriLoop is a front-end template. It ships with mock knowledge and localStorage state so patrons can run and discover it immediately. To attach an actual database and backend:

  1. All knowledge state lives in App.tsx utilizing usePersistedState hooks — substitute these together with your API calls (fetch, Axios, React Question, and many others.).
  2. All TypeScript interfaces are already outlined in sorts.ts — your API responses simply have to match these shapes.
  3. Authentication in AuthProvider.tsx makes use of localStorage — swap the mock login logic with an actual JWT or OAuth stream.
  4. AI API keys could be pre-configured server-side by enhancing DEFAULT_SETTINGS in aiProviderConfig.ts.

Any developer comfy with React can join this template to a Node.js, Laravel, Django, Firebase, Supabase, or every other backend in just a few hours.

Demo Credentials


Source

Hostinger
Namecheap Best Deals