Presentation Slides •

• 🌟 Key Features for Residents
• 🔧 Comprehensive Admin Functionality
• ⭐ Key Features
  • For Users
  • For Admins
• 🎮 App Preview
• 🔧 Technical Highlights
• 📱 User Features
• 👩‍💼 Admin Features
• 🚀 Getting Started
• 🌐 Deployment
• 🛠️ Technology Stack
• 👥 Team

MWH Empower is an innovative mobile application designed to support youth rehabilitation and reintegration into society. Through a gamified task-reward system, users can earn points by completing various tasks and redeem them for rewards, fostering positive behavior and life skills development.

• 📝 Task Booking for Rewards: Residents can browse and book various community or self-improvement tasks, earning voucher points upon completion.
• 🎁 Rewards Redemption: Accumulated voucher points can be redeemed for exciting prizes and necessities at a dedicated in-app minimart.
• 🏆 Gamification Elements:
  • 📊 Leaderboards: Encourage friendly competition by showcasing top-performing participants.
  • 🏅 Achievements: Unlockable badges motivate users by recognizing their milestones and consistent efforts.

• 🗂 Tasks: Create, assign, and monitor tasks to ensure alignment with program goals.
• 📦 Inventory: Maintain up-to-date records of minimart items, ensuring prize availability.
• 👥 Users: Monitor user activity, progress, and performance.
• 💸 Transactions: Track point allocations and redemptions with full transparency.
• 🛍 Minimart: Manage prize listings, stock levels, and voucher point requirements.
• 📊 Dashboard: Gain actionable insights through an intuitive and easy-to-use dashboard for overseeing overall program performance.

• Task Management: Browse and book available tasks
• Task Completion System: Submit photo evidence of completed tasks
• Reward System: Earn points and redeem vouchers
• Gamification Elements:
  • Achievement system
  • Leaderboard rankings
  • Progress tracking
• Minimart Integration: Browse and redeem rewards using earned points

• Comprehensive Dashboard: Monitor user activity and system metrics
• Task Management: Create, edit, and manage available tasks
• User Management: Track user progress and manage accounts
• Inventory Control: Manage minimart items and vouchers
• Transaction History: Track all point transactions and redemptions

Feature	Description	Demo
Tasks Feature	Allows the residents to book tasks to complete for rewards such as voucher points!
Minimart Feature	Residents can use their voucher points to redeem prizes in the minimart!
Voucher Dashboard	Used by the residents to track their claimed and unclaimed vouchers
Achievements	A gamification feature to give a sense of accomplishment to residents
Leaderboard	Another gamification feature to motivate residents
Admin Dashboard	An elegant dashboard for easy data visualization for the admin
User Management	A Full suite of tools for creating, managing and updating users.
Task Management	Full suite of tools for creating, editing, and managing tasks.
Transaction Management	Centralized system for tracking all voucher transactions, point allocations, and prize redemptions. Includes detailed transaction history, filtering options, and audit trails.

This project implements numerous advanced web development concepts:

• MVC Architecture: Clean separation of concerns
• Firebase Integration:
  • Firestore for real-time data management
  • Storage for task completion photos
  • Authentication for secure user management
• Express Backend:
  • RESTful API design
  • Middleware implementation
  • Error handling
• React Frontend:
  • Component-based architecture
  • State management
  • Responsive design
• Security Features:
  • Role-based access control
  • Input validation
  • Secure file handling

• Browse available tasks
• Book and complete tasks
• Submit completion evidence
• Track progress and achievements
• View leaderboard rankings
• Redeem rewards in minimart
• View transaction history

• Monitor system metrics
• Manage tasks and rewards
• Review task completions
• Handle user management
• Control inventory
• Process redemptions
• Generate reports

1. Install the Latest Node.js Version:

   • Visit the Node.js Downloads page and download the latest LTS version for your operating system.
   • Alternatively, install it using a package manager:
   • Windows: Use nvm-windows:

     nvm install lts
     nvm use lts

   • macOS/Linux: Use nvm (Node Version Manager):

     curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
     nvm install --lts
     nvm use --lts

   • Verify installation:

     node -v
     npm -v

2. Clone this repository:

   git clone https://github.com/your-repo-name.git
   cd your-repo-name

3. Terminal 1: Setup for the Client:

• Navigate to the client directory:

  cd client/mwh-minimart-system

• Install latest node version with Long-Term Support:

  nvm install --lts

• Install client dependencies:

  npm install

• Create .env file at server folder:

  touch .env

• Key in values inside the .env file:

    API_KEY=
    AUTH_DOMAIN=
    PROJECT_ID=
    STORAGE_BUCKET=
    MESSAGING_SENDER_ID=
    APP_ID=
    MEASUREMENT_ID=
  

• Start the client development server:

  npm run dev

4. Terminal 2: Setup for the Server:

• Navigate to the server directory:

  cd server

• Install server dependencies:

  npm install

• Create .env file at server folder:

  touch .env

• Key in values inside the .env file:

    API_KEY=
    AUTH_DOMAIN=
    PROJECT_ID=
    STORAGE_BUCKET=
    MESSAGING_SENDER_ID=
    APP_ID=
    MEASUREMENT_ID=
  

• Start the server development server:

  npm run dev

The application is deployed across two platforms for optimal performance and reliability:

• URL: https://mwh-minimart-system.vercel.app
• Platform: Vercel
• Technology Stack:
  • React.js
  • Tailwind CSS
  • Firebase SDK
  • Vite
• Features:
  • Automated deployments
  • Edge network distribution
  • SSL encryption
  • Real-time updates
  • Responsive design

• URL: https://mwh-minimart-system-backend.onrender.com
• Platform: Render
• Technology Stack:
  • Node.js
  • Express.js
  • Firebase Admin SDK
• Features:
  • Auto-scaling
  • Continuous deployment
  • Health checks
  • Secure environment variables
  • API monitoring

• Both frontend and backend deployments are configured for continuous integration and deployment (CI/CD)
• Environment variables are securely managed through respective platform dashboards
• SSL certificates are automatically provisioned and renewed
• Regular health checks ensure system reliability
• Automated backups and rollback capabilities

• Frontend: React, Tailwind CSS
• Backend: Node.js, Express.js
• Database: Firebase Firestore
• Storage: Firebase Storage
• Authentication: Firebase Auth
• Deployment: Vercel (Frontend), Render (Backend)

Gabriel Kuek

Rafael Macam

Fong Kai Jie

Calvin Septyanto

Made by Hack Tuah Script on That Thang