Giter VIP home page Giter VIP logo

ikismail / angular-shoppingcart Goto Github PK

View Code? Open in Web Editor NEW
615.0 42.0 387.0 7.79 MB

ShoppingCart (Ecommerce) πŸ›’ Application using Angular10, Firebase, PWA, Drag&Drop, Materialized Bootstrap and i18n πŸš€πŸ”₯πŸ‘¨β€πŸ’»

Home Page: https://angular-shoppingcart.firebaseapp.com/

License: MIT License

TypeScript 48.64% JavaScript 1.30% HTML 39.28% Shell 0.09% SCSS 10.70%
angularshoppingcart shopping-cart ecommerce angular-shopping shoppingstore shopping-site angular firebase firebase-database pwa

angular-shoppingcart's Introduction

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

HitCount GitHub forks GitHub stars GitHub issues License: MIT npm Twitter

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

Live Demo : Angular-shopping-cart

This project was generated with 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.
  1. Drag and Drop Angular Drag & Drop
  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

  2. NodeJs

  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

  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"
    };
    
  1. Import Products json to realtime database Products JSON

alt text

  1. 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

Products Page:

Alt text

Work Board Page:

Alt text

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.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

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 file for details

angular-shoppingcart's People

Contributors

angular-cli avatar dependabot-support avatar ikismail avatar renovate-bot avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular-shoppingcart's Issues

After ng serve errors of firebase url

Error: FIREBASE FATAL ERROR: Cannot parse Firebase url. Please use https://.firebaseio.com
at fatal (index.cjs.js:334)
at parseRepoInfo (index.cjs.js:1256)
at RepoManager.push../node_modules/@firebase/database/dist/index.cjs.js.RepoManager.databaseFromApp (index.cjs.js:14987)
at Object.instance.INTERNAL.registerService.Reference [as database] (index.cjs.js:15328)
at FirebaseAppImpl.push../node_modules/@firebase/app/dist/index.cjs.js.FirebaseAppImpl._getService (index.cjs.js:134)
at FirebaseAppImpl. [as database] (index.cjs.js:323)
at database.js:23
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)

Possibilty to make the page wider

Hi, how is it possible to make the page wider? There are white bars on the left and right from the page.
Cant find the place to change it.

Thanks in advice.

cart

your cart is not working.

Pushing Favourite Product to firebase

addFavouriteProduct(data: Product): void {

	let a: Product[];

-->>> this.favouriteProducts.push(data);

	a = JSON.parse(localStorage.getItem('avf_item')) || [];
	a.push(data);
	this.toastrService.wait('Adding Product', 'Adding Product as Favourite');
	setTimeout(() => {
		localStorage.setItem('avf_item', JSON.stringify(a));
		this.calculateLocalFavProdCounts();
	}, 1500);
}

I was trying to push the favourite items of the users to the database. But I'm getting an error at the line I represented with an '-->'.. Could you please help me with that.

Seed data

The project currently seems empty.
How do I seed data in it?

loadChilldren

the problem is that is ERROR in cannot read property 'loadChildren' of undefined

Regarding admin user, i am not able to login as admin user to add products.

Hey Ismail,
I am working on your existing project and i am trying to extend it. First step i am trying to make it working and trying to understand the existing functionalities and next step would be how far i can extend it i can think on it.
But initially i am able to setup the project and firebase and i am able to login with normal user but not with the admin user , basically i want to login with admin panel and add the products.
Can you please help me here , how can i make login in the app as admin user and then add the products.

Npm installaton isue

i am trying to install npm but getting error

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: node-pre-gyp install --fallback-to-build --library=static_library
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

Payload error and some warnings

In console I get


 @firebase/database: FIREBASE WARNING: Using an unspecified index. Your data will be downloaded and filtered on the client. Consider adding ".indexOn": "email" at /clients to your security rules for better performance. 
a @ main.a411b3aefe2060069f37.js:1
main.a411b3aefe2060069f37.js:1 [2019-11-10T06:52:13.017Z]  @firebase/database: FIREBASE WARNING: Using an unspecified index. Your data will be downloaded and filtered on the client. Consider adding ".indexOn": "email" at /clients to your security rules for better performance. 



main.a411b3aefe2060069f37.js:1 ERROR TypeError: Cannot read property 'payload' of undefined
    at e._next (main.a411b3aefe2060069f37.js:1)
    at e.__tryOrUnsub (main.a411b3aefe2060069f37.js:1)
    at e.next (main.a411b3aefe2060069f37.js:1)
    at e._next (main.a411b3aefe2060069f37.js:1)
    at e.next (main.a411b3aefe2060069f37.js:1)
    at main.a411b3aefe2060069f37.js:1
    at e.invoke (polyfills.b7350c3d51914905fd2f.js:1)
    at Object.onInvoke (main.a411b3aefe2060069f37.js:1)
    at e.invoke (polyfills.b7350c3d51914905fd2f.js:1)
    at t.run (polyfills.b7350c3d51914905fd2f.js:1)

node version 10.13.0
cli version 7.1.1

Adding new user to firebase Authentication

HI,

App is loading and working fine, But doesn't have enough guide lines to setup the DB. more of Angular person, But firebase is new. But looks straight forward here. Its light weight and stright forward. Like it so far

1 . Creating new user, gets added to Authentication User, OAuth works fine too. But its not creating User table in Database, so that I can edit isAdmin variable.
2. Is there Json file for DB to import. It looks like you can import Json file into firebase DB. Can you share your DB json file. if possible
3. How does structure for all the tables need to be created.

Thanks

Filters

How have you filtered the product category wise? Can you explain please!

Firebase DB setup

Hi Sir,

I have downloaded this project for learning purpose. wanted to know if we need to create the tables in Firebase explicitly or it will get created automatically once we setup the firebase and run the application. i have created the clients table though as mentioned in the readme file. But I am still facing issue in loading the application and seeing below error.

image

Let me know.

Thanks and regards,
Kunal

Chage HTML title

Hi

First of all Thank you very much for the code, it helped me set up a store with only a few modifications.

I've been cracking my head about this one though, how to I change the HTML title, I changed the index.html title tag, but after a few seconds it goes back to Angular Shopping Cart, I've also changed the app.component.ts title, but it is not there

Where is the title being modified?

Thanks

Add payment gateway

Hi, thanks for developing and maintaining this project @ikismail
Do you have any documentation for adding payment gateway like razorpay or instamojo. I found a discussion in stackoverflow here. Found some here also.

error with Node Sass

Hi, I have the following error when compiling:

Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (67) For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.9.3

try to solve changing the "node-sass" in the package.json to a lower version but it did not work, it does not work either "npm rebuild node-sass"

work with node v11.0.0
any ideas?

[BUG] | Sign page

Hi Ismail,

I did the sign up with my google account, after successful sign-in, still sign up is showing.
image

[BUG] Firebase fatal error

I clone ur code and run 'ng serve' and then it had the error on the console like this:
[2020-08-22T10:39:51.853Z] @firebase/database: FIREBASE FATAL ERROR: Cannot parse Firebase url. Please use https://.firebaseio.com
and it showed me on the problem on this code:
var defaultLogHandler = function (instance, logType) {
var args = [];
for (var _i = 2; _i < arguments.length; _i++) {
args[_i - 2] = arguments[_i];
}
if (logType < instance.logLevel) {
return;
}
var now = new Date().toISOString();
var method = ConsoleMethod[logType];
if (method) {
console[method].apply(console, __spreadArrays(["[" + now + "] " + instance.name + ":"], args)); // particularly in this line
}
else {
throw new Error("Attempted to log a message with an invalid logType (value: " + logType + ")");
}
};
Do sb know what wrong with the code I clone or my set up???
Thank you.

PROJECT OVERVIEW

managed to clone the project but the products are not loading

core.js:1598 ERROR Error: permission_denied at /products: Client doesn't have permission to access the desired data.

core.js:1598 ERROR Error: permission_denied at /products: Client doesn't have permission to access the desired data.
at Object.push../node_modules/@firebase/database/dist/cjs/src/core/util/util.js.exports.errorForServerCode (util.js:513)
at onComplete (SyncTree.js:538)
at Object.onComplete (Repo.js:115)
at PersistentConnection.js:180
at PersistentConnection.push../node_modules/@firebase/database/dist/cjs/src/core/PersistentConnection.js.PersistentConnection.onDataMessage_ (PersistentConnection.js:435)
at Connection.push../node_modules/@firebase/database/dist/cjs/src/realtime/Connection.js.Connection.onDataMessage_ (Connection.js:262)
at Connection.push../node_modules/@firebase/database/dist/cjs/src/realtime/Connection.js.Connection.onPrimaryMessageReceived_ (Connection.js:256)
at PacketReceiver.onMessage_ (Connection.js:157)
at PacketReceiver.js:59
at Object.push../node_modules/@firebase/database/dist/cjs/src/core/util/util.js.exports.exceptionGuard (util.js:556)

Signin with Google

Hi, on the deployed web app, I tried to use the sign in with Google button but it did not succeed

Support for Firebase Cloud Firestore database

This request is for enhancement of backend Database model.

Firebase from Google offers two types of cloud-based client-accessible database solutions β€”

  1. Realtime Database
  2. Cloud Firestore

Cloud Firestore is a successor to the Realtime Database with a new and more intuitive data model. It is richer, faster, and more scalable having less pricing than the Realtime Database.

It would be really great if this project also supports Firebase Cloud Firestore database.

How to create a location search box with suggestions

Hi I'm working on a Assignment and I'm supposed to create a location search box with suggestions .on pressing enter the text box should be cleared and the entered data should be displayed below.
Could you please help me with this.

I've attached an sample image
assignment

payload

Hi, thanks for this great shoppingcart app. I am very happy about it. But I have a problem while building the app:

ERROR TypeError: Cannot read property 'payload' of undefined
at SafeSubscriber._next (best-product.component.ts:47)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:134)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at angularfire2.js:49
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Object.onInvoke (core.js:17289)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
please help

Why 'My Account/Your carts' link not working?

Hi..
It seems that the link for 'My Account/Your cart' and 'My Account /Your wishlist' does not work...

Code looks

        <li class="list-group-item hoverable">
          <a [routerLink]="['/users', {outlets: {'profileOutlet': ['cart-items']}}]">Your Cart</a>
        </li>

...
 <router-outlet name="profileOutlet"></router-outlet>

It supposes to show cart into profileOutlet I suppose.

Thanks.

Login Page

The login page doesn't direct to the product page after a successful login bu still stays on login page .

[BUG]unable to checkout products

after filing shipping details and clicking "continue to checkout" button not redirects to a confirmation page

Steps to reproduce the behaviour

  1. Go to 'cart'
  2. Click on 'checkout'
  3. Click on 'next'
  4. fill shipping details

Expected behaviour
need to go success page

Screenshot (62)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.