Skip to content

FoodHub is a recipe-sharing platform where users can explore, submit, and save recipes, built with MERN.

License

Notifications You must be signed in to change notification settings

alecs007/FoodHub

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

FoodHub 🍔

FoodHub is a modern recipe-sharing platform built with the MERN (MongoDB, Express.js, React.js, Node.js) stack. It allows users to explore a diverse range of recipes from various cuisines and also post their best meals, making it an engaging hub for food enthusiasts. The website is designed to be user-friendly, visually appealing, and feature-rich, ensuring a smooth experience for both home cooks and professional chefs.

foodhub1_ss

🔹 Recipe Submission & Approval System

Users Can Submit Recipes: Visitors can share their own recipes by submitting details like images, category, and instructions.

Pending Review Status: Submitted recipes enter a pending status until they are reviewed.

Admin Moderation: Only the admin has the ability to approve, edit, or delete recipes through an intuitive admin panel.

foodhub2_ss

🔹 Recipe Discovery & Search

Quick Search by Name: A simple search function helps users find specific recipes instantly.

Browse Recipes by Category: Users can explore recipes based on predefined categories like Breakfast, Lunch, Dinner, or Desserts.

Recipe Modal for Detailed View: Each recipe can be opened in a modal window for a better reading experience, displaying ingredients, preparation steps, and images.

Save Favorites: Users can mark recipes as favorites, and they will be stored in localStorage for quick access.

Easy Sharing: Users can share recipes with others via a share button, which opens the page directly to that specific recipe.

image

🔹 Admin Authentication & Management

Secure JWT Authentication: Only the admin can log in and manage the platform.

Admin Dashboard: A private panel where the admin can approve, edit, or remove user-submitted recipes.

foodhub4_ss

🔹 Responsive & Optimized Design

Mobile-Friendly Interface: The website is fully responsive, ensuring a seamless experience on all devices.

Fast Performance: Optimized API responses and image handling for a smooth browsing experience.

foodhub_presentation3

Technology Stack

Frontend: React.js (Vite), Vanilla CSS for styling.

Backend: Node.js with Express.js for handling API requests.

Database: MongoDB with Mongoose for efficient data storage.

Authentication: JWT-based authentication for secure login.

Hosting: Deployed using Netlify for frontend and Railway for backend.

📌 Notes

• A local version of the project is available in the repository, using a local MongoDB database instead of a hosted one.

• In this version, uploaded images are stored on the server using Multer disk storage instead of cloud storage.

• This local version does not include a deployment platform and is meant for offline/local use only.

Why FoodHub?

FoodHub helps you discover high-quality recipes with a clean, user-friendly design. Whether you're a beginner or expert, find easy-to-follow recipes, save your favorites, share them with others, and enjoy a seamless experience from browsing to cooking.

About

FoodHub is a recipe-sharing platform where users can explore, submit, and save recipes, built with MERN.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published