Skip to content

PohPingSeng/web-final-project

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
.idea
.idea
 
 
.vscode
.vscode
 
 
backend
backend
 
 
frontend
frontend
 
 
node_modules
node_modules
 
 
README.md
README.md
 
 
docker-compose.yml
docker-compose.yml
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 

Repository files navigation

Review Assignment Due Date

Requirements for Group Project

Read the instruction

Refer to the link below for the Group Name and Group Members

https://github.com/STIWK2124-A242/class-activity-stiwk2124/blob/main/NewGroupMembers.md

Group Info:

  1. Matric Number & Name & Photo & Phone Number
  2. Mention who the leader is.
  3. Mention your group name for Assignment-1 and Assignment-2
  4. Other related info (if any)
Group Member #1 (CHONG YONG XUAN) Leader #2 (POH PING SENG) #3 (SITI NURBATRISHA BT ABD HALIM) #4 (NUR FATIHAH BINTI ISMAIL) #5 (MUHAMMAD RIZKI FATRA) #6 (MUHAMMAD FAQRIEZ FARHAN BIN ROHAIDZAM) #7 (KAVILASHWINII SUBRAMANIAM)
Matric Number 291692 293403 292828 292013 290911 294988 296336
Phone Number 018-5787201 011-26449649 017-9134281 019-9744370 016-2508620 017-4429742 017-5182808
A1 & A2 Group Name nezha & nezha2 nezha & nezha2 webexians & webexian webexians & webexian webexians & webexian repo-ranger error404
Picture


Title of your application (a unique title)

Qurba E-commerce

Abstract (in 300 words)

Background

Produk AMEEN is a product line under Qurba Food Industries, specializing in Malaysian-made food items such as sauces, spice blends, and herbal honey. Initially, the business relied on a static WordPress website for product cataloging, which lacked transactional capabilities, backend control, and customer interaction. This limited the business's potential in the growing digital commerce sector.

Problem Statement

The absence of online purchasing, order management, and customer interaction features in the current platform hinders scalability. Small businesses like Produk AMEEN often struggle to access full-stack, scalable e-commerce solutions tailored to their needs, leading to missed sales opportunities, inefficient inventory handling, and unsatisfactory customer experiences.

Main objective

This group project builds upon our prior development efforts: the backend system completed in Assignment 1 and the frontend interface developed in Assignment 2. The main objective is to integrate both components into a fully functional e-commerce web application for Produk AMEEN using Angular for the frontend and Spring Boot for the backend. In addition, three new key features wishlist, user profile, and review and rating system are introduced to enhance user engagement and platform usability.

Methodology

The system follows a Single Page Application (SPA) architecture [1][7], with Angular Material applied for responsive and modern UI styling. The backend uses Spring Boot to expose RESTful APIs, connected to a MySQL database. Authentication and role-based access control are implemented using JWT (JSON Web Token) [3][4][5][6], providing secure login and user differentiation (admin vs. customer). Version control is managed using GitHub, and the deployment environment is containerized using Docker, coordinated via a Docker-compose.yml file. The project was developed using Agile methodology, with iterative sprints, regular sprint reviews, and backlog refinement to ensure continuous improvement and progress tracking.

Result

The completed application supports comprehensive e-commerce functionalities, including product browsing, shopping cart, secure checkout, order history viewing, and administrative panels for managing products and orders. The three additional features wishlist, user profile, and product review & rating—further enrich the user experience and increase customer interaction. Docker images were successfully published to Docker Hub, ensuring readiness for cloud deployment or server hosting.

Conclusion

This project demonstrates that combining Angular, Spring Boot, and Docker under Agile practices can result in a scalable, secure, and user-friendly e-commerce solution. By adopting modern web development standards [4][6][7] and Single-Page Application (SPA) principles [1], Produk AMEEN now has a robust digital platform capable of supporting growth, enhancing customer engagement, and operating efficiently in Malaysia’s competitive online marketplace.

Link for Docker Image

Dockerhub link

https://hub.docker.com/r/chongyongxuan/ameen-market-backend/tags
https://hub.docker.com/r/chongyongxuan/ameen-market-frontend/tags

Instructions on how to run Docker.

Prerequisites

  • Docker Desktop must be installed and running on your machine
  • Ensure you have cloned the whole repository to your local machine
  • Have installed any IDE such as IntelliJ or Visual Studio Code

