Recipe Book

Recipe Book is a modern, full-stack web application built to empower home cooks. The application features a dynamic and responsive user interface crafted with React and styled with Tailwind CSS, providing a seamless experience across all devices. The robust backend, powered by Node.js and Express.js, handles secure user authentication with JWT and manages recipe data efficiently within a MongoDB database. It's the perfect tool for organizing your culinary life, from managing recipes to discovering new dishes with a powerful pantry search.

Live Demo

• Deployment Link: https://recipe-api-frontend.netlify.app/
• Video Demo: Watch a demo of Recipe Book here: https://youtu.be/DuWJmsoMgEg

Features

🍽️ Recipe Management: Users can create, view, edit, and delete their own recipes, complete with ingredients, instructions, and descriptions.

📆 Weekly Meal Planner: A dynamic meal planning tool allows users to organize their recipes into a weekly schedule. The view is responsive, showing a full weekly grid on desktop and a convenient single-day view for mobile devices.

🛒 Pantry Search: Discover new recipes by searching for dishes that can be made with the ingredients you have on hand.

🔐 User Authentication: Secure user registration and login functionality ensure that your data is private and accessible only to you.

Technologies Used

Frontend

• React
• TypeScript
• React Router
• Axios
• Tailwind CSS

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose
• JSON Web Tokens (JWT)
• Bcrypt

Deployment & Environment

• Vite
• Environment Variables

Installation and Setup

Prerequisites

• Node.js (v14 or higher)
• npm (or yarn)
• MongoDB

Steps

1. Clone the repository:

   git clone [https://github.com/Vandu-Shre/recipe-app.git](https://github.com/Vandu-Shre/recipe-app.git)

2. Set up the backend:

   • Navigate to the backend directory.
   • Install dependencies: npm install
   • Create a .env file with your MongoDB URI and JWT secret.
   • Start the server: npm start

3. Set up the frontend:

   • Navigate to the frontend directory.
   • Install dependencies: npm install
   • Create a .env file with your backend API URL.
   • Start the development server: npm run dev

4. Access the App: The application will be available at http://localhost:5173