↓Skip to main content
Resources for the Modern Web Resources for the Modern Web
  1. All Posts/

AngularEcommerceRestApi

eCommerce TypeScript

AngularShopApp

Table of Contents

  • Introduction
  • Full-stack Applications

    • E-commerce (shopping cart)

      •   <li>
    <a rel="nofollow noopener" target="_blank" href="#blogcms">Blog/CMS</a></p> <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="#server-side-implementations-1">Server side implementations</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="#client-side">Client side</a></p> <ul dir="auto">
          <li>
            <a rel="nofollow noopener" target="_blank" href="#the-next-come-are">The next come are</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  
  <li>
    <a rel="nofollow noopener" target="_blank" href="#simple-crudcreate-read-update-delete">Simple CRUD(Create, Read, Update, Delete)</a></p> <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="#server-side-implementations-2">Server side implementations</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="#client-side-implementations-1">Client side implementations</a></p> <ul dir="auto">
          <li>
            <a rel="nofollow noopener" target="_blank" href="#the-next-come-are-1">The next come are</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  
  <li>
    <a rel="nofollow noopener" target="_blank" href="#crud--pagination">CRUD + Pagination</a></p> <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="#server-side-implementations-3">Server side implementations</a></p> <ul dir="auto">
          <li>
            <a rel="nofollow noopener" target="_blank" href="#the-next-come-are-2">The next come are</a>
          </li>
        </ul>
      </li>
      
      <li>
        <a rel="nofollow noopener" target="_blank" href="#client-side-implementations-2">Client side implementations</a></p> <ul dir="auto">
          <li>
            <a rel="nofollow noopener" target="_blank" href="#the-next-come-are-3">The next come are</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
    • Follow me

    AngularShopApp

    This shopping cart application is built using Angular, it is supposed to work with any of these servers listed below. Be warned that
    while making this app I am using this Spring Boot Server so I strongly encourage you
    to use that as well, all the other servers worked from postman, but I don’t know If they return in the response something called differently that
    this app can not read, so if this redux app does not work, that is the reason, just a typo in a response variable, let me know about any typos
    in any of the server apps and I will try to fix it.

    Full-stack Applications

    E-commerce (shopping cart)

    Server side implementations

    • Spring Boot + Spring Data Hibernate
    • Spring Boot + JAX-RS Jersey + Spring Data Hibernate
    • Node Js + Sequelize
    • Node Js + Bookshelf
    • Node Js + Mongoose
    • Python Django
    • Flask
    • Golang go gonic
    • Ruby on Rails
    • AspNet Core
    • Laravel

    The next to come are:

    • Spring Boot + Spring Data Hibernate + Kotlin
    • Spring Boot + Jax-RS Jersey + Hibernate + Kotlin
    • Spring Boot + mybatis
    • Spring Boot + mybatis + Kotlin
    • Asp.Net Web Api v2
    • Elixir
    • Golang + Beego
    • Golang + Iris
    • Golang + Echo
    • Golang + Mux
    • Golang + Revel
    • Golang + Kit
    • Flask + Flask-Restful
    • AspNetCore + NHibernate
    • AspNetCore + Dapper

    Client side implementations

    This client side E-commerce application is also implemented using other client side technologies:

    • React Redux
    • React
    • Vue
    • Vue + Vuex
    • Angular

    Blog/CMS

    Server side implementations

    • Spring Boot + Spring Data Hibernate
    • Go + Gin Gonic
    • NodeJs + Mongoose
    • Laravel
    • Ruby on Rails + JBuilder
    • Django + Rest-Framework
    • Asp.Net Core
    • Flask + Flask-SQLAlchemy

    The next to come are:

    • Spring Boot + Spring Data Hibernate + Kotlin
    • Spring Boot + Jax-RS Jersey + Hibernate + Kotlin
    • Spring Boot + mybatis
    • Spring Boot + mybatis + Kotlin
    • Asp.Net Web Api v2
    • Elixir
    • Golang + Beego
    • Golang + Iris
    • Golang + Echo
    • Golang + Mux
    • Golang + Revel
    • Golang + Kit
    • Flask + Flask-Restful
    • AspNetCore + NHibernate
    • AspNetCore + Dapper

    Client side

    • Vue + Vuex
    • Vue
    • React + Redux
    • React
    • Angular

    The next come are

    • Angular NgRx-Store
    • Angular + Material
    • React + Material
    • React + Redux + Material
    • Vue + Material
    • Vue + Vuex + Material
    • Ember

    Simple CRUD(Create, Read, Update, Delete)

    Server side implementations

    • Spring Boot + Spring Data Hibernate
    • Spring boot + Spring Data Reactive Mongo
    • Spring Boot + Spring Data Hibernate + Jersey
    • NodeJs Express + Mongoose
    • Nodejs Express + Bookshelf
    • Nodejs Express + Sequelize
    • Go + Gin-Gonic + Gorm
    • Ruby On Rails
    • Ruby On Rails + JBuilder
    • Laravel
    • AspNet Core
    • AspNet Web Api 2
    • Python + Flask
    • Python + Django
    • Python + Django + Rest Framework

    Client side implementations

    • VueJs

    The next come are

    • Angular NgRx-Store
    • Angular + Material
    • React + Material
    • React + Redux + Material
    • Vue + Material
    • Vue + Vuex + Material
    • Ember
    • Vanilla javascript

    CRUD + Pagination

    Server side implementations

    • Spring Boot + Spring Data + Jersey
    • Spring Boot + Spring Data
    • Spring Boot Reactive + Spring Data Reactive
    • Go with Gin Gonic
    • Laravel
    • Rails + JBuilder
    • Rails
    • NodeJs Express + Sequelize
    • NodeJs Express + Bookshelf
    • NodeJs Express + Mongoose
    • Python Django
    • Python Django + Rest Framework
    • Python Flask
    • AspNet Core
    • AspNet Web Api 2

    The next come are

    • NodeJs Express + Knex
    • Flask + Flask-Restful
    • Laravel + Fractal
    • Laravel + ApiResources
    • Go with Mux
    • AspNet Web Api 2
    • Jersey
    • Elixir

    Client side implementations

    • Angular
    • React-Redux
    • React
    • Vue + Vuex
    • Vue

    The next come are

    • Angular NgRx-Store
    • Angular + Material
    • React + Material
    • React + Redux + Material
    • Vue + Material
    • Vue + Vuex + Material
    • Ember
    • Vanilla javascript

    Social media links

    • Youtube Channel I publish videos mainly on programming
    • Blog Sometimes I publish the source code there before Github
    • Twitter I share tips on programming

    TODO

    • Filter by category and tag dropdown
    • Wish-list
    • Admin Feature
    • Add Tags/Categories on Product Create
    • Rating on comments
    • Country flags
    • Credit card UI
    • Authorization before route

    This project was generated with Angular CLI version 7.0.2.

    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.



↑