A user-friendly full-stack Recipe Book App that allows users to discover, add, manage, and interact with delicious recipes. Built with React, Firebase, Express.js, and MongoDB, the app includes features like top recipes, wishlist, user authentication, like system, and more — tailored for food lovers.
🔗 Live Website: https://assignment-10-auth-1f744.web.app
📦 Client Repository: GitHub Client
🛠️ Server Repository: GitHub Server
- 🔐 Authentication System with Firebase (Email/Password + Google Sign-In)
- 🍽️ Add, Update & Delete Recipes with form validation & private route protection
- ❤️ Like Functionality with real-time like count updates (excluding own recipes)
- 🌍 Filter Recipes by Cuisine type (e.g., Indian, Italian, Mexican)
- 🏆 Top Recipes Section sorted by most liked recipes
- 🌙 Dark/Light Theme Toggle support on the homepage
- 🎨 Stunning UI using Tailwind CSS and animation libraries like:
react-awesome-revealreact-simple-typewriter
- 📱 Fully Responsive Design (Mobile, Tablet & Desktop)
- ☁️ Client hosted on Firebase, Server on Vercel
- Home Page
- Banner/Slider
- Top Recipes Section (6 most liked)
- Extra Food-Themed Static Sections
- All Recipes Page
- Grid layout with filtering by Cuisine Type
- Login Page
- Register Page
- 404 Not Found Page (Food-themed, no navbar/footer)
- Add Recipe Page
- My Recipes Page (CRUD operations only on user's own recipes)
- Recipe Details Page (Like functionality and recipe info)
/→ HomeLayout (protected)/allrecipes→ All recipes (protected)/addrecipes→ Add a new recipe (protected)/profile→ User profile (protected)/users/:id→ Recipe details (dynamic route)/myrecipes→ User’s recipes/login→ Login page/signup→ Signup page
| Frontend | Backend | Auth | Database | Deployment |
|---|---|---|---|---|
| React, Tailwind | Express.js | Firebase Auth | MongoDB | Firebase (client), Vercel (server) |
VITE_API_URL– for server connectionVITE_FIREBASE_API_KEY,VITE_AUTH_DOMAIN, etc. – Firebase configMONGODB_URI– MongoDB URI (hidden in.env)