Muhammad Subhan

E-Commerce Website

An e-commerce platform featuring product management, a shopping cart, and user registration, aimed at enhancing online shopping experiences.

Role

Full Stack Developer

Category

Web Dev

Context

Personal / FYP

Stack size

5 tech

e.commerce.website.app
E-Commerce Website preview
01

TL;DR

The e-commerce platform enables seamless online product browsing, supporting user registration, shopping cart management, and a review system, while providing effective admin features for product management.

02

Problem & Approach

The story of why this project existed and the shape of the solution.

This project is a full-stack e-commerce application designed for efficient management of online product sales. Built using Angular, PrimeNG, Node.js, and MongoDB, the platform allows users to explore a diverse catalog of products, manage a shopping cart, and register to create an account.

The application features user reviews and a wishlist. The backend ensures secure handling of user data while the frontend is optimized for a smooth, user-friendly experience. The platform is tailored for small to medium-sized businesses seeking a reliable and scalable solution for their e-commerce needs.

03

Stack

Frontend

  • Angular
  • PrimeNG

Backend

  • Node.js
  • Express

Database

  • MongoDB
04

Features

  • 01Product Management: Admins can add, edit, and delete products, managing key product details like price, description, and inventory.
  • 02Shopping Cart and Wishlist: Customers can add items to the cart or create wishlists for future purchases.
  • 03Search and Filter: Customers can search products using filters for price, brand, and category.
  • 04User Registration: Secure login and account management for customers.
  • 05Product Catalogue: A user-friendly interface to browse available products.
  • 06Review and Comment System: Customers can leave feedback on products.
06

Challenges & Refactors

01
Challenge

Managing a large volume of product images resulted in performance issues, with slow loading times for product pages affecting user engagement.

Solution

Utilized image optimization techniques, including compression and lazy loading, to enhance the speed at which product images load on the site.

07

Gallery

E-Commerce Website screenshot 1
E-Commerce Website screenshot 2
E-Commerce Website screenshot 1
E-Commerce Website screenshot 2
E-Commerce Website screenshot 1
E-Commerce Website screenshot 2
E-Commerce Website screenshot 1