Stylo

Webshop project with CMS and MACH architecture. Built using React and Express. 🚀

This was a team project and created by 5 students (including myself) and reviewed by IBM iX. It was developed using agile methodology - Scrum and documented in Jira and Confluence.

Watch the video: 👇

Stylo documentation - table of contents

• Development team
• Project description and features
• Technologies
• MACH Architecture in context of our project
• Architecture and microservices
• Stylo UI

Development team

Project description and features

The Stylo application represents an E-commerce webshop designed to integrate Content Management System (CMS) and E-commerce systems, employing the MACH architecture. The software's core functionalities encompass roles for administrators, employees, and customers, with a current focus on footwear sales.

Employees have the capability to manage products, the categories to which specific products belong, review customer order data, and modify order statuses. Through the CMS, employees can edit, add, and delete web pages. For now, administrators are responsible for adding employees to the system.

Users, or customers in this context, should be able to browse categories and products within a specific category (with features such as filtering and sorting), view individual product displays containing price, image, availability, description, and name, make purchases through a shopping cart using card transactions, and receive invoices via email. Additionally, customers must have the ability to contact employees through a contact/customer support form.

Unregistered users should be able to register in the system. After registration, users receive an email to activate their accounts.

In terms of architecture, it must consist of microservices (resulting in a relatively large number of GitHub repositories) connecting to a single API gateway. The application aims to utilize existing CMS and E-commerce solutions, incorporating specific functionalities as needed (e.g., sending emails to users). The application is intended to be "cloud-agnostic," deployable on any cloud service, facilitated by Docker. The web component of the application must also be responsive.

Technologies

Frontend 🎭

• React - A JavaScript library for building user interfaces
• react-loader-spinner - A lightweight spinner component for React applications
• react-responsive-carousel - A responsive carousel component for React applications
• react-toastify - A React notification library providing customizable toast messages
• sweetalert2 - A customizable and responsive modal library for React applications
• yup - A schema validation library for JavaScript objects
• emailjs - A library for sending emails in JavaScript applications

Backend 🕸️

• NodeJS - A server-side JavaScript runtime.
• Express - A minimal and flexible Node.js web application framework.
• pdfkit - A JavaScript library for generating PDF documents

CMS ⚙️

• Contentful - A headless Content Management System (CMS) that allows you to manage and deliver digital content across various platforms.

E-commerce 🛒

• Commercetools - A modern and flexible headless commerce platform, providing APIs for building scalable and customizable ecommerce solutions. It was used as database for all products and orders.

Mail service ✉️

• Nodemailer - A powerful and easy-to-use Node.js module for sending emails, enabling seamless integration of email services in applications.

Payment 💵

• Stripe -A payment processing platform, facilitating secure and efficient online transactions.

DevOps 🐟

• Docker - Enables streamlined deployment by encapsulating microservices and the API gateway in portable containers, allowing for simultaneous and efficient start-up.

API gateway 🛜

• Kong - An open-source API gateway that manages, secures, and scales API requests, providing a centralized point for controlling and monitoring API traffic. The API gateway acts as a middleware connecting the frontend and backend. Its primary role is to route traffic to designated microservices, handling authentication and rate limitation to free up microservices for core business logic. Deployment in Docker and maintaining a dedicated repository are recommended practices.

MACH Architecture in context of our project

This architectural framework is built upon the foundation of multiple independent microservices.

The "M" in this context signifies microservices, highlighting the decentralized nature of the system.

The "A" represents the commitment to an API-first approach. This dictates that our application should be conceived with a focus on the APIs our services need to provide, as opposed to developing functionality first and subsequently creating APIs.

The "C" denotes Cloud native, emphasizing the need to leverage the full spectrum of benefits offered by cloud infrastructure. The goal is to design the application to operate seamlessly on any cloud, making it inherently Cloud Agnostic and independent of specific cloud provider technologies.

The "H" stands for "Headless". Iteans decoupling the backend (microservices) from the frontend. It allows flexibility by separating the presentation layer, enabling various frontends to access the same backend services without being tied to a specific format.

Architecture and microservices

Application is composed of 2 parts:

• Web app frontend: the main UI of the app
• Backend: which contains 4 microservices

The backend comprises four interconnected microservices, facilitated by an API gateway such as Kong. The microservices include:

• Products - integrates data from our headless Ecommerce and CMS APIs (products, product details, categories, webshop and homepage layout)
• Receipts - includes creation of PDF receipt which are meant to be sent to customers
• Emails - used for sending mails to customers (account verfication, receiving a PDF invoice on email)
• Customers - customer registration and login

Overall structure of the entire Stylo application:

Frontend component diagram:

Stylo UI

Designed in Figma.

View full Figma file here. Icons are from Flaticon and Phosphor Icons.