Instructions

How to Run This Application Using Docker

Step 1: Clone the Repository
First, clone this repository from GitHub:
Press Win + R, type cmd, and press Enter



Choose the folder where you want to store the project, and type:

cd "the name of the folder"

And run:

git clone https://github.com/STIWK2124-A242/groupproject-codex.git

Then navigate into the project folder:

cd groupproject-codex





Step 2: Start the Containers
In the Command Prompt, run: 
docker-compose up

This will automatically start the frontend and backend containers using the docker-compose.yml file.


Step 3: Stop the Containers
To stop the containers, press: 
Ctrl + C

Then, to properly shut everything down, run:

docker-compose down


List of all the endpoints

Authentication: Customer & Admin

Endpoint Description
POST http://localhost:8080/qurba/api/auth/register Registration Process for Customer & admin
POST http://localhost:8080/qurba/api/auth/login Login Process for Customer & Admin

Role: CUSTOMER

Endpoint Description
GET http://localhost:8080/qurba/api/products List All Products
GET http://localhost:8080/qurba/api/products/sort?sortOrder=asc Price - Sort Ascending
GET http://localhost:8080/qurba/api/products/sort?sortOrder=desc Price - Sort Descending
GET http://localhost:8080/qurba/api/products/search?query=minyak Search by Name or Description
GET http://localhost:8080/qurba/api/products/filter?category=madu Filter by Category
GET http://localhost:8080/qurba/api/products/search-filter-sort?category=minuman&query=teh&sortOrder=asc Combine - Sort, Filter, Search
POST http://localhost:8080/qurba/api/cart/{userid}/add?productId=1&quantity=2 Add Product to Cart
GET http://localhost:8080/qurba/api/cart/{userid} Get User Carts
PUT http://localhost:8080/qurba/api/cart/{userid}/update?productld=1&quantity=3 Update Cart Item Quantity
DELETE http://localhost:8080/qurba/api/cart/{userid}/remove?productId=1 Remove Product from Cart
DELETE http://localhost:8080/qurba/api/cart/{userid}/clear Clear Cart
POST http://localhost:8080/qurba/api/checkout/{userid} Check Out Process
GET http://localhost:8080/qurba/api/orders/{userid} View Orders
GET http://localhost:8080/qurba/api/orders/{orderid}/summary View Summary
GET http://localhost:8080/qurba/api/wishlist/{userId} Get user's wishlist
POST http://localhost:8080/qurba/api/wishlist/{userId}/add/{productId} Add product to wishlist
DELETE http://localhost:8080/qurba/api/wishlist/{userId}/remove/{productId} Remove product from wishlist
GET http://localhost:8080/qurba/api/wishlist/{userId}/check/{productId} Check if product is in wishlist
POST http://localhost:8080/qurba/api/products/{productId}/reviews Add a review to a product
GET http://localhost:8080/qurba/api/products/{productId}/reviews Get reviews for a product
GET http://localhost:8080/qurba/api/products/{productId}/rating Get product rating
GET http://localhost:8080/qurba/api/users/profile Get user profile
PUT http://localhost:8080/qurba/api/users/profile Update user profile

Role: ADMIN

Endpoint Description
GET http://localhost:8080/qurba/api/admin/products Get All Products
POST http://localhost:8080/qurba/api/admin/products Add Product
PUT http://localhost:8080/qurba/api/admin/products/{productid} Update Product
DELETE http://localhost:8080/qurba/api/admin/products/{productid} Delete Product
GET http://localhost:8080/qurba/api/admin/orders Get All Orders

Link for the YouTube Presentation

https://youtu.be/U0I96IqagXw

Result/Output (Screenshot of the output)

1. Home Page 2. Contact Info
3. About Company 4. Blog Page
5. Register Admin 6. Home Page Admin
7. Admin's Product Management 8. Edit Product
9. Add Product 10. Category Management
11. Customer's Order Status 12. Update Order Status
13. Login Pages Customer 14. Register Pages Customer
15. Your Cart 16. Your Order
17. Product Category 18. Customer Order
19. Review Product Customer 20. Add Review Product
21. Add To Cart 22. Wishlist
23. Wishlist Page
"
24. Profile 1 25. Profile 2

References (Not less than 20)

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages