DAIET - Fitness & Nutrition Web App

DAIET is a modern React single-page application for fitness and nutrition services, built with Vite. It includes program plans, recipes, BMI calculator, testimonials, and a contact form with a responsive UI and theme toggle (dark/light).

Live Demo

• Vercel: https://daiet-six.vercel.app/

Tech Stack

• React 19
• React Router DOM 7 (BrowserRouter)
• Vite 7
• Tailwind CSS 4
• Framer Motion
• ESLint 9

Features

• Multi-page SPA routing:
  • Home
  • Programs
  • Recipes
  • BMI Calculator
  • Testimonials
  • Contact
• Dark/Light theme toggle with persistence
• Responsive layout for desktop and mobile
• Animated UI interactions (Framer Motion)
• Local optimized image usage from public/images

Project Structure

src/
  components/
  hooks/
  pages/
  App.jsx
  main.jsx
public/
  images/

Getting Started

1) Install dependencies

npm install

2) Run development server

npm run dev

3) Build for production

npm run build

4) Preview production build

npm run preview

Available Scripts

• npm run dev - start local dev server
• npm run build - create production build in dist/
• npm run preview - preview production build locally
• npm run lint - run ESLint
• npm run deploy - deploy dist/ to GitHub Pages (optional)

Vercel Deployment Notes

This project is configured for SPA routing on Vercel:

• vercel.json rewrites all routes to index.html
• vite.config.js uses:
  • base: process.env.VITE_BASE_PATH || '/'
• main.jsx uses:
  • <BrowserRouter basename={import.meta.env.BASE_URL}>

Recommended Vercel settings

• Framework Preset: Vite
• Build Command: npm run build
• Output Directory: dist

For normal Vercel deployment, keep VITE_BASE_PATH unset (defaults to /). Set it only when deploying under a subpath (example: /daiet/).

License

This project is for educational and portfolio use.