A responsive front-end e-commerce prototype developed as a Software Engineering course project. Campus Mini Mart demonstrates a complete customer shopping flow while connecting implementation with requirements, UML modeling, testing, risk management, and project planning.
- Browse a catalog of campus products
- Search products by name
- Filter products by category
- Add products to a shopping cart
- Persist cart state with browser
localStorage - Increase/decrease item quantities
- Remove individual items or clear the entire cart
- Automatic subtotal and total calculation
- Simulated checkout with user feedback
- Responsive layout for desktop and smaller screens
- HTML5
- CSS3
- JavaScript (Vanilla JS)
- Browser localStorage
No build step, package manager, backend, database, or framework is required.
- Clone or download the repository.
- Open
index.htmlin a modern browser.
For a local web server, you can also run:
python -m http.server 8000Then visit http://localhost:8000.
Campus-Mini-Mart/
├── index.html
├── cart.html
├── assets/
│ ├── css/
│ ├── js/
│ └── images/products/
├── docs/
│ ├── diagrams/
│ ├── screenshots/
│ ├── software-engineering.md
│ └── project-notes.md
├── presentation/
│ └── campus-mini-mart-presentation.pptx
├── demo/
│ └── campus-mini-mart-demo.mp4
├── .gitattributes
├── .gitignore
└── README.md
The project includes a cleaned documentation summary and diagrams covering:
- Requirements and scope
- User stories and use cases
- Context diagram
- UML class diagram
- Checkout sequence diagram
- Shopping/checkout activity diagram
- Testing and traceability
- Risk management
See Software Engineering Documentation.
This repository represents the implemented front-end MVP. It intentionally does not include real payment processing, user authentication, a backend/database, delivery tracking, or a fully implemented administrator dashboard. Those were identified as future extensions in the course documentation.
- Yazan Hijazi
- Yazan Zaghlol
Software Engineering — Campus Mini Mart project