Recipe Monster – Full-Stack Recipe & Chef Showcase Platform

🔹 Overview

Recipe Monster is a chef-focused recipe platform designed to help users explore professional chefs and learn cooking techniques through detailed recipe views. The application presents a list of chefs along with their profiles, experience, and total number of recipes, allowing users to easily discover culinary content.

Users can browse chef profiles publicly, but to access full recipe details and cooking instructions, authentication is required. The platform supports email/password authentication as well as Google and GitHub OAuth, implemented using Firebase Authentication. New users can easily register, while returning users can sign in using their preferred provider.

Once authenticated, users can view individual chef pages that display all associated recipes, including ingredients and step-by-step cooking methods. The application also allows users to add recipes to a favorite list, enhancing personalization and engagement.

The backend is built with Node.js, Express.js, and MongoDB, serving chef and recipe data via RESTful APIs. The frontend is developed using React, React Router, Tailwind CSS, and DaisyUI, ensuring a clean, responsive, and intuitive user interface. User interactions and feedback (such as adding favorites) are enhanced using SweetAlert for better UX.

This project demonstrates real-world concepts such as multi-provider authentication, protected content access, REST API integration, and full-stack data flow between client and server.

---

🔹 Key Features

• Public chef listing with profile and recipe count

• Detailed chef pages with all associated recipes

• Protected recipe details accessible after login

• Email/password authentication with Firebase

• Google and GitHub social login support

• Add recipes to a personal favorite list

• RESTful API with Node.js, Express, and MongoDB

• Responsive UI with Tailwind CSS and DaisyUI

---

🔹 Challenges & Solutions

🔸 Implementing Multiple Authentication Providers

Challenge:
Supporting multiple login methods (email/password, Google, GitHub) while maintaining a consistent authentication flow and user experience.

Solution:
Firebase Authentication was used to unify all authentication providers under a single system. This simplified user management, reduced backend complexity, and ensured secure authentication regardless of the chosen login method.

---

🔸 Protecting Recipe Details Behind Authentication

Challenge:
Allowing users to browse chefs publicly while restricting access to detailed recipes and cooking methods for unauthenticated users.

Solution:
Authentication checks were applied at the routing and component level. Only logged-in users can access full recipe details, ensuring controlled access while still allowing public discovery of chefs.

---

🔸 Structuring Chef-Recipe Relationships in the Backend

Challenge:
Designing a backend structure that efficiently links chefs with multiple recipes and supports scalable data fetching.

Solution:
MongoDB collections were structured to associate chefs with their respective recipes, and RESTful endpoints were created to fetch chef-specific recipe data dynamically. This approach keeps the API flexible and easy to extend.

---

🔸 Enhancing User Feedback for Actions

Challenge:
Users need clear feedback when interacting with features like adding recipes to favorites.

Solution:
SweetAlert was integrated to provide instant visual feedback for user actions, improving usability and overall user experience.

---

🔹 Tech Stack

Frontend: React.js, React Router, Tailwind CSS, DaisyUI
Backend: Node.js, Express.js, MongoDB
Authentication: Firebase (Email/Password, Google, GitHub)
UI & UX: SweetAlert
Language: JavaScript