Angular-ShoppingCart - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #llm #go #android #deep-learning #docker #macos #nodejs #vue #pytorch #ios #mcp #openai

Angular-ShoppingCart

(★ 618)

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

파일 탐색기

최종 버전 다운로드 (.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

// 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