🍳 Recipe Book - Angular Application

A modern, full-featured recipe management application built with Angular 16, featuring authentication, state management with NgRx, and Firebase integration.

✨ Features

🔐 Authentication System

• User Registration & Login: Secure authentication using Firebase Authentication
• Token Management: Automatic token refresh and expiration handling
• Route Protection: Guarded routes requiring authentication
• Auto-login: Persistent user sessions with localStorage

📝 Recipe Management

• CRUD Operations: Create, read, update, and delete recipes
• Recipe Details: View comprehensive recipe information with images
• Ingredient Management: Add, edit, and manage recipe ingredients
• Image Support: Recipe images with URL-based storage

🛒 Shopping List

• Dynamic Shopping List: Add ingredients from recipes to shopping list
• State Management: NgRx-powered shopping list with real-time updates
• Edit & Delete: Modify shopping list items with inline editing
• Bulk Operations: Add multiple ingredients at once

🏗️ Architecture & State Management

• NgRx Store: Centralized state management for authentication and shopping list
• NgRx Effects: Side effect handling for authentication flows
• Lazy Loading: Feature modules loaded on-demand for better performance
• Reactive Forms: Form validation and user input handling

🔧 Technical Features

• HTTP Interceptors: Automatic token injection for API requests
• Route Resolvers: Data pre-loading for better UX
• Responsive Design: Bootstrap-based responsive layout
• Firebase Integration: Real-time database for recipe storage
• Error Handling: Comprehensive error management and user feedback

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• Angular CLI (npm install -g @angular/cli)
• Firebase account for backend services

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd Angular_Project

2. Install dependencies

   npm install

3. Configure Firebase

   • Create a Firebase project
   • Enable Authentication and Realtime Database
   • Update src/environments/environment.ts with your Firebase API key:

   export const environment = {
     production: false,
     firebaseAPIKey: 'your-firebase-api-key'
   };

4. Run the application

   ng serve

   Navigate to http://localhost:4200/

📁 Project Structure

src/app/
├── auth/                    # Authentication module
│   ├── store/              # NgRx auth state management
│   ├── auth.component.*    # Login/signup forms
│   ├── auth.service.ts     # Firebase auth service
│   └── auth.guard.ts       # Route protection
├── recipes/                # Recipe management module
│   ├── recipe-detail/      # Recipe viewing component
│   ├── recipe-edit/        # Recipe creation/editing
│   ├── recipe-list/        # Recipe listing
│   ├── recipe.service.ts   # Recipe business logic
│   └── recipe.model.ts     # Recipe data model
├── shopping-list/          # Shopping list module
│   ├── store/              # NgRx shopping list state
│   ├── shopping-edit/      # Shopping list editing
│   └── shopping-list.service.ts
├── shared/                 # Shared components & services
│   ├── alert/              # Alert component
│   ├── loading-spinner/    # Loading indicator
│   ├── dropdown.directive.ts
│   └── data-storage.service.ts
└── store/                  # Root NgRx store configuration

��️ Built With

• Angular 16 - Frontend framework
• TypeScript - Programming language
• NgRx - State management
• Firebase - Backend services
• Bootstrap 3 - CSS framework
• RxJS - Reactive programming

🔧 Development

Available Scripts

# Development server
npm start
ng serve

# Build for production
npm run build
ng build --configuration production

# Run tests
npm test
ng test

# Watch mode
npm run watch
ng build --watch --configuration development

Code Generation

# Generate components
ng generate component component-name

# Generate services
ng generate service service-name

# Generate modules
ng generate module module-name

🚀 Deployment

Firebase Hosting

1. Build the application

   npm run build

2. Deploy to Firebase

   firebase deploy

The application is configured for Firebase hosting with the build output in dist/todos-app/.

📱 Features Overview

Authentication Flow

• User registration and login with email/password
• Automatic token management and refresh
• Protected routes requiring authentication
• Persistent sessions across browser sessions

Recipe Management

• Create new recipes with images and descriptions
• Edit existing recipes with form validation
• Delete recipes with confirmation
• View detailed recipe information

Shopping List Integration

• Add recipe ingredients to shopping list
• Edit shopping list items inline
• Delete items from shopping list
• Real-time state updates with NgRx

🤝 Contributing

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Angular team for the excellent framework
• NgRx team for state management solutions
• Firebase for backend services
• Bootstrap for responsive design components

---

Note: This application was generated with Angular CLI version 15.0.4 and has been upgraded to Angular 16.