Skip to main content
  1. All Posts/

angular-ecommerce

eCommerce TypeScript

AngularSpree Plug and play frontend application for SPREE E-Commerce API built with ❤️ using Angular2, Redux, Observables & ImmutableJs.

Check demo | Docs

🚀 Progressive Web App: Lighthouse score of 95/100.

What is AngularSpree?

AngularSpree is an open source Angular(2.x+) front-end application for Spree Commerce.
It’s free and always will be.
Bootstrap 4 Compatible
Go ahead use it the way you want to or let us know at hello@aviabird.com if you need any help with this project.

Why did we build it?

We have been working with Spree for very long time, making products for a lot of clients. There was one pattern we noticed in what the clients always asked for. They were comfortable using spree for the backend API but not for the front-end. These requests have been very consistent with so many awesome front-end framework around.
When Angular team realeased the beta version in March last year we knew that angular was going to be a big player soon.
We decided to give it a try. Hence, AngularSpree was born as a front-end framework for the most awesome backend api for E-Commerce out there.
🔥🔥🔥🔥🔥🔥🔥🔥🔥
If you are looking to build a project similar to this one with all the ready-made setup, then I highly encourage you to look at this starter seed project by Aviabird Team.
AngularSeed is a Plug and play Seed project built with ❤️ using Angular 5, Redux/ngrx-store 4, Observables & ImmutableJs. We are commited to keeping this project upto date with all the latest versions of all the libs and components.
🔥🔥🔥🔥🔥🔥🔥🔥🔥

What’s included?

Currently, this is a fairly basic vesion of the application. We are calling it a pre-alpha release.

What’s working and ready to be deployed?

  • Add/Remove products to cart.
  • Select/Clear filters based on category.
  • Support for product variants.
  • Cart checkout feature.
  • Cash on delivery option.
  • Authentication (Login/Signup)

What’s coming very soon?

  • Angular Universal support for better SEO and much more.
  • Payment options credit/debit cards.
  • Multilanguage Support i18n.
  • More sorting features(new/popular, Discount, Price[low,high]).
  • Support for further types of products(size, pattern, collar, etc).
  • Support for further options in types eg. size(32, 34, 36) etc. etc.
  • Ability to add more than one addresses.
  • and many more….

There is a long way to go… keep an eye on this project here on github.

Angular 2 Fundamentals course

Based on this application and other applications we have built in past we are working on a full blown Angular 2 fundamentals course on udemy. Throughout this course you’ll learn how to build yatrum from ground up.

Course curriculum

  • Architecture, setup, source files
  • TypeScript basics
  • Getting started with latest angular
  • Template fundamentals
  • Rendering flows
  • Component Architecture and Modules
  • Services, Http and Observables
  • Template Forms, Inputs and Validation
  • Reactive Forms and more magic
  • Routing

Subscribe to this course here

What in the Tech News?

We’ve built AngularSpree keeping scaling in mind leveraging the best technologies out there.
As of now, the application has 7 major modules, products, core, home, user, checkout, auth, shared.
We are working on documentation and we can share that once we are looking at a more stable release.

  • Exclusively using @ngrx libraries(store, effects, actions), showcasing common patterns and best practices.
  • Fully Observable approach using RxJS 5.0.1(latest beta).
  • Uses @ngrx/store to manage the state of the app and to cache requests made to the Backend API,
  • @angular/router to manage navigation between routes,
  • @ngrx/effects to isolate side effects.
  • @ngrx/actions to define the actions on the frontend.
  • Following Container/Presentation component approach.
  • Lazy loading of modules(for modules which are not immediately required for first painting the DOM).
  • ImmutableJs to create and safeguard objects againts mutability.
  • Project is divided into modules which are more or less independant of each other except core module.

Current version of Angular is latest release 4.0.0.
Current version of Angular-cli is 1.0.0.
We try to make sure that we keep the repository upto date with the angular release every weekend.

Screenshots

Home Page

On this page user can filter products as per category. Change layout of the products(cozy, comfortable) etc.

<p>
  </a>
</p>

<h3 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-cart-page" class="anchor" aria-hidden="true" href="#cart-page"></a>Cart Page
</h3>

<p>
  Cart page displays all the line items or items in the cart which the user has added while browsing the website.
</p>

