Introducing AngularSpree
Open sourcing E-Commerce front-end application in Angular
UPDATE: AngularSpree is now a part of aviacommerce platform, It now integrates with aviacommerce api’s by default.
Demo links are available here.
At Aviabird Technologies we have been following Angular version 2.x+ for a long time now.
We got really excited about it way back in 2015 when we came across the newer version a rewrite of the version 1. We even experimented with it building an application. Things have changed a lot since then in angular world. Stable version came out in September last year. That is when we again got serious about it. I have written a piece about our Angular here.
There is something else we’ve been up to in past 2 months which I haven’t got time to write/share about with the community. We have created and open-sourced an E-Commerce application in Angular. We are calling it AngularSpree.
We are riding on the existing infrastructure of SpreeCommerce for backend which has helped plethora of e-commerce startups to get up and running. Hence the name. Hope it makes sense 😎. Got project name suggestion reach out to me on twitter. I haven’t spent much thinking about good names and I am pretty sure a better name for this project exists out there.
What is AngularSpree ?
An open-source front-end E-Commerce application which is built with latest Angular version(4.0.0) using ngrx-store, ngrx-effects, ngrx-actions, ImmutableJs etc.
We have followed the Redux pattern for managing state throughout the application.
For a detailed explanation check out the project README.
AngularSpree has 7 major modules, products, core, home, user, checkout, auth, shared.
You can find the documentation here.
Salient features and best practices used in AngularSpree.
- 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,
- Following Container/Presentation(smart/dumb) component approach.
- Lazy loading of modules(for modules which are not immediately required for first paint the DOM).
- ImmutableJs to create and safeguard objects against mutability.
- Project is divided into modules which are more or less independent of each other except core module(which is required by all other modules).
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.
What’s included in AngularSpree
Currently, this is a fairly basic version of the kind of e-commerce application which we envision to build.
What’s working and ready to be deployed?
- Select/Clear filters based on category.
- Support for product variants.
- Add/Remove products to cart.
- Cart checkout feature.
- Cash on delivery option.
- Authentication (Login/Signup)
What’s coming very soon?
- Active Merchant integration for payments(cards, services).
- Multi language Support i18n standard.
- More sorting features(new/popular, Discount, Price[low, high]).
- Support for further types of products(size, pattern, type, etc).
- Support for further options in types eg. size(32, 34, 36) etc. etc.
- Ability to adding multiple addresses.
- and many more.
Product Listing page
Features to filter items as per category and add to cart option and view details of the product.
Cart Page
Features place order and to remove and move to wishlist items preset in cart.
Product detail page
Features to select different sizes and colours as per multiple variants.
Community help
We have built this basic version but we have not settled here and want to keep building cool stuff with this as a base. We need community help with that.
Where to start?
There are many different ways to contribute to AngularSpree’s development, just find the one that best fits with your skills. Examples of contributions we would love to receive include:
- Code patches
- Documentation improvements
- Translations(yet to come)
- Bug reports
- Patch reviews
- UI enhancements
Big features are also welcome but if you want to see your contributions included in AngularSpree’s codebase we strongly recommend you start by initiating a chat on our slack channel.
Above all, we love when we get feedback on our work, we take criticism positively so don’t hesitate in letting us know if you don’t like anything and we’d love to address it. Likewise show some love by stargazing the project on Github and hitting the💚 button here on medium.
AVIACOMMERCE: OPEN SOURCE E-COMMERCE
Aviacommerce is an open source e-commerce framework with an aim to simplify e-commerce ecosystem by creating and unifying smart services and providing consistent, cost-effective solution to sellers helping them sell more. visit aviacommerce.org to know more.
If you liked this article, click the 💚 below so that it reaches more people her on medium.
For more musings about programming, follow me here or on twitter so you’ll get notified when I write new posts.
