ChefCircle

ChefCircle is a modern recipe-sharing platform designed for food enthusiasts to explore, share, and connect over culinary creations. With a sleek design, interactive features, and smooth animations, it offers an engaging and user-friendly experience.

🔗 GitHub Repository

You can access the project repository here: ChefCircle GitHub Repository

🚀 Features

🌟 Shared Development

• Homepage:
  • Dynamic recipe slider with time-based greetings.
  • Recipe grid with category filters and hover effects.
  • Featured sections: Recipe of the day, popular categories, and cooking tips.

👥 Individual Responsibilities

• Recipe Submission: Interactive form with live validation, image previews, and step builder.

• Recipe Explorer: Toggle views, recipe filtering, print functionality, and ratings display.

• Meal Planner: Drag-and-drop calendar, shopping list generator, and cooking timer.

• Community Hub: Comments, user ratings, bookmarks, and cooking tips.

🎨 Shared Components

• Navigation bar.
• Error handling for forms and inputs.
• Theme switching (light/dark mode).

---

📂 Folder Structure

ChefCircle/
├── index.html             # Main homepage (Shared work)
├── css/                   # Stylesheets
│   ├── global.css         # Shared global styles
│   ├── homepage.css       # Styles for the homepage (Shared work)
│   ├── recipe-submission.css  # Styles for Recipe Submission (Member 1)
│   ├── recipe-gallery.css     # Styles for Recipe Explorer (Member 2)
│   ├── meal-planner.css       # Styles for Meal Planner (Member 3)
│   └── community-hub.css      # Styles for Community Hub (Member 4)
├── js/                    # JavaScript files
│   ├── homepage.js        # Shared homepage functionality
│   ├── recipe-submission.js  # JS for Recipe Submission (Member 1)
│   ├── recipe-gallery.js     # JS for Recipe Explorer (Member 2)
│   ├── meal-planner.js       # JS for Meal Planner (Member 3)
│   └── community-hub.js      # JS for Community Hub (Member 4)
├── images/                # Images and assets
│   ├── homepage/          # Images for the homepage
│   ├── recipe-submission/ # Images for Recipe Submission
│   ├── recipe-gallery/    # Images for Recipe Explorer
│   ├── meal-planner/      # Images for Meal Planner
│   └── community-hub/     # Images for Community Hub
├── components/            # Reusable components
│   ├── footer.html        # Footer (Shared work)
│   ├── recipe-card.html   # Recipe card (Shared work)
│   └── error-modal.html   # Error handling component (Shared work)
├── README.md              # Project documentation

ChefCircle/navbar
│   ├── navbar.css         # Core styles with responsive layout and animations
│   ├── navbar.html        # Navigation markup with mobile menu structure
│   ├── navbar.js          # Mobile menu toggle and active page detection