<p>
  <a rel="nofollow noopener" target="_blank" href="https://angularspree.firebaseapp.com/"></p> 
  
  <p>
    </a>
  </p>
  
  <h3 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-product-detail-page" class="anchor" aria-hidden="true" href="#product-detail-page"></a>Product detail page
  </h3>
  
  <p>
    Display&#8217;s the detailed product information of a particular product.
  </p>
  
  <p>
    <a rel="nofollow noopener" target="_blank" href="https://angularspree.firebaseapp.com/"></p> 
    
    <p>
      </a>
    </p>
    
    <h3 dir="auto">
      <a rel="nofollow noopener" target="_blank" id="user-content-package-manager-yarn" class="anchor" aria-hidden="true" href="#package-manager-yarn"></a>Package Manager <a rel="nofollow noopener" target="_blank" href="https://yarnpkg.com/en/">Yarn</a><br />
    </h3>
    
    <p>
      We are using Yarn as a package manager in this project though you can also use <code>npm</code> if you like to.
    </p>
    
    <h2 dir="auto">
      <a rel="nofollow noopener" target="_blank" id="user-content-backend-for-this-project" class="anchor" aria-hidden="true" href="#backend-for-this-project"></a>Backend for this project?
    </h2>
    
    <p>
      **Start the API for this project to work successfully.<br /> We have a very thin and custom repo which is the backend for this project.<br /> Clone it and run the server. We have updated the readme on how to setup the backend API project.
    </p>
    
    <h2 dir="auto">
      <a rel="nofollow noopener" target="_blank" id="user-content-contributing-to-angularspree" class="anchor" aria-hidden="true" href="#contributing-to-angularspree"></a>Contributing to AngularSpree
    </h2>
    
    <p>
      Where to start<br /> There are many different ways to contribute to AngularSpree&#8217;s development, just find the one that best fits with your skills. Examples of contributions we would love to receive include:
    </p>
    
    <ul dir="auto">
      <li>
        Code patches
      </li>
      <li>
        Documentation improvements
      </li>
      <li>
        Translations(yet to come)
      </li>
      <li>
        Bug reports
      </li>
      <li>
        Patch reviews
      </li>
      <li>
        UI enhancements
      </li>
    </ul>
    
    <p>
      Big features are also welcome but if you want to see your contributions included in AngularSpree&#8217;s codebase we strongly recommend you start by initiating a chat on our <strong><a rel="nofollow noopener" target="_blank" href="https://angular-spree.herokuapp.com/">slack channel</a></strong>.
    </p>
    
    <h2 dir="auto">
      <a rel="nofollow noopener" target="_blank" id="user-content-development-server--mock-api" class="anchor" aria-hidden="true" href="#development-server--mock-api"></a>Development server & Mock Api
    </h2>
    
    <p>
      Run <code>npm start-mock</code> for a dev server with &#8216;mock&#8217; api. Navigate to <code>http://localhost:4200/</code>. The app will automatically reload if you change any of the source files and will fetch data from mock api;
    </p>
    
    <h2 dir="auto">
      <a rel="nofollow noopener" target="_blank" id="user-content-development-server" class="anchor" aria-hidden="true" href="#development-server"></a>Development server
    </h2>
    
    <p>
      Run <code>npm start</code> for a dev server. Navigate to <code>http://localhost:4200/</code>. The app will automatically reload if you change any of the source files.
    </p>
    
    <h2 dir="auto">
      <a rel="nofollow noopener" target="_blank" id="user-content-development-server-with-service-worker" class="anchor" aria-hidden="true" href="#development-server-with-service-worker"></a>Development server with Service Worker
    </h2>
    
    <p>
      Run <code>npm run build--prod</code> to build in production with service worker pre-cache and then <code>npm run static-serve</code> to serve.
    </p>
    
    <h2 dir="auto">
      <a rel="nofollow noopener" target="_blank" id="user-content-build-with-service-worker" class="anchor" aria-hidden="true" href="#build-with-service-worker"></a>Build with Service Worker
    </h2>
    
    <p>
      Run <code>npm run build</code> to build the project. The build artifacts will be stored in the <code>dist/</code> directory. Use the <code>npm run build--prod</code> for a production build.
    </p>
    
    <h2 dir="auto">
      <a rel="nofollow noopener" target="_blank" id="user-content-who-are-we" class="anchor" aria-hidden="true" href="#who-are-we"></a>Who are we?
    </h2>
    
    <p>
      We are <a rel="nofollow noopener" target="_blank" href="https://aviabird.com">Aviabird Technologies</a>.<br /> <strong>We love to create awesome Web & Mobile products.</strong><br /> <strong>We are very proud of our work.</strong><br /> We love technologies like Golang, Elixir, Scala, Ruby, Javascript, Typescript, Swift, Java.<br /> We love some frameworks too:-
    </p>
    
    <ul dir="auto">
      <li>
        Ruby On Rails
      </li>
      <li>
        Phoenix/Elixir framework.
      </li>
      <li>
        Spring framework.
      </li>
      <li>
        AngularJs (1.x+ & 2.x+)
      </li>
      <li>
        ReactJs
      </li>
      <li>
        BackboneJs
      </li>
    </ul>
    
    <h3 dir="auto">
      <a rel="nofollow noopener" target="_blank" id="user-content-we-are-avialible-for-hire" class="anchor" aria-hidden="true" href="#we-are-avialible-for-hire"></a>We are avialible for hire
    </h3>
    
    <p>
      <strong>If you want to hire us for a project, please contact us on <code>hello@aviabird.com</code>.</strong>
    </p>