Angular-ShoppingCart - GitLite

KO | EN

gitlite — search

#javascript #react #ai #typescript #golang #go #machine-learning #macos #nodejs #windows #pytorch #security #ios #mcp

Angular-ShoppingCart

(★ 618)

ShoppingCart (Ecommerce) 🛒 Application using Angular10, Firebase, PWA, Drag&Drop, Materialized Bootstrap and i18n 🚀🔥👨‍💻

File Explorer

Download Latest Version (.zip)

- hosting.ZGlzdA.cache
- hosting.ZGlzdFxhbmd1bGFyU2hvcA.cache
- - bug_report.md
  - custom.md
  - feature_request.md
- FUNDING.yml
- no-response.yml
- settings.json
- - app.e2e-spec.ts
  - app.po.ts
- protractor.conf.js
- tsconfig.json
- drag&drop.PNG
- home.PNG
- image.png
- products.PNG
- - app-routing.module.ts
  - app.component.scss
  - app.component.ts
  - app.module.ts
- - .gitkeep
- - environment.prod.ts
  - environment.ts
  - firebase.config.ts
- favicon.ico
- index.html
- main.ts
- manifest.webmanifest
- polyfills.ts
- styles.scss
- test.ts
.editorconfig
.firebaserc
.gitignore
.travis.yml
angular.json
browserslist
firebase.json
karma.conf.js
LICENSE
ngsw-config.json
package-lock.json
package.json
products.json
README.md
run.sh
tsconfig.app.json
tsconfig.json
tsconfig.spec.json
tslint.json

# Installation Guide

1. Get the code

git clone https://github.com/ikismail/Angular-ShoppingCart

Downloads the entire project code from GitHub to your computer.

cd Angular-ShoppingCart

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Angular-10 - ShoppingCart + MDBootstrap + Firebase (Realtime Database) + i18n

[![HitCount](http://hits.dwyl.io/ikismail/Angular-ShoppingCart.svg)](http://hits.dwyl.io/ikismail/Angular-ShoppingCart)
[![GitHub forks](https://img.shields.io/github/forks/ikismail/Angular-ShoppingCart.svg)](https://github.com/ikismail/Angular-ShoppingCart/network) [![GitHub stars](https://img.shields.io/github/stars/ikismail/Angular-ShoppingCart.svg)](https://github.com/ikismail/Angular-ShoppingCart/stargazers)
[![GitHub issues](https://img.shields.io/github/issues/ikismail/Angular-ShoppingCart.svg)](https://github.com/ikismail/Angular-ShoppingCart/issues)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/ikismail/Angular-ShoppingCart/blob/master/LICENSE)
[![npm](https://img.shields.io/badge/demo-online-brightgreen.svg)](https://angular-shoppingcart.firebaseapp.com/)
[![Twitter](https://img.shields.io/twitter/url/https/github.com/ikismail/Angular-ShoppingCart.svg?style=social)](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2Fikismail%2FAngular-ShoppingCart)

Developing a **ShoppingCart (Ecommerce) Application using Angular-10**.

**Live Demo** : [Angular-shopping-cart](https://angular-shoppingcart.firebaseapp.com/)

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.1.

## Functionalities

1.  User Registration using Firebase Authentication (using Email/Password | Google Authentication )
2.  CRUD Operations like

- User can add product to his cart.
- Admin can add product to the product list
- Admin can edit/delete the product.

3. Drag and Drop `Angular Drag & Drop`

- Implemented [Angular Drag and Drop CDK](https://material.angular.io/cdk/drag-drop/overview)

1.  Security

- Implmented Authentication and Authorization

## Tools and Technologies

- Technology: HTML, MDBootstrap, CSS, Angular-10, Firebase, i18n, Drag & Drop, Progressive Web Application, jsPDF (to download Receipt as PDF).
- Database : Angular Firebase (Realtime Database).

#### This Projects covers all fundamentals of Angular

- Multiple Modules
- Components, Template and DataBinding
- Form Validation
- HttpClient
- Animations
- Dependency Injection
- Routing & Navigation
- Service Workers
- Pipes
- Gaurds etc..

# Installation

1.  Angular CLI
    - [Download Angular CLI](https://cli.angular.io/)
2.  NodeJs
    - [Download Nodejs](https://nodejs.org/en/download/)
3.  Package Manager - NPM / Yarn
4.  Clone the repository and run `npm install` if you use **npm** as package manager or `yarn install` if you use **yarn** as package manager.
5.  Angular + Firebase Tutorial - [Angular + Firebase + Typescript — Step by step tutorial](https://medium.com/factory-mind/angular-firebase-typescript-step-by-step-tutorial-2ef887fc7d71)
6.  Activate Firebase Authentication Providers

`Authentication -> Sign-in-method -> Enable Email/Password & Google provider`

7.  Update the Firebase _(Realtime Database)_ Rules

`Database -> Rules`

```
    {
    "rules": {
        ".read":true,
        ".write": true
    }
    }
    ```

8.  Configure your firebase configuration `src/environments/firebaseConfig.ts`

```
    export const FireBaseConfig = {
        apiKey: "YOUR_API_KEY",
        authDomain: "YOUR_AUTH_DOMAIN",
        databaseURL: "YOUR_DATABASE_URL",
        projectId: "YOUR_PROJECT_ID",
        storageBucket: "YOUR_STORAGE_BUCKET",
        messagingSenderId: "YOUR_SENDER_ID"
    };
    ```

<!-- 9.  For Admin Role `Register or SignIn with Google Auth`

your registered data will be saved inside the firebase **clients** table.

```
        -clients
            -LRSkWxGAKQAFZmyfsx6
                -createdOn: "1542046725"
                -email: "<<YOUR_REGISTERED_EMAIL_ID>>"
                -isAdmin: false      <--- Change this to true
                ...
    ```

Now you can able to access the Admin Privileges like `Creating Product, Removing Product, etc..` -->

9. Import Products json to realtime database [Products JSON](https://github.com/ikismail/Angular-ShoppingCart/blob/master/products.json)

![alt text](https://github.com/ikismail/Angular-ShoppingCart/blob/master/screenshots/image.png "Products JSON Structure")

10. Run the Server.

## How can I support the developer ?

- Star my Github repo ⭐
- Create pull requests, submit bugs, suggest new features or documentation updates 🛠

## Screenshots:

### Home Page:

![Alt text](https://github.com/ikismail/Angular-ShoppingCart/blob/master/screenshots/home.PNG "Home Page")

### Products Page:

![Alt text](https://github.com/ikismail/Angular-ShoppingCart/blob/master/screenshots/products.PNG "Home Page")

### Work Board Page:

![Alt text](https://github.com/ikismail/Angular-ShoppingCart/blob/master/screenshots/drag&drop.PNG "Home Page")

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

## Somethings wrong!!

- If you find that something's wrong with this package, you can let me know by raising an issue on the GitHub issue tracker

## License

This project is licensed under the MIT License - see the [MIT license](https://github.com/ikismail/Angular-ShoppingCart/blob/master/LICENSE) file for details