How to create simple online shop.

In this course we create Cart Widget that can be embedded into sites in order to allow its users to buy products and send orders to site owner.

You'll learn how to:

  • Quickly prototype User Interface with Twitter Bootstrap.
  • Build REST API using NodeJS.
  • Use REST API in Browser with JavaScript.
  • Keep markup and code clean using Client Side Templates.
  • Simplify CSS styling using Browser live refresh.
  • Create dynamic Forms with JavaScript and validate it.
  • Instant reaction UI without blocking, waiting and progress.
  • Localisation to multiple languages.

Additionally you'll also learn how to:

  • Build simple product from the scratch.
  • Draw a Prototype using Paper and Pencil.
  • Deliver project to the production using Cloud Provider.

FAQ

Q&A

Q&A forum.

Why no Backbone.js or other Client-Side MVC?

Because it would be a mistake to use it in this case. This is relatively simple Application and in this case MVC is overkill and only complicates our code without any advantage.

By Alexey Petrushin

Drawing UI

Take blank page and pen and draw skeleton of your application, don't draw details draw only the big features.

Drawing simple shop without Cart Widget and with Cart Widget opened.

Shop and Cart Widget

Drawing different states of Cart Widget.

Read more ...

HTML Mockups

I will use Twitter Bootstrap styles for the first version of the project. We'll create HTML & CSS mockups of Cart Widget.

Cart Widget with Items

Strictly speaking it's not very good choice because JS and CSS resources that come with Bootstrap weights a lot and require jQuery. And because our Cart Widget should be embeddable in variety of different sites and be small and fast it's not a good thing. Creating it from the scratch and using native DOM API would be a better choice.

But, there's a huge reason for using Bootstrap - because I need to test my idea about this Cart Widget

Read more ...

Implementation

Code https://github.com/alexeypetrushin/salejs this version marked with tag 3-implementation

Adding Stub for Shop for Development. We already have a stub, but its used for mockups, we need also another stub, for Development.

Adding basic server to serve static assets for Cart Widget.

Adding Asset loading system for Cart Widget.

Read more ...

3-4 Deployment and Documentation

You can see finished version on http://salejs.com

Writing this tutorial takes time, but it seems nobody interested.

I'll finish 3 and 4 parts of this tutorial when there will be 50 stars for this project on GitHub.

Please star if you are interested to see rest of it.