171 lines
4.8 KiB
Markdown
171 lines
4.8 KiB
Markdown
# 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:
|
|
```bash
|
|
cd backend
|
|
```
|
|
|
|
2. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. Create a `.env` file with your configuration:
|
|
```
|
|
PORT=5000
|
|
MONGODB_URI=mongodb://localhost:27017/recipe-management
|
|
JWT_SECRET=your-super-secret-jwt-key-change-this-in-production
|
|
```
|
|
|
|
4. Seed the database with sample recipes:
|
|
```bash
|
|
node seedData.js
|
|
```
|
|
|
|
5. Start the backend server:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
### Frontend Setup
|
|
|
|
1. Navigate to the frontend directory:
|
|
```bash
|
|
cd frontend
|
|
```
|
|
|
|
2. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. Start the frontend development server:
|
|
```bash
|
|
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.
|