Awesome

PLEASE NOTE: THIS PROJECT IS NOT MUCH MAINTAINED ANY MORE Currently, it's running on Angular 14.2.4. You may need to use Node v16.17.1, to get the NPM installation and build running. Also you probably need to use "$npm install --force" to force the very old ngx-siema dependency to behave.. it still runs tho.

CAS FEE PROJEKT 2 : SPA Shop Front End Implementation

Christian Zellweger (https://github.com/chzellweger)
André Abt (https://github.com/monobasic)

Check out this project online at http://shop.andre-abt.com Note: The pixelated product images are there because of image licensing reasons.

Installation

Clone repository

git clone git@github.com:monobasic/Angular-6-Demo-Shop.git

Install Angular-Cli globally

npm install -g @angular/cli

Install NPM packages

cd Angular-6-Demo-Shop
npm install

Run development server

ng serve

Runs a webpack-development server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Checkout the shop

Point your browser to localhost:4200. In any case the dev build is not working, there is an already built app available on http://shop.andre-abt.com for checking out. Deeplinking for the Angular router is handled via .htaccess config.

Run unit tests

ng test

Executes the unit tests via Karma.

Running end-to-end tests

ng e2e

Executes the end-to-end tests via Protractor.

Build app for prod

ng build --prod --build-optimizer

This builds the app for prod environment into a /dist folder. Uses the Angular-AOT-mode to precompile the the app. This reduces the app-footstep (compiler is around 1/3 of bundle).

Firebase Data Structure and Security Setup

There are demo json files in the data folder for you to check out.

Background

The initial idea for this project was to implement a SPA based shop frontend which can be coupled to existing shop backends via REST API. The performance of a SPA application would be very nice to make the shopping process for users as fluid as possible. Imagine adding items to the cart, browsing and filtering products, typeahead search, updating your favorites/wish list - all handled by the front end application.

Although this would have been cool, it's most likely a bit out of scope to provide all the API mappings for different shops like Shopify, Woocommerce, PrestaShop, Magento and the likes.

So we decided to implement basic shop functionality for now and base the project target more around finding conclusions for challenges we will face during the process.

Feature Set

Shop functionality

Shop Front Page

Featured Products with link to corresponding product detail page
Features for «New Arrivals», «On Sale» and «Best Rated» Products

Products

Products fetched from FireBase backend and cached for future requests
Sorting: Products can be sorted by date created, price and name
Products can be viewed in a grid or a list view
Products are shown paged via a PagingService
When logged in as a user with adminstrative rights, additional buttons are shown for product CRUD operations

Product CRUD

Add a new product
Edit existing product
Delete existing product
Images handled with Firebase Storage

Rating

Products can be rated by logged in users from 1 to 5
User can change his previous rating
Previous rating is reflected in the UI
Overall rating gets calculated and displayed instantly
Rating is updated in a reactive manner, even for cached products

Cart

Products can be added from the list/grid View or product detail view
Cart is handled via a CartService
Adding the same product multiple times, increases the amount in cart
Cart has a dedicated cart page and is visible as a dropdown widget as well
Quantity of each cart item can be adjusted via cart page
Cart can be cleared at once
Single products can be removed from cart
Subtotal and Totals will be calculated on the fly
Link to Checkout is available from both carts

Checkout

Prefill fields, if user is already logged in
Enter Address, Shipping Method and Payment Data with Validation
Show review of the order before final submit
When submitting a order, OrderService creates a new Order linked to the user
Anonymous Orders are possible too, in that case OrderService creates a new anonymous order
Order summary is shown in the sidebar during the checkout process

Authentication

Checkout: As registered user / guest
Sign up: Create user account
Log in: General login or during checkout
Role based authentication

Account

Create new shop user accounts
Login with existing user account
User Profile, Email, Password, Firstname, Lastname are updateable via account page
Order history is visible to logged in users
Role base authentication via Firebase, roles can be assigned to users like isAdmin

Orders

Checkout process generates Order for registered user or guest
Order / Confirmation Email for Shop/User/Guest
Orders can be viewed by logged in user

Security

FireBase Security Rules for Shop User / Admin

General

All displayed prices are handled via a PriceComponent to simplify currency display/formatting
Search with Typeahead functionality (Unfortunately, FireBase has very limited functionality for full text search. For a real application, local search would be the better option)

Custom Express/MongoDB Backend

Implementation started with a custom MEAN-architecture, which used a mLab-database. We switched to «serverless» with Firebase due to several reasons:

Backend not in the scope of this front-end-project and the CAS-FEE-task.
Firebase provides complete functionality set
Failure of knowledge-transfer between developers
mLab blocked in the HSR-network

The unfinished project can be found under: CAS-FEE-PROJEKT-2-CUSTOM-MEAN-BACKEND

Special Mentions

All product data changes are propagated in real time to all clients without reloading, via Firebase Real Time Data Base and reactive programming with RxJs (try rating a product or update a property in the CRUD-module)
Off Canvas Navigation is handled via Service, several CSS classes needs to be applied to different components

UX-Test

UX-Tests are documented in ux-testing/ux-test.md.

Possible future features and updates

Speed up initial page load with server rendered start page and/or lazy load modules
SEO, was out of scope as it invloves server side rendering with Angular Universal
Product categories
Product stock amounts
UI for editing Featured Products-slider
UI for editing banner on start page
UI for editing users/user-roles (admin only) instead of Firebase-only (i. e. User CRUD)
Save cart for logged in user
Login option during checkout
Customer Address or multiple delivery addresses could be handled via account profile page
Attach real payment gateways
Multilanguage functionality (i18n)
Order Detail View for logged in users via account/orders
Add password recovery functionality for lost user passwords
Better solution for responsive tables
Lazy load some modules that are not needed on inital page load
Separate routes to modules
Multiple Product Images CRUD
Implementing a state management (i. e. ngrx)
Social sharing functionality
Authenticate with Google, Facebook and other OAUTH services

Final verdict

General outcome

Angular is great as a foundation for bigger web projects and multiple developers involved. The framework has a very defined structure and this helps, keeping things un-messy. However, third party components are rare right now, so even for basic UI stuff like carousels one need to spend a lot of time, to re-create well known jquery moduls functionalites in "the Angular way".

Theming/jQuery

Theme / third party ui component integration – as common as it is in the daily web agency business – is a challenge. Many themes are based around a styling framework like Bootstrap, HTML/CSS and user interface logic code in jQuery. As it seems some of the well known UI components like Isotope grid, imagesLoaded, Carsoussels and so on are not ported to Angular5 yet.

Learning curve

Angular & RxJS both have a steep learning curve.

SEO

Without using Angular Universal and server side rendering, its not possible to provide meta page title and description. This makes SEO - still a big topic around SPAs – harder. For a shop application, indexing and deep linking to shop product details are most probably the most important thing. Also xml file generation for google merchant could be a issue.

UI performance

UI performance and User experience is great for a shop on SPA basis. Instant feedback for user interactions, like rating of products via Firebase, is very cool too.

Firebase Backend

Firebase provides a whole lot of functionalities which make things like user-management a lot easier. However the security rules configuration needs a lot of attention. In general there is a lot of potential for security holes.

Testing

Karma tests run quite slow, this could be a issue if you have a lot of tests when the app is growing. Jest, the testing framework of Facebook/React would be a good alternative. We did some research and it was quite easy to integrate into an Angular application. Also worth mentioning: we found our way around, but if you need to mock AngularFire and/or Firebase API stuff, this could be major pain in the ass ;)

Extra extra

If you want to see how this project came to life according to its git-repo, checkout this awesome and funny video made with Gource (how to here):