add mac and cheese and logo

backend/seedData.js

@@ -146,6 +146,41 @@ const sampleRecipes = [
     category: "dinner",
     difficulty: "medium",
     imageUrl: "https://images.unsplash.com/photo-1603133872878-684f208fb84b?w=500"
+  },
+  {
+    title: "Creamy Mac and Cheese",
+    description: "Rich and creamy homemade macaroni and cheese with a golden breadcrumb topping",
+    ingredients: [
+      { name: "elbow macaroni", amount: 1, unit: "lb" },
+      { name: "butter", amount: 4, unit: "tbsp" },
+      { name: "all-purpose flour", amount: 4, unit: "tbsp" },
+      { name: "whole milk", amount: 3, unit: "cups" },
+      { name: "sharp cheddar cheese", amount: 3, unit: "cups" },
+      { name: "gruyere cheese", amount: 1, unit: "cup" },
+      { name: "cream cheese", amount: 4, unit: "oz" },
+      { name: "salt", amount: 1, unit: "tsp" },
+      { name: "black pepper", amount: 0.5, unit: "tsp" },
+      { name: "paprika", amount: 0.5, unit: "tsp" },
+      { name: "breadcrumbs", amount: 1, unit: "cup" },
+      { name: "parmesan cheese", amount: 0.5, unit: "cup" }
+    ],
+    instructions: [
+      { step: 1, description: "Preheat oven to 375°F and cook macaroni according to package directions" },
+      { step: 2, description: "In a large saucepan, melt butter over medium heat" },
+      { step: 3, description: "Whisk in flour and cook for 1 minute to make a roux" },
+      { step: 4, description: "Gradually whisk in milk and cook until thickened" },
+      { step: 5, description: "Remove from heat and stir in cheddar, gruyere, and cream cheese" },
+      { step: 6, description: "Season with salt, pepper, and paprika" },
+      { step: 7, description: "Combine cheese sauce with cooked macaroni" },
+      { step: 8, description: "Transfer to baking dish and top with breadcrumbs and parmesan" },
+      { step: 9, description: "Bake for 25-30 minutes until golden and bubbly" }
+    ],
+    servings: 6,
+    prepTime: 15,
+    cookTime: 45,
+    category: "dinner",
+    difficulty: "medium",
+    imageUrl: "https://images.unsplash.com/photo-1543826173-1ad6e0b9c4b9?w=500"
   }
 ];
 

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import { AuthProvider, useAuth } from './context/AuthContext';
 import Dashboard from './pages/Dashboard';
@@ -39,6 +39,39 @@ const PublicRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
 };
 
 function App() {
+  useEffect(() => {
+    // Update document title
+    document.title = 'Scoffer - Recipe Management';
+    
+    // Create and set favicon
+    const favicon = document.querySelector("link[rel*='icon']") as HTMLLinkElement || document.createElement('link');
+    favicon.type = 'image/svg+xml';
+    favicon.rel = 'shortcut icon';
+    favicon.href = 'data:image/svg+xml;base64,' + btoa(`
+      <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="16" cy="16" r="15" fill="#FF6B35"/>
+        <path d="M8 12 Q8 9 10 9 Q12 7 16 7 Q20 7 22 9 Q24 9 24 12 L24 15 Q24 16 23 16 L9 16 Q8 16 8 15 Z" fill="white"/>
+        <rect x="9" y="15" width="14" height="4" fill="white" rx="1"/>
+        <g transform="translate(6, 20)">
+          <rect x="2" y="0" width="0.5" height="6" fill="white"/>
+          <rect x="1.5" y="0" width="0.5" height="4" fill="white"/>
+          <rect x="2.5" y="0" width="0.5" height="4" fill="white"/>
+          <rect x="1.2" y="6" width="2.1" height="2" fill="white" rx="0.3"/>
+        </g>
+        <g transform="translate(22, 20)">
+          <rect x="0" y="0" width="2" height="0.8" fill="white"/>
+          <rect x="0.7" y="0.8" width="0.6" height="5.5" fill="white"/>
+          <rect x="0.3" y="6.3" width="1.4" height="2" fill="white" rx="0.3"/>
+        </g>
+        <ellipse cx="16" cy="23" rx="5" ry="2" fill="white" opacity="0.9"/>
+        <circle cx="14" cy="22.5" r="0.8" fill="#4CAF50"/>
+        <circle cx="18" cy="22.5" r="0.8" fill="#FFC107"/>
+        <circle cx="16" cy="21.5" r="0.6" fill="#FF5722"/>
+      </svg>
+    `);
+    document.getElementsByTagName('head')[0].appendChild(favicon);
+  }, []);
+
   return (
     <AuthProvider>
       <Router>

frontend/src/assets/favicon.svg

@@ -0,0 +1,29 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background circle -->
+  <circle cx="16" cy="16" r="15" fill="#FF6B35"/>
+  
+  <!-- Chef's hat -->
+  <path d="M8 12 Q8 9 10 9 Q12 7 16 7 Q20 7 22 9 Q24 9 24 12 L24 15 Q24 16 23 16 L9 16 Q8 16 8 15 Z" fill="white"/>
+  <rect x="9" y="15" width="14" height="4" fill="white" rx="1"/>
+  
+  <!-- Fork -->
+  <g transform="translate(6, 20)">
+    <rect x="2" y="0" width="0.5" height="6" fill="white"/>
+    <rect x="1.5" y="0" width="0.5" height="4" fill="white"/>
+    <rect x="2.5" y="0" width="0.5" height="4" fill="white"/>
+    <rect x="1.2" y="6" width="2.1" height="2" fill="white" rx="0.3"/>
+  </g>
+  
+  <!-- Knife -->
+  <g transform="translate(22, 20)">
+    <rect x="0" y="0" width="2" height="0.8" fill="white"/>
+    <rect x="0.7" y="0.8" width="0.6" height="5.5" fill="white"/>
+    <rect x="0.3" y="6.3" width="1.4" height="2" fill="white" rx="0.3"/>
+  </g>
+  
+  <!-- Plate with food -->
+  <ellipse cx="16" cy="23" rx="5" ry="2" fill="white" opacity="0.9"/>
+  <circle cx="14" cy="22.5" r="0.8" fill="#4CAF50"/>
+  <circle cx="18" cy="22.5" r="0.8" fill="#FFC107"/>
+  <circle cx="16" cy="21.5" r="0.6" fill="#FF5722"/>
+</svg>