- System Overview 1.1 Goals & Objectives Empower Residents: Provide a simple, user-friendly platform for residents to: View and manage their voucher balances. Request products from the Minimart. Track transaction history (e.g., items requested, vouchers earned/spent). Streamline Administrative Operations: Give MWH staff (Admins) robust tools for: Managing users (e.g., add, suspend, reset passwords). Approving or rejecting voucher tasks and product requests. Tracking and updating inventory in real-time. Generating comprehensive reports (weekly requests, inventory summaries, audits). 1.2 Key Features at a Glance Feature Resident (User) Admin (Staff) Authentication Secure login, optional password reset via mobile Add/suspend user accounts, reset passwords Dashboard View vouchers, transaction history, request items View system-wide stats, manage approvals, inventory Requests Request items from Minimart, place pre-orders Approve or reject requests, track usage, update statuses Vouchers Earn vouchers, see balance and expiration Approve voucher tasks, configure earning rules Inventory View available products Maintain stock levels, item info, reorder points Reporting Basic usage logs Generate advanced reports (weekly, monthly), export data
- System Architecture A typical 3-tier (or 4-tier with a separate CMS) architecture would ensure scalability and maintainability:
Frontend (Client Tier)
Built with modern JavaScript frameworks like React, Vue, or Angular for a snappy, responsive user interface. Could also be a simple HTML/CSS/JavaScript web app if time is limited. Backend (Application Tier)
Node.js / Express or Python Flask/Django for the core business logic. Exposes RESTful APIs (or GraphQL) to serve data to the frontend. Handles authentication, role-based access control (RBAC), and workflows (approvals, requests, voucher redemption). Database (Data Tier)
Relational (e.g., MySQL, PostgreSQL) or NoSQL (e.g., MongoDB) depending on preference. Must store user profiles, voucher transactions, product inventory, and logs. Inclusion of a robust audit log mechanism (e.g., separate table or logging framework). Optional Content Management
For product descriptions, marketing content, and announcements, one could integrate a lightweight CMS (e.g., Strapi, WordPress headless). Hosting & Deployment
Deploy on cloud platforms like AWS, Azure, or Firebase for easy scalability. Automated CI/CD pipelines can speed up iteration during hackathon development and future rollouts.
- Core Components & User Flows 3.1 Resident User Flows Registration & Login
Secure login with username/password. Password reset via mobile or email (optional, depending on MWH’s preference). Dashboard
Voucher Balance: Residents see current voucher total, earned vs. spent, and expiry dates. Product Catalog: Displays available items in the Minimart, including price in vouchers and stock levels. Transaction History: Shows recent requests, approvals/denials, redemption details. Request Items
Select Product: Resident chooses product from the Minimart listing. Confirm Request: Vouchers are deducted (if enough balance) or flagged for Admin approval. Track Request: Residents can see whether the request is “Pending Approval,” “Approved,” or “Rejected.” Earn Vouchers
Residents complete tasks or meet milestones (e.g., chores, good behavior). Admin logs or approves the awarded vouchers. Residents see an updated balance instantly or after Admin approval. Pre-Order Out-of-Stock Items (Phase 2 or 3)
If a desired item is out of stock, the resident can place a pre-order. The system automatically notifies Admin to restock and flags the request as pending. 3.2 Admin Flows User Management
Add User: Create new resident accounts with default voucher balances. Suspend/Reactivate: Temporarily restrict user access if needed. Reset Password: Provide quick password reset for residents. Voucher Task Approvals
Award Vouchers: Admin can create or approve vouchers for tasks completed by residents. Monitor Vouchers: Track voucher issuance history, check for anomalies or suspicious activity. Product & Inventory Management
Add/Edit Products: Input product details, set voucher price, adjust stock levels. Audit Logs: Each inventory change (new stock, price update, restock, removal) is automatically logged. Low Stock Alerts: Get notified when items fall below a threshold. Request Approvals
Pending Requests: View resident requests for items in real time. Approve/Reject: Change status and automatically notify residents. Reporting: Generate real-time or scheduled summaries of all approvals/denials. Reporting & Analytics
Weekly or Monthly Reports: Summaries of voucher usage, product demand, user activity. Inventory Summaries: Track which items are most popular, which are underused, restock needs, etc. Export Data: CSV or PDF export for offline reference and auditing.
- Data Model (Sample Schema) Below is a simplified relational schema. Adapt as needed:
Users Table
user_id (Primary Key) username password_hash role (e.g., “resident” or “admin”) status (active, suspended) created_at, updated_at Vouchers Table
voucher_id (Primary Key) user_id (Foreign Key to Users) amount (positive or negative if spent) reason (task description, reward type) approved_by (Admin ID) created_at Inventory Table
product_id (Primary Key) name description price_in_vouchers stock_quantity created_at, updated_at Requests Table
request_id (Primary Key) product_id (Foreign Key to Inventory) user_id (Foreign Key to Users) status (Pending, Approved, Rejected) requested_at, updated_at Audit Logs
audit_id (Primary Key) action_type (e.g., “Add Stock”, “Approve Request”) admin_id (Foreign Key to Users table, referencing an Admin account) details (JSON or text) timestamp
- Security & Privacy Considerations Role-Based Access Control (RBAC)
Restrict admin-specific actions to Admin roles only. Residents see only their own voucher balances and requests. Secure Authentication
Password Hashing (BCrypt or Argon2). Token-Based Sessions (JWT) or server-based sessions with proper session management. Optional 2-Factor Authentication for Admins. Data Protection
Comply with relevant data privacy regulations. Encrypted connections (HTTPS) and consistent backups. Audit Trails
Maintain logs of all critical actions (voucher issuance, approvals, inventory changes). Ensure the logs are tamper-proof or tamper-evident.
- Phased Implementation Plan Phase 1: Prototype (Hackathon MVP)
Core Features: Resident login, voucher balance display, basic Minimart product view, item request flow, admin approvals. Basic Reporting: Export CSV for requests and voucher transactions. Simple Inventory: Manual update of stock by Admin. Phase 2: Refinement & Additional Features
Pre-Order Functionality: Residents request out-of-stock items. Admin receives alerts to restock. Mobile-Friendly Interface: Ensuring the site works well on tablets and smartphones. Dashboard Enhancements: Graphical reports, user usage stats, more robust analytics. Phase 3: Advanced Modules
Auction or Bidding System: Optional feature for special or high-demand items. Automatic Stock Replenishment Alerts: Email or SMS notifications to Admin. Integration with SMS/WhatsApp: Residents get notifications on approvals, voucher changes. Gamification: Create achievements, levels, or badges for positive behavior, community contributions.
- Potential Extensions & Integrations Payment Gateway: If real-money transactions or external donations are integrated (e.g., donors sponsor voucher top-ups). E-Learning Integration: Reward vouchers for completed lessons or modules. CRM for Volunteers: Extend the system to manage volunteer tasks, scheduling, and reward programs. Analytics Dashboard: Use business intelligence tools (Power BI, Tableau) for deeper insights into usage patterns.
- Challenges & Considerations Tech Literacy: Some MWH staff or residents may have limited experience using web apps. A simple UI/UX is crucial. Budget & Maintenance: If MWH has limited resources, aim for cost-effective hosting (e.g., free/low-tier cloud services) and minimal manual overhead. Data Sensitivity: As these are minors in a welfare setting, data must be handled with extra care (potentially masked or anonymized in logs). Scalability: Plan for potential growth in the number of residents, inventory items, and community-driven features.
- Conclusion By focusing on a phased approach, hackathon teams can deliver tangible value early while setting the stage for future expansion. The Minimart and Voucher System is designed to be both practical—meeting day-to-day needs of MWH staff and residents—and scalable—capable of evolving to include advanced features like auctions, gamification, and robust reporting.
Ultimately, this solution aims to empower MWH residents by giving them autonomy over their daily needs and rewards, while providing administrative efficiency and visibility to MWH staff. Through collaborative development at the hackathon and beyond, this project can become a cornerstone of MWH’s continued effort to nurture and guide the youth under its care.
Built With
- express.js
- javascript
- next.js
- react
- supabase
- typescript
Log in or sign up for Devpost to join the conversation.