fix:compile errors

package.json

@@ -13,7 +13,6 @@
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.3",
-    "@tailwindcss/vite": "^4.1.11",
     "appwrite": "^18.1.1",
     "dotenv": "^17.2.3",
     "lucide-react": "^0.544.0",

src/components/Navbar.jsx

@@ -2,23 +2,15 @@
 import { useState } from "react";
 import { NavLink, useLocation } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
+import { useTheme } from '../contexts/ThemeContext';
 
 const Navbar = () => {
   const { user, logout, loading } = useAuth();
+  const { theme, toggleTheme } = useTheme();
   const [menuOpen, setMenuOpen] = useState(false);
   const location = useLocation();
   const isHomePage = location.pathname === "/";
 
-
-import { NavLink, useLocation } from 'react-router-dom'
-import { useAuth } from '../contexts/AuthContext'
-import { useTheme } from '../contexts/ThemeContext'
-const Navbar = () => {
-  const { user, logout, loading } = useAuth();
-  const { theme, toggleTheme } = useTheme();
-  const location = useLocation();
-  const isHomePage = location.pathname === '/';
-
   const handleLogout = async () => {
     try {
       await logout();
@@ -46,12 +38,6 @@ const Navbar = () => {
       ? "text-gray-700 hover:bg-green-100 hover:text-green-700"
       : "text-white hover:bg-green-700";
 
-  if (loading) {
-    return (
-      <nav className={navClasses}>
-        <div className="flex items-center justify-between">
-          <h1 className="text-base sm:text-lg lg:text-xl font-semibold">DineFit</h1>
-
   if (loading) {
     return (
       <nav className={`sticky top-0 z-50 px-4 sm:px-6 py-3 sm:py-4 shadow-md transition-all duration-300 bg-background text-foreground border-b`}>
@@ -120,71 +106,13 @@ const Navbar = () => {
                   isHomePage
                     ? "text-gray-700 hover:bg-red-100 hover:text-red-700"
                     : "text-white hover:bg-green-700"
-
-  return (
-    <nav className={`sticky top-0 z-50 px-4 sm:px-6 py-3 sm:py-4 shadow-md transition-all duration-300 bg-background text-foreground border-b`}>
-      <div className="flex items-center justify-between">
-        <div className="flex items-center">
-          <img src="/dine-fit-logo.svg" alt="DineFit" className="h-12 w-100 sm:h-16 sm:w-100" />
-          {/* <span className="ml-2 text-base sm:text-lg lg:text-xl font-semibold">DineFit</span> */}
-        </div>
-        <div className="flex items-center space-x-2 sm:space-x-4">
-          <button
-            onClick={toggleTheme}
-            aria-label="Toggle theme"
-            title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
-            className={`p-2 rounded transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 ${
-              theme === 'dark'
-                ? 'bg-[hsl(var(--border))] text-[hsl(var(--card-foreground))] hover:bg-[hsl(var(--border))/0.9]'
-                : 'bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))] hover:bg-[hsl(var(--card))/0.95]'
-            }`}
-          >
-            {theme === 'dark' ? '🌙' : '☀️'}
-          </button>
-          {user ? (
-            <>
-              <span className={`text-sm sm:text-base px-2 sm:px-3 py-1 rounded-full transition-colors duration-200 ${
-                isHomePage
-                  ? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] shadow-sm'
-                  : 'bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))] border border-[hsl(var(--border))]'
-              }`}>
-                Welcome, {user.name || user.email}
-              </span>
-              <NavLink 
-                to="/dashboard" 
-                className={({isActive}) => `text-sm sm:text-base px-2 sm:px-3 py-1 rounded transition-colors duration-200 ${
-                    isActive 
-                    ? (isHomePage ? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]' : 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]')
-                    : (isHomePage ? 'text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--card))] hover:text-[hsl(var(--primary))]' : 'text-[hsl(var(--card-foreground))] hover:bg-[hsl(var(--primary))]')
-                }`}
-              >
-                Dashboard
-              </NavLink>
-              <NavLink 
-                to="/meal-planner" 
-                className={({isActive}) => `text-sm sm:text-base px-2 sm:px-3 py-1 rounded transition-colors duration-200 ${
-                  isActive 
-          ? (isHomePage ? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]' : 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]')
-          : (isHomePage ? 'text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--card))] hover:text-[hsl(var(--primary))]' : 'text-[hsl(var(--card-foreground))] hover:bg-[hsl(var(--primary))] hover:text-[hsl(var(--primary-foreground))]')
-                }`}
-              >
-                Meal Planner
-              </NavLink>
-              <button 
-                onClick={handleLogout}
-                className={`text-sm sm:text-base px-2 sm:px-3 py-1 rounded transition-colors duration-200 ${
-                  isHomePage 
-                    ? 'text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--card))] hover:text-[hsl(var(--destructive))]' 
-                    : 'text-[hsl(var(--card-foreground))] hover:bg-[hsl(var(--primary))] hover:text-[hsl(var(--primary-foreground))]'
-
                 }`}
               >
                 Logout
               </button>
             </>
           ) : (
             <>
-
               <NavLink to="/" className={({ isActive }) => `${baseLink} ${activeLink(isActive)}`}>
                 Home
               </NavLink>
@@ -196,37 +124,6 @@ const Navbar = () => {
               </NavLink>
               {!isHomePage && (
                 <NavLink to="/signup" className={({ isActive }) => `${baseLink} ${activeLink(isActive)}`}>
-
-              <NavLink 
-                to="/" 
-                className={`text-sm sm:text-base px-2 sm:px-3 py-1 rounded transition-colors duration-200 ${
-                  isHomePage 
-                    ? 'text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--card))] hover:text-[hsl(var(--primary))]' 
-                    : 'text-[hsl(var(--card-foreground))] hover:bg-[hsl(var(--primary))] hover:text-[hsl(var(--primary-foreground))]'
-                }`}
-              >
-                Home
-              </NavLink>
-              <NavLink 
-                to="/login" 
-                className={({isActive}) => `text-sm sm:text-base px-2 sm:px-3 py-1 rounded transition-colors duration-200 ${
-                  isActive 
-                    ? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]'
-                    : (isHomePage ? 'text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--card))] hover:text-[hsl(var(--primary))]' : 'text-[hsl(var(--card-foreground))] hover:bg-[hsl(var(--primary))] hover:text-[hsl(var(--primary-foreground))]')
-                }`}
-              >
-                Login
-              </NavLink>
-              {!isHomePage && (
-                <NavLink 
-                  to="/signup" 
-                  className={({isActive}) => `text-sm sm:text-base px-2 sm:px-3 py-1 rounded transition-colors duration-200 ${
-                    isActive 
-                      ? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]'
-                      : 'text-[hsl(var(--card-foreground))] hover:bg-[hsl(var(--primary))] hover:text-[hsl(var(--primary-foreground))]'
-                  }`}
-                >
-
                   Signup
                 </NavLink>
               )}

src/components/ProfileSetup.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useAuth } from '../contexts/AuthContext';
 const ProfileSetup = ({ isFirstTime = false, onComplete, onSkip }) => {
-    const { user, userProfile, updateProfile } = useAuth();
+    const { user: _user, userProfile, updateProfile } = useAuth();
     const [currentStep, setCurrentStep] = useState(1);
     const [isLoading, setIsLoading] = useState(false);
     const [formData, setFormData] = useState({

src/components/RecipeCard.jsx

@@ -5,6 +5,7 @@ const RecipeCard = ({ recipe, onClick, onSave }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [isSaved, setIsSaved] = useState(false);
   const [isFavorited, setIsFavorited] = useState(false);
+  const [imageSrc, setImageSrc] = useState(recipe.image || '/dine-fit-logo.svg');
 
   useEffect(() => {
     setIsFavorited(mealLoggingService.isFavorited(recipe.id));

src/components/RecipeModal.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { advancedRecipeService } from '../services/advancedRecipeService';
 import { mealLoggingService } from '../services/mealLoggingService';
-const RecipeModal = ({ recipe, isOpen, onClose, onSave }) => {
+const RecipeModal = ({ recipe, isOpen, onClose, onSave: _onSave }) => {
   const [recipeDetails, setRecipeDetails] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
   const [activeTab, setActiveTab] = useState('ingredients');

src/pages/Home.jsx

@@ -9,9 +9,6 @@ import third from "../assets/third.png";
 import fourth from "../assets/fourth.png";
 import fifth from "../assets/fifth.png";
 import sixth from "../assets/sixth.png";
-import React from 'react'
-import { useAuth } from '../contexts/AuthContext'
-import { Link } from 'react-router-dom';
 
 const Home = () => {
   const { user, isAuthenticated, loading } = useAuth();
@@ -185,99 +182,3 @@ const Home = () => {
 };
 export default Home;
 
-
-      <div className="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12 lg:py-16">
-        <div className="text-center">
-
-          <div className="backdrop-blur-sm bg-[hsl(var(--card))]/40 rounded-3xl p-8 sm:p-12 lg:p-16 shadow-2xl border border-[hsl(var(--border))]/20 mb-16">
-            <h1 className="text-4xl sm:text-5xl lg:text-7xl font-bold bg-gradient-to-r from-emerald-600 via-teal-600 to-cyan-600 bg-clip-text text-transparent mb-6 sm:mb-8">
-              {isAuthenticated ? `Welcome back, ${user.name || user.email}!` : 'Welcome to DineFit!'}
-            </h1>
-            <p className="text-xl sm:text-2xl lg:text-3xl text-[hsl(var(--muted-foreground))] mb-8 sm:mb-12 max-w-4xl mx-auto leading-relaxed">
-              {isAuthenticated 
-                ? 'Ready to plan delicious meals?' 
-                : 'Tired of guessing what to cook? Let DineFit help.'
-              }
-            </p>
-
-            <div className="flex flex-col sm:flex-row gap-6 justify-center items-center mb-8">
-                {isAuthenticated ? (
-                <Link 
-                  to="/dashboard" 
-                  className="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-[hsl(var(--primary-foreground))] bg-[hsl(var(--primary))] rounded-2xl hover:brightness-95 transform hover:scale-105 transition-all duration-300 shadow-xl hover:shadow-2xl"
-                >
-                  <span className="absolute inset-0 bg-[hsl(var(--primary))] rounded-2xl blur opacity-75 group-hover:opacity-100 transition-opacity duration-300"></span>
-                  <span className="relative">Go to Dashboard </span>
-                </Link>
-              ) : (
-                <>
-                  <Link 
-                    to="/signup" 
-                    className="group relative inline-flex items-center justify-center px-10 py-5 text-xl font-bold text-[hsl(var(--primary-foreground))] bg-[hsl(var(--primary))] rounded-2xl hover:brightness-105 transform hover:scale-105 transition-all duration-300 shadow-xl hover:shadow-2xl"
-                  >
-                    <span className="absolute inset-0 bg-gradient-to-r from-emerald-400 to-teal-400 rounded-2xl blur opacity-75 group-hover:opacity-100 transition-opacity duration-300"></span>
-                    <span className="relative">Start Your Journey</span>
-                  </Link>
-                  <Link 
-                    to="/login" 
-                    className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-[hsl(var(--card-foreground))] bg-[hsl(var(--card))]/60 backdrop-blur-sm rounded-2xl hover:bg-[hsl(var(--card))]/80 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl border border-[hsl(var(--border))]/30"
-                  >
-                    Sign In
-                  </Link>
-                </>
-              )}
-            </div>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 sm:gap-10 mt-16 sm:mt-20">
-            <div className="group relative backdrop-blur-sm bg-[hsl(var(--card))]/50 p-8 sm:p-10 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 border border-[hsl(var(--border))] transform hover:-translate-y-2">
-              <div className="absolute inset-0 bg-gradient-to-br from-emerald-100/20 to-teal-100/20 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
-              <div className="relative z-10">
-                <div className="text-6xl sm:text-7xl mb-6 filter drop-shadow-lg">👨‍🍳</div>
-                <h3 className="text-2xl sm:text-3xl font-bold bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent mb-4">Personal Recipes</h3>
-                <p className="text-[hsl(var(--muted-foreground))] text-base sm:text-lg leading-relaxed">
-                  Discover recipes tailored to your personal taste preferences and cooking style.
-                </p>
-              </div>
-            </div>
-
-            <div className="group relative backdrop-blur-sm bg-[hsl(var(--card))]/50 p-8 sm:p-10 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 border border-[hsl(var(--border))] transform hover:-translate-y-2">
-              <div className="absolute inset-0 bg-gradient-to-br from-teal-100/20 to-cyan-100/20 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
-              <div className="relative z-10">
-                <div className="text-6xl sm:text-7xl mb-6 filter drop-shadow-lg">🔍</div>
-                <h3 className="text-2xl sm:text-3xl font-bold bg-gradient-to-r from-teal-600 to-cyan-600 bg-clip-text text-transparent mb-4">Smart Discovery</h3>
-                <p className="text-[hsl(var(--muted-foreground))] text-base sm:text-lg leading-relaxed">
-                  Find new recipes that match your flavor preferences and dietary requirements.
-                </p>
-              </div>
-            </div>
-
-            <div className="group relative backdrop-blur-sm bg-[hsl(var(--card))]/50 p-8 sm:p-10 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 border border-[hsl(var(--border))] transform hover:-translate-y-2">
-              <div className="absolute inset-0 bg-gradient-to-br from-cyan-100/20 to-blue-100/20 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
-              <div className="relative z-10">
-                <div className="text-6xl sm:text-7xl mb-6 filter drop-shadow-lg">❤️</div>
-                <h3 className="text-2xl sm:text-3xl font-bold bg-gradient-to-r from-cyan-600 to-blue-600 bg-clip-text text-transparent mb-4">Recipe Favorites</h3>
-                <p className="text-[hsl(var(--muted-foreground))] text-base sm:text-lg leading-relaxed">
-                  Save and organize recipes you love, creating your personalized collection.
-                </p>
-              </div>
-            </div>
-
-            <div className="group relative backdrop-blur-sm bg-[hsl(var(--card))]/50 p-8 sm:p-10 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 border border-[hsl(var(--border))] transform hover:-translate-y-2">
-              <div className="absolute inset-0 bg-gradient-to-br from-purple-100/20 to-pink-100/20 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
-              <Link to={isAuthenticated ? "/meal-planner" : "/login"} className="relative z-10 block">
-                <div className="text-6xl sm:text-7xl mb-6 filter drop-shadow-lg">🗓️</div>
-                <h3 className="text-2xl sm:text-3xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent mb-4">Meal Planner</h3>
-                <p className="text-[hsl(var(--muted-foreground))] text-base sm:text-lg leading-relaxed">
-                  Plan your meals effortlessly with personalized diet options and flexible scheduling.
-                </p>
-              </Link>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-export default Home
-

tailwind.config.js

@@ -1,3 +1,5 @@
+import tailwindcssAnimate from "tailwindcss-animate";
+
 /** @type {import('tailwindcss').Config} */
 export default {
     darkMode: ["class"],
@@ -62,5 +64,5 @@ export default {
     		}
     	}
     },
-    plugins: [require("tailwindcss-animate")],
+    plugins: [tailwindcssAnimate],
 }

vite.config.js

@@ -1,11 +1,12 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import path from 'path'
+import { fileURLToPath, URL } from 'node:url'
 
 export default defineConfig({
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src')
+      '@': path.resolve(path.dirname(fileURLToPath(import.meta.url)), './src')
     },
   },
   plugins: [react()],
@@ -21,6 +22,6 @@ export default defineConfig({
     }
   },
   define: {
-    'import.meta.env.DEV': JSON.stringify(process.env.NODE_ENV === 'development')
+    'import.meta.env.DEV': JSON.stringify(true)
   }
 })