Skip to content

Latest commit

 

History

History
192 lines (128 loc) · 7.21 KB

README.md

File metadata and controls

192 lines (128 loc) · 7.21 KB
Raw

Recipe-Book

Overview

The Recipe Book is a web application built using Angular for the frontend client and Firebase as a complete backend solution. This documentation provides an overview of the project, its features, and key concepts used in its development.


7

Angular


Contents


Tools and Technologies used

  • Angular Framework:

    • Angular is the core framework for building the frontend of your recipe app. It provides a structured architecture for creating dynamic web applications.
    • Angular

  • Firebase:

    • Firebase serves as the backend solution for your app. It offers real-time database capabilities, authentication services, and hosting, among other features, making it a comprehensive serverless platform.
    • Firebase

  • RxJS:

    • RxJS is used to handle asynchronous operations in a reactive and efficient way. It's especially useful for managing data streams and handling events.
    • RxJS

  • Bootstrap:

    • Bootstrap is employed for responsive and visually appealing user interface components. It simplifies the process of creating a clean and user-friendly design.
    • Bootstrap

  • Lazy Loading:

    • Lazy loading is a performance optimization technique in Angular. It allows you to load only the necessary modules and components when they are needed, reducing the initial load time of your application.

  • Authentication:

    • You've implemented user authentication, which is a critical feature for securing your app and providing personalized experiences to users.

Project Features

  • Authentication:

    • Users can create accounts, log in, and log out securely.
    • Authentication guards protect routes for authorized access only.

  • Recipe Management:

    • Create, update, and delete recipes.
    • Add ingredients to recipes.
    • Display recipes with images and descriptions.

  • Shopping List:

    • Add, update, and delete ingredients.
    • Easily transfer ingredients from recipes to the shopping list.

  • Forms:

    • Two types of forms:
      • Template-driven forms.
      • Reactive forms for advanced form handling.

Angular Concepts

This project leverages various key Angular concepts:

  • Angular Modules:

    • Modules are used to organize and encapsulate different parts of the application.

  • NgModule:

    • The @NgModule decorator defines a module in Angular. It specifies what components, directives, and services belong to the module.

  • Components:

    • Components are the building blocks of an Angular application, representing different parts of the user interface.

  • Directives:

    • Directives modify the DOM's structure, appearance, or behavior. Examples include ngFor and ngIf.

  • Services and Dependency Injection:

    • Services are used to encapsulate reusable logic or data.
    • Dependency Injection is a design pattern in Angular to provide dependencies to components and services.

  • Data Binding:

    • Angular supports various types of data binding:
      • Event Binding.
      • Property Binding.
      • Two-Way Binding.

  • String Interpolation:

    • String interpolation is used to display dynamic data in the template.

  • HTTP in Angular:

    • Angular's HttpClient is used to make HTTP requests to the backend.
    • Firebase's REST API is used to interact with the backend.

  • Resolver:

    • Route resolvers ensure that data is loaded before navigating to a route.

  • RxJS Operators:

    • Operators like map, switchMap, and catchError are used to transform data and handle asynchronous operations.

  • Observables and Promises:

    • Observables are used extensively to work with asynchronous data.
    • Promises are used for simpler asynchronous operations.

  • Subjects:

    • Subjects are a type of observable used for multicasting.

  • Authentication Guards:

    • Auth guards secure routes based on user authentication status.

Project Setup

To run the project locally:

  • Clone the repository.
npm install
ng serve
  • Open the web application in your browser.

Configure environment variables

export const environment = {
  production: true | false,
  firebaseAPIKey: your_firebase_APIKey,
};

Steps to deploy an Angular application to Firebase Hosting:

  • Install Firebase Tools:

    • Run npm install -g firebase-tools to install the Firebase CLI globally on your machine.

  • Login to Firebase:

    • Use the command firebase login to log in to your Firebase account. This will open a browser window where you can authenticate.

  • Initialize Firebase Project:

    • Navigate to your project's root directory in the terminal.
    • Run firebase init to start the Firebase initialization process.

  • Configure Hosting:

    • Choose "Hosting" from the list of Firebase features by pressing the spacebar and then Enter.
    • Select an existing Firebase project or create a new one.
    • Set your public directory as dist/your-project-name. This is the directory where your built Angular app is located.

  • Single-Page App Configuration:

    • Answer "Yes" to configuring the app as a single-page app. This ensures that all URLs are rewritten to /index.html, which is crucial for Angular's routing to work correctly.

  • Overwrite index.html:

    • If Firebase asks whether to overwrite dist/your-project-name/index.html, choose "No" since you've likely already built your app.

  • Build Your Angular App:

    • Before deploying, make sure to build your Angular app. You can do this using the Angular CLI: ng build.

  • Deploy to Firebase:

    • Once your Angular app is built, deploy it to Firebase Hosting by running firebase deploy.

  • Deployment Complete:

    • After a successful deployment, Firebase will provide you with a Hosting URL where your app is now live.

  • Access Your App:

    • You can now access your Angular app on the provided Hosting URL, and it's ready for the world to see.

Work in Progress

  • UI needs to be improved
  • Minor bug fixes