Skip to content

Latest commit

 

History

History
99 lines (62 loc) · 4.94 KB

README.md

File metadata and controls

99 lines (62 loc) · 4.94 KB

Stylo

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

logo

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

Role Github username
Frontend, UI design @CroAnna
Frontend, UI design @Fr1k1
Backend @jbudak20-foi
Backend @Robert4361
DevOps @Filip1402

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

Backend 🕸️

  • NodeJS
  • Express

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

Payment 💵

  • Stripe

DevOps 🐟

  • Docker

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.

Stylo UI

Designed in Figma. homepage product-details product-list-default login-desktop shopping-cart

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

slika