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: 👇
- Development team
- Project description and features
- Technologies
- MACH Architecture in context of our project
- Architecture and microservices
- Stylo UI
| Role | Github username |
|---|---|
| Frontend, UI design | @CroAnna |
| Frontend, UI design | @Fr1k1 |
| Backend | @jbudak20-foi |
| Backend | @Robert4361 |
| DevOps | @Filip1402 |
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.
- React
- NodeJS
- Express
- Contentful - A headless Content Management System (CMS) that allows you to manage and deliver digital content across various platforms.
- 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.
- Nodemailer
- Stripe
- Docker
- 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.
Designed in Figma.
View full Figma file here. Icons are from Flaticon and Phosphor Icons.
