HACK4GOOD
By:
Benedict Tay Haoze
Koh Swee Hong
Group Name: CodeMuggers
Our Prototype
Our Approach
TABLE OF CONTENTS
Problem Statement
Demo
02
03
01
04
Problem Statement
01
Muhammadiyah Welfare Home
Design and develop a web-based Minimart and Voucher System for Muhammadiyah Welfare Home, enabling users to request products and earn vouchers while providing administrators with robust management and reporting tools
Muhammadiyah Welfare Home
Web-based System which aims to:
Our Prototype
02
Prototype
Visit the following link to test out our Prototype: https://www.figma.com/proto/5G3p377glxLEV5YvCmCZOB/CodeMuggers-Hack4Good-(Minimart)?node-id=1-3&t=m84YkVeaQThGnOFH-1
Our Approach
03
Our Idea
To maintain online e-commerce-like system with 2 interfaces for both the users (residents) and admins (MWH Staff)
Note: The illustration of our idea will be demonstrated in our prototype
Unified Initial Dashboard
Our Home Page which is before log in/sign up
Sign Up & Log In
Prior to log in: To select Residents (User) or Staff (Admin) function using the drop down
Dashboards
Admin Dashboard
User Dashboard
Basic Functions
Category Drop-down: Able to select products based on categories for the convenience of user
Wish Lists: Users is able to add products to their wish list and refer to it for their convenience (or when necessary) - Acts like a “Favourites” time
User can add to wishlist by selecting the heart icon on the products the wish to add
Basic Functions
Contact Us: Users are able to leave a message where necessary
About Us: Able to search up the story of MWH in the e-commerce site
User - Request Product
If product is in stock: we maintain a product detail page and cart detail page
User - Request Product
Check Out Page: for users to verify their purchases and by clicking on the “Place Order” button, transaction will only be processed
User - Request Product
If product is out of stock, users are able to pre-order the desired quantity and will be informed when stocks are available
User - Earn Vouchers
Vouchers can be earned through activities and approved by admin from MWH staff (introduced later)
Vouchers (credit balance) can be seen directly from the dashboard
Admin - User Management
Able to view all current users of this platform on this user management tab and to even lock (suspend) accounts, delete, or to edit their respective information where necessary
Admins are also able to manually add users if required via the “Add user” tab
Admin - Vouchers Approval
From the Voucher Tab, Admins are able to view, approve or reject the voucher credits for the respective users. They are also able to approve all with a click for efficient use.
Admin - Inventory Management
Able to view the Minimart inventory in this inventory tracking system dashboard and update or manage the purchases (i.e. adding the records) respectively to update the dashboard
Updates on these stocks (e.g. products that are out of stock) will be flowed and updated on the user interface
Admin - Reporting
Admin is able to view the reports with the required details in a glance
Note: Admin is able to select based on past 7 days, months, year; share and print functions are also available
Demo
04
Demo
The following functionality is being displayed within our demo:
Github Link: https://github.com/Ben-Tay/CodeMuggersH4G/tree/main
Demo: https://code-muggers-h4-g.vercel.app/
Test User:
email: john@gmail.com
password: m38rmF$
Demo - Video
Disclaimer
Due to time-constraints, we have left out things like product preorder, vouchers and add to cart in our demo but we envision it within our prototype. Moreover, please login using the default test user. We have omitted sign up due to time constraints too
In addition, changes to our initial data is stored using localStorage (ie. data does not persist once u refresh browser, so DO NOT REFRESH)