Recipe Management App

A full-stack recipe management application that allows users to browse recipes, select them for their menu, and automatically generate aggregated shopping lists.

Features

• User Authentication: Register and login with secure JWT authentication
• Recipe Browsing: Browse recipes with filtering by category, difficulty, and search
• Recipe Selection: Add recipes to your personal menu with quantity control
• Ingredient Aggregation: Automatically calculate total ingredient quantities across selected recipes
• Shopping List: Generate comprehensive shopping lists from selected recipes
• Responsive Design: Modern, mobile-friendly interface

Tech Stack

Backend

• Node.js with Express.js
• MongoDB with Mongoose ODM
• JWT for authentication
• bcryptjs for password hashing
• CORS for cross-origin requests

Frontend

• React 18 with TypeScript
• React Router for navigation
• Axios for API calls
• Context API for state management
• CSS3 with responsive design

Project Structure

recipe-management-app/
├── backend/
│   ├── models/          # Database models
│   ├── routes/          # API routes
│   ├── server.js        # Express server
│   ├── seedData.js      # Sample data seeder
│   └── package.json
├── frontend/
│   ├── src/
│   │   ├── components/  # React components
│   │   ├── pages/       # Page components
│   │   ├── context/     # React context
│   │   ├── services/    # API services
│   │   └── utils/       # Utility functions
│   └── package.json
└── README.md

Setup Instructions

Prerequisites

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

Backend Setup

1. Navigate to the backend directory:

   cd backend
   

2. Install dependencies:

   npm install
   

3. Create a .env file with your configuration using a copy of the .envtemplate file (for example):

   PORT=5000
   MONGODB_URI=mongodb://localhost:27017/recipe-management
   MONGODB_USERNAME=admin
   MONGODB_PASSWORD=password123
   MONGODB_PORT=27017
   MONGODB_DATABASE=recipe-management
   JWT_SECRET=your-super-secret-jwt-key-change-this-in-production
   

4. Seed the database with sample recipes:

   node seedData.js
   

5. Start the backend server:

   npm run dev
   

Frontend Setup

1. Navigate to the frontend directory:

   cd frontend
   

2. Install dependencies:

   npm install
   

3. Start the frontend development server:

   npm start
   

The application will be available at:

• Frontend: http://localhost:3000
• Backend API: http://localhost:5000

API Endpoints

Authentication

• POST /api/users/register - Register new user
• POST /api/users/login - Login user
• GET /api/users/profile - Get user profile (protected)

Recipes

• GET /api/recipes - Get all recipes (with optional filters)
• GET /api/recipes/:id - Get recipe by ID
• POST /api/recipes - Create new recipe
• PUT /api/recipes/:id - Update recipe
• DELETE /api/recipes/:id - Delete recipe

User Selections

• GET /api/selections - Get user's recipe selections (protected)
• POST /api/selections/add - Add recipe to selection (protected)
• PUT /api/selections/update - Update recipe quantity (protected)
• DELETE /api/selections/remove/:recipeId - Remove recipe from selection (protected)
• DELETE /api/selections/clear - Clear all selections (protected)

Usage

1. Register/Login: Create an account or login to access the application
2. Browse Recipes: Use the "Browse Recipes" tab to explore available recipes
3. Filter & Search: Use category, difficulty filters and search to find specific recipes
4. Add to Menu: Click "Add to Menu" on recipes you want to include
5. Manage Menu: Switch to "My Menu & Shopping List" tab to manage selected recipes
6. Adjust Quantities: Use +/- buttons to adjust recipe quantities
7. View Shopping List: See aggregated ingredients with breakdown by recipe
8. Remove Items: Remove individual recipes or clear entire menu

Sample Data

The application comes with 5 sample recipes:

• Classic Spaghetti Carbonara (Dinner, Medium)
• Chocolate Chip Cookies (Dessert, Easy)
• Caesar Salad (Lunch, Easy)
• Pancakes (Breakfast, Easy)
• Beef Stir Fry (Dinner, Medium)

Development

Adding New Recipes

Recipes can be added through the API or by modifying the seedData.js file.

Customization

• Modify styles in component CSS files
• Add new recipe categories in the Recipe model
• Extend user functionality in the User model
• Add new API endpoints in the routes directory

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is licensed under the ISC License.