{"id":16192457,"url":"https://github.com/kirandash/bg-ecommerce","last_synced_at":"2026-05-09T03:39:18.738Z","repository":{"id":100516880,"uuid":"182376766","full_name":"kirandash/BG-Ecommerce","owner":"kirandash","description":null,"archived":false,"fork":false,"pushed_at":"2019-05-05T09:53:36.000Z","size":185,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-13T17:35:58.634Z","etag":null,"topics":["angular","firebase"],"latest_commit_sha":null,"homepage":"https://ng-ecommerce-42b67.firebaseapp.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kirandash.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-20T07:46:28.000Z","updated_at":"2023-06-12T02:18:44.000Z","dependencies_parsed_at":"2023-05-15T16:15:45.382Z","dependency_job_id":null,"html_url":"https://github.com/kirandash/BG-Ecommerce","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirandash%2FBG-Ecommerce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirandash%2FBG-Ecommerce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirandash%2FBG-Ecommerce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirandash%2FBG-Ecommerce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kirandash","download_url":"https://codeload.github.com/kirandash/BG-Ecommerce/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247675609,"owners_count":20977378,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","firebase"],"created_at":"2024-10-10T08:10:03.011Z","updated_at":"2026-05-09T03:39:13.718Z","avatar_url":"https://github.com/kirandash.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NgEcommerce\n\n## 1. Requirements:\nInstall node. Check: node --version\nInstall npm. (comes as a package with node) npm --version\nInstall angular cli: npm install -g @angular/cli Check: ng --version\n\n## 2. Creating project, Running it on server\nng new ng-ecommerce\ncode .\nng serve\n\n## 3. Setting up Firebase\nCreate a firebase account. It's free and go to https://console.firebase.google.com\nClick on \"Add Project\"\nGive Project name : BG-Ecommerce\nClick on \"Add Firebase to your web app\".\nCopy the config properties from firebase project to our application's environment.ts and environment.prod.ts file.\n\n## 4. Installing Dev Dependencies\nnpm i --save firebase angularfire2\ncheck versions in package.json (\"angularfire2\": \"^5.1.2\", \"firebase\": \"^5.10.0\")\n\n## 5. Installing bootstrap\nnpm i --save bootstrap\nImort in styles.css\n\n## 6. Creating navbar from bootstrap starter template\nhttps://getbootstrap.com/docs/4.3/examples/starter-template/\n\n## 7. Creating navbar component\nng g c navbar --dry-run\nng g c navbar\n\n## 8. Create components for pages\ncommon: front page, cell phones page, cart page, checkout page, thank you page\nng g c common/front, ng g c common/cell-phones, ng g c common/cart, ng g c common/checkout, ng g c common/thank-you\nuser: My purchases page, \nng g c user/my-purchases\nseller: cell phones page, delivery page\nng g c seller/seller-cell-phones, ng g c seller/delivery\n\n## 9. Setting up routes\nRouterModule.forRoot([{ path: '', component: FrontComponent }])\nrouterLink, router-outlet\n\n## 10. Installing ng-bootstrap for js components of bootstrap \u0026 creating a dropdown functionality\nnpm i --save @ng-bootstrap/ng-bootstrap\nWe included just bootstrap css so far. But for the js components we need to install another package called ng-bootstrap.\nThis has directives for generating bootstrap components like dropdown items etc that can be used with angular.\n\n## 11. Creating user and seller dropdowns\n\n## 12. Adding cursor pointer to dropdown link\n\n## 13. Firebase Deployment\nnpm i -g firebase-tools\ncheck: firebase --version\nOpen command line of windows. Go to D:/projects/ng-ecommerce/\nfirebase signin from Windows command line. (Git bash does not work) It will open a prompt in browser. signin with your gmail account.\nfirebase init\nselect hosting from the options and hit enter.\nEnter dist/ng-ecommerce as the directory for deployment instead of public\nenter No for rewriting index.html options\nMake sure it is reflected in firebase.json file.\n\nBuild project. With npm build --prod\nDeploy to firebase: firebase deploy\nCheck the deployed app at https://ng-ecommerce-42b67.firebaseapp.com/\n\n## 14. Set up Google Authentication \u0026 create signin component\nhttps://console.firebase.google.com\nFor project ng-ecommerce\nSelect Authentication\nEnable Google Authentication\n\nCreate signin component\nng g c common/signin\n\n## 15. Creating signin authentication\nAfter signin in user details with email and user id get saved in firebase under users information\n\n## 16. Signout\nAngularFireAuth\n.auth.signOut()\n\n## 17. Changing signin text and adding cursor pointer to signout link\n\n## 18. Conditions to show signin and signout links \u0026 showing username\nuser.displayName\n\n## 19. Asynchronously subscribing and unsubscribing to firebase observable\nAny observable we are subscribing to should be unsubscribed. \nSolutions: 1. Call unsubscribe method on onDestroy lifecycle of component or\n2. Instead of subscribing to the observable, declare it in component and then use it's value with async pipe in component.html. (Best solution)\n\n## 20. ngIf else and ng-template for sign in and out\n\n## 21. Create auth service - Loose coupling by separating service from component\nSo far we added the sign in and sign out service in component. But it makes things difficult while testing. So better to avoid tight coupling and move service to a new file thus, while testing we can fake these auth services instead of providing actual data\nng g s services/auth\nAdd the service in providers for app.module\n\n## 22. Moving sign in sign out and user details to service from component\n\n## 23. Creating AuthRouteGuardService to protect checkout route\n\n## 24. Route Guard with canActivate\ncanActivate, router.navigate, .pipe(map)\n\n## 25. Redirecting to previous page after signing in\nRouterStateSnapshot \u0026 query params\nIMPORTANT: \nNote that subscribe events in app.component.ts does not need to be unsubscribed becaused everything on app.component loads only once with our app. But for the dynamic components inside our app that can get called multiple times while we navigate, we should unsubscribe any existing observables. Otherwise it keeps on getting subscribed multiple times thus causing MEMORY LEAKS!!!\n\n## 26. Create user service\n\n## 27. Saving signed in user data into database\nhttps://console.firebase.google.com\nGo to database url mentioned in environment.ts\nhttps://ng-ecommerce-42b67.firebaseio.com\nGo to Rules:\n{\n  \"rules\": {\n    \".read\": \"auth != null\",\n    \".write\": \"auth != null\"\n  }\n}\nChange the authentication rules so that we can access the database from our Angular app.\nAfter signing in, you can check that the data is now stored in database.\n\n## 28. Setting seller role for user\nGo to database, users, under user id add new property isSeller: true\nTo differentiate between normal user and a seller\n\n## 29. Route Guard for Seller - Create service files\nng g s services/seller-auth-route-guard\n\n## 30. Set Route Guards for Seller\nprovide SellerAuthRouteGuardService in provider for app.module.ts\nAfter adding the route guard, modify isSeller in database. We won't be able to navigate to seller pages\n\n## 31. Hiding Seller dropdown for non seller\nNote that we have nested observables for switchMap and map in seller route guard and auth service. Thus async pipe in navar html will create an infinite loop to hang.\n\n## 32. Adding Null check for switchMap and subscribe\nof from rxjs\n\n## 33. Firebase Deployment (Repeat Step 13)\nBuild project. With npm build --prod (Note that we got an error here for navbar component where private var was declared. changed to public)\nDeploy to firebase: firebase deploy\nCheck the deployed app at https://ng-ecommerce-42b67.firebaseapp.com/\n\n## 34. Create seller cell phone form component\n\n## 35. Build Seller form HTML and add navigation\n\n## 36. Adding Brands to DB and creating Brand Service\nCreate brands in firebase db. (following db.json file)\nCreate brand service and add it to providers for app.module.ts\n\n## 37. Brand Service\nQuerying brands from firebase\n\n## 38. Setting ngModel for our Template driven form\nuse ngModel directive after importing FormsModule in app.module.ts\n\n## 39. Create Phone Service to save phone data in db\n\n## 40. Save phone data in db\nuse database.list('/cellphones').push(cellphone)\nand check database after saving\n\n## 41. Add mandatory validations\nrequired, #var = \"ngModel\", #var.touched \u0026\u0026 #var.invalid\n\n## 42. ng2-validation package for custom validation\nhttps://github.com/yuyang041060120/ng2-validation\nnpm install ng2-validation --save\n\n## 43. Show preview of entered data\nUse two way binding with template variables for inputs\n\n## 44. Fetching all phones\nthis.database.list('/cellphones').valueChanges();\nand ngFor with async pipes","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkirandash%2Fbg-ecommerce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkirandash%2Fbg-ecommerce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkirandash%2Fbg-ecommerce/lists"}