Skip to content

UI & Feature Showcase 📱✨

The REward application features a modern, intuitive, and highly functional user interface built with Flutter and Material 3. Below is a visual walkthrough of the key features.

🚀 Onboarding & Security

A seamless entry experience with secure authentication and a friendly welcome.

![Onboarding](assets/screenshots/onboarding.jpg){: .mobile-frame }
<!-- slide -->
![Login](assets/screenshots/login.jpg){: .mobile-frame }
<!-- slide -->
![Signup](assets/screenshots/signup.jpg){: .mobile-frame }

Key Highlights:

  • Curved Backgrounds: Custom-painted UI elements for a premium feel.
  • Biometric Ready: Architecture supports secure login via Google and traditional email.

📊 Home Dashboard

The central hub for user activity and rewards.

![Home Dashboard](assets/screenshots/home_top.jpg){: .mobile-frame }
<!-- slide -->
![Categories](assets/screenshots/home_bottom.jpg){: .mobile-frame }
<!-- slide -->
![Recycling Info](assets/screenshots/plastic_metal.jpg){: .mobile-frame }

Key Highlights:

  • Points Card: High-visibility real-time points balance.
  • Community Stats: Transparency in total environmental impact.
  • Micro-Animations: Subtle floating shapes and smooth sliver-based scrolling.

🏆 Gamification & Profile

Motivating users through rankings, badges, and progress tracking.

![Profile Stats](assets/screenshots/profile_top.jpg){: .mobile-frame }
<!-- slide -->
![Achievements](assets/screenshots/badges.jpg){: .mobile-frame }
<!-- slide -->
![Leaderboard](assets/screenshots/ranking.jpg){: .mobile-frame }

Key Highlights:

  • Badge System: Visual indicators of recycling milestones.
  • Podium Ranking: Competitive leaderboard to encourage sustainable habits.
  • Tiers: Users progress from Bronze up to higher ranks based on performance.

🗺️ Finding Kiosks

Real-time map and location-based services.

![Map View](assets/screenshots/map.jpg){: .mobile-frame }
<!-- slide -->
![Notifications](assets/screenshots/notifications.jpg){: .mobile-frame }

Key Highlights:

  • Google Maps Integration: Live tracking of available RVM (Reverse Vending Machines) kiosks.
  • Real-time Status: Machines show as 'Available', 'Maintenance', or 'Offline'.
  • Notification Timeline: A history of points earned and community announcements.

⚙️ Support & Info

Complete transparency and assistance for users.

![Help Center](assets/screenshots/help_center.jpg){: .mobile-frame }
<!-- slide -->
![About REward](assets/screenshots/about.jpg){: .mobile-frame }

🔐 Admin Tools

Hidden tools for staff to manage the ecosystem on the go.

Admin Stats{: .mobile-frame }

Admin Features:

  • Live Statistics: Real-time overview of users, offers, and recycling volume.
  • Global Announcements: Post notifications directly to all users from the app.
  • Offer Management: Add new rewards and manage current catalog items.