create an E-Commerce Site with angularjs

In this Tutorial, we are going to build an eBay-style e-commerce store that we will call Garage Commerce. It will be a store where users can upload and list items they would usually put up for a Garage Sale. Authenticated users can browse through the products and buy them.

Some of the interesting topics that we will cover are as follows:

  • Using AWS DynamoDB and S3 to store our product information
  • Using Facebook login and AWS’s Web Identity Federation to authenticate users
  • Using the UI-Router to build nested views

As one would know, building an e-commerce store requires some heavy backend coding and extensive interactions with a database. A couple of years back, the thought of building an e-commerce store using just client-side scripts would have sounded quite absurd. However, thanks to a new breed of BaaS services, it is now possible to build a full-fledged e-commerce store just using JavaScript.

Backend as a Service

Backend as a Service (BaaS), sometimes also referred to as Mobile Backend as a Service (MBaaS), is quickly gaining popularity as it helps application developers to quickly build client-side or mobile applications without having to worry about the database or server-side part of the application.

Some of the popular BaaS services are as follows:

  • Parse (https://parse.com/)free
  • Firebase (https://www.firebase.com/)free
  • Kinvey (http://www.kinvey.com/) free/trial
  • AWS (http://aws.amazon.com/) free for 1 year

Besides providing APIs to perform CRUD and query operations on a database, most of these BaaS offer additional benefits such as easier OAuth sign on using Facebook and Google.

Firebase is a nice tool that automatically syncs data across all connected devices. AngularFire is a helper library that makes it easy to integrate Firebase with angularjs.

While AWS does not project itself as a BaaS provider, one can make use of a combination of its various services to work like a BaaS.

 

 

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

  • Gauthugesh V

    is there any sample demo link so that we can have a preview?

    • Deven Rathore

      i will forward this message ! to my team .. we will update some screenshots i guess !

  • Hassan Terab

    Hi,

    thanks for the nice tutorial, but i have a problem with “AWSservice provider” i’m not sure, where to add it exactly, and how to add it, could please show full .JS file, where it should be added ?

    • Deven Rathore

      you hav to install angularjs before .. going throigh this tutorial .. if you are new here are much stuffs you should learn http://www.dunebook.com/category/angularjs/

      • Hassan Terab

        yeah, i’m new to AngularJs, i already installed AngularJs, and everything works fine till the “add new Product”, show products, facebook login works

        my questions was where to add those functions “saveProductData: function(newProduct), getProductsByCategory”, . should those functions be added in the “services.js” ? if yes can you please show a full “services.js”, that would be very helpful

  • Frank Wang

    HI, thanks for the useful article!

    I have 2 questions!

    1.Does this article miss the aws-sdk set up part?
    I do check the aws-js-sdk , but do i need put it in bower.json or somewhere?

    Because when I read the page 6, it need to create some function to add data to DynamoDB tables, but I don’t know where to put those functions!

    2.the facebook need a public domain to test, right ?

    BTW, the other part runs well! Thanks

    • Frank Wang

      Ha..I just find out @hassanterab:disqus already asked this question :p

      • Deven Rathore

        i have forwarded this message to post author … i guess w’ll update article ASAP

        • Frank Wang

          Thank you

  • Pingback: Create Shopping Cart with angularjs()

  • Pingback: Add facebook , Twitter and google authentication In angularjs | Dunebook - Learn Laravel , Angularjs , PHP Frameworks , Javascript and Ruby()

  • Pingback: Stopping malicious attacks and hacks In Angularjs()

  • Pingback: Doing Best coding practices AngularJS()

  • Pingback: Complete Guide to Angular 2 forms()

  • Pingback: create an E-Commerce Site with angularjs – AngularJS News()

  • thomas

    Is there a link with for sourcecode?

Pin It on Pinterest

Shares