8 min read

These days e-commerce platforms are widely available. However, as common as they might be, there are instances that after investing a significant amount of time learning how to use a specific tool you might realize that it can not fit your unique e-commerce needs as it promised. Hence, a great advantage of building your own application with an agile framework is that you can quickly meet your immediate and future needs with a system that you fully understand.

Adrian Mejia Rosario, the author of the book, Building an E-Commerce Application with MEAN, shows us how MEAN stack (MongoDB, ExpressJS, AngularJS and NodeJS) is a killer JavaScript and full-stack combination. It provides agile development without compromising on performance and scalability. It is ideal for the purpose of building responsive applications with a large user base such as e-commerce applications.

Let’s have a look at a project using MEAN.

(For more resources related to this topic, see here.)

Understanding the project structure

The applications built with the angular-fullstack generator have many files and directories. Some code goes in the client, other executes in the backend and another portion is just needed for development cases such as the tests suites. It’s important to understand the layout to keep the code organized.

The Yeoman generators are time savers! They are created and maintained by the community following the current best practices. It creates many directories and a lot of boilerplate code to get you started. The numbers of unknown files in there might be overwhelming at first.

On reviewing the directory structure created, we see that there are three main directories: client, e2e and server:

  • The client folder will contain the AngularJS files and assets.
  • The server directory will contain the NodeJS files, which handles ExpressJS and MongoDB.
  • Finally, the e2e files will contain the AngularJS end-to-end tests.

File Structure

This is the overview of the file structure of this project:

meanshop
├── client
│   ├── app        - App specific components
│   ├── assets     - Custom assets: fonts, images, etc…
│   └── components - Non-app specific/reusable components
│
├── e2e            - Protractor end to end tests
│
└── server
    ├── api        - Apps server API
    ├── auth       - Authentication handlers
    ├── components - App-wide/reusable components
    ├── config     - App configuration
    │   └── local.env.js - Environment variables
    │   └── environment  - Node environment configuration
    └── views            - Server rendered views

Components

You might be already familiar with a number of tools used in this project. If that’s not the case, you can read the brief description here.

Testing

AngularJS comes with a default test runner called Karma and we are going going to leverage its default choices:

  • Karma: JavaScript unit test runner.
  • Jasmine: It’s a BDD framework to test JavaScript code. It is executed with Karma.
  • Protractor: They are end-to-end tests for AngularJS. These are the highest levels of testing that run in the browser and simulate user interactions with the app.

Tools

The following are some of the tools/libraries that we are going to use in order to increase our productivity:

  • GruntJS: It’s a tool that serves to automate repetitive tasks, such as a CSS/JS minification, compilation, unit testing, and JS linting.
  • Yeoman (yo): It’s a CLI tool to scaffold web projects., It automates directory creation and file creation through generators and also provides command lines for common tasks.
  • Travis CI: Travis CI is a continuous integration tool that runs your test suites every time you commit to the repository.
  • EditorConfig: EditorConfig is an IDE plugin that loads the configuration from a file .editorconfig. For example, you can set indent_size = 2 indent with spaces, tabs, and so on. It’s a time saver and helps maintain consistency across multiple IDEs/teams.
  • SocketIO: It’s a library that enables real-time bidirectional communication between the server and the client.
  • Bootstrap: It’s a frontend framework for web development. We are going to use it to build the theme thought-out for this project.
  • AngularJS full-stack: It’s a generator for Yeoman that will provide useful command lines to quickly generate server/client code and deploy it to Heroku or OpenShift.
  • BabelJS: It’s a js-tojs compiler that allows to use features from the next generation JavaScript (ECMAScript 6), currently without waiting for browser support.
  • Git: It’s a distributed code versioning control system.

Package managers

We have package managers for our third-party backend and frontend modules. They are as follows:

  • NPM: It is the default package manager for NodeJS.
  • Bower: It is the frontend package manager that can be used to handle versions and dependencies of libraries and assets used in a web project. The file bower.json contains the packages and versions to install and the file .bowerrc contains the path where those packages are to be installed. The default directory is ./bower_components.

Bower packages

If you have followed the exact steps to scaffold our app you will have the following frontend components installed:

  • angular
  • angular-cookies
  • angular-mocks
  • angular-resource
  • angular-sanitize
  • angular-scenario
  • angular-ui-router
  • angular-socket-io
  • angular-bootstrap
  • bootstrap
  • es5-shim
  • font-awesome
  • json3
  • jquery
  • lodash

Previewing the final e-commerce app

Let’s take a pause from the terminal. In any project, before starting coding, we need to spend some time planning and visualizing what we are aiming for. That’s exactly what we are going to do, draw some wireframes that walk us through the app.

Our e-commerce app, MEANshop, will have three main sections:

  • Homepage
  • Marketplace
  • Back-office

Homepage

The home page will contain featured products, navigation, menus, and basic information, as you can see in the following image:

Figure 2 – Wireframe of the homepage

Marketplace

This section will show all the products, categories, and search results.

Figure 3 – Wireframe of the products page

Back-office

You need to be a registered user to access the back office section, as shown in the following figure:

 

Figure 4 – Wireframe of the login page

After you login, it will present you with different options depending on the role. If you are the seller, you can create new products, such as the following:

Figure 5 – Wireframe of the Product creation page

If you are an admin, you can do everything that a seller does (create products) plus you can manage all the users and delete/edit products.

Understanding requirements for e-commerce applications

There’s no better way than to learn new concepts and technologies while developing something useful with it. This is why we are building a real-time e-commerce application from scratch. However, there are many kinds of e-commerce apps. In the following sections we will delimit what we are going to do.

Minimum viable product for an e-commerce site

Even the largest applications that we see today started small and grew their way up. The minimum viable product (MVP) is strictly the minimum that an application needs to work on. In the e-commerce example, it will be:

  • Add products with title, price, description, photo, and quantity.
  • Guest checkout page for products.
  • One payment integration (for example, Paypal).

This is strictly the minimum requirement to get an e-commerce site working. We are going to start with these but by no means will we stop there. We will keep adding features as we go and build a framework that will allow us to extend the functionality with high quality.

Defining the requirements

We are going to capture our requirements for the e-commerce application with user stories. A user story is a brief description of a feature told from the perspective of a user where he expresses his desire and benefit in the following format:

As a <role>, I want <desire> [so that <benefit>]

User stories and many other concepts were introduced with the Agile Manifesto. Learn more at https://en.wikipedia.org/wiki/Agile_software_development

Here are the features that we are planning to develop through this book that have been captured as user stories:

  1. As a seller, I want to create products.
  2. As a user, I want to see all published products and its details when I click on them.
  3. As a user, I want to search for a product so that I can find what I’m looking for quickly.
  4. As a user, I want to have a category navigation menu so that I can narrow down the search results.
  5. As a user, I want to have real-time information so that I can know immediately if a product just got sold-out or became available.
  6. As a user, I want to check out products as a guest user so that I can quickly purchase an item without registering.
  7. As a user, I want to create an account so that I can save my shipping addresses, see my purchase history, and sell products.
  8. As an admin, I want to manage user roles so that I can create new admins, sellers, and remove seller permission.
  9. As an admin, I want to manage all the products so that I can ban them if they are not appropriate.
  10. As an admin, I want to see a summary of the activities and order status.

All these stories might seem verbose but they are useful in capturing requirements in a consistent way. They are also handy to develop test cases against it.

Summary

Now that we have a gist of an e-commerce app with MEAN, lets build a full-fledged e-commerce project with Building an E-Commerce Application with MEAN.

Resources for Article:

 

Further resources on this subject:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here