Angular-ShoppingCart - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #llm #android #machine-learning #rust #linux #java #awesome #pytorch #security #mcp #ios #open-source

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

# 설치 가이드

1. 코드 내려받기

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

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd Angular-ShoppingCart

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

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