Overview
Wastehub Web Dashboard is a management platform built by our team for a waste management company in Bali that operates across multiple waste centers. The company already had two mobile apps (for waste collector drivers and community residents), but they needed a centralized dashboard to monitor and manage data across 7 waste management centers.
The dashboard is used by both Wastehub Admins and Waste Bank Admins to oversee pickups, waste volumes, residents, pickers, and financial retribution data.
Problem
Wastehub’s operational workflow depended heavily on manual reporting from waste pickers and local waste banks. Without a dedicated dashboard, there was no streamlined way to:
- Monitor daily and monthly waste pickups
- Track waste types and volumes
- Manage resident and waste picker data
- Oversee operational performance across multiple waste centers
The organization needed a unified tool to visualize data and support real-time decision-making.
Solution
Our team built a comprehensive web dashboard that integrates seamlessly with Wastehub’s mobile ecosystem. The dashboard allows admins to track pickups, manage users, monitor waste volumes, and analyze operational data—all within a clean and structured interface.
The system supports two different roles (Wastehub Admin and Waste Bank Admin) with permission-based access to features and data.
Key Features
- JWT Authentication for secure role-based access
- Dashboard Summary with weekly and yearly analytics
- Waste Pickup Tracking (ongoing, completed, canceled, failed)
- Waste Volume Management (CRUD)
- Waste Type Information
- Resident Management (CRUD + search)
- Waste Picker Management (CRUD, affiliation, activation status)
- Membership Request Handling
- Filtering, searching, and detailed views for complex datasets
Tech Stack
- React 17 – Frontend framework
- React Router – Routing
- Vite – Build tool
- Tailwind CSS 3 – UI styling
- Material Tailwind – Dashboard components
- Axios – HTTP client
- React Hook Form + Yup – Form validation
- ESLint & Prettier – Linting and formatting
- Husky – Git hooks for consistent commits
My Role
As part of the frontend team, my contributions included:
- Implementing JWT-based authentication
- Developing CRUD features for several key entities
- Handling data fetching, validation, and UI integration
- Ensuring smooth role-based access flows across the dashboard
Challenges & Learnings
- This was my first hands-on experience with JWT, giving me a deeper understanding of authentication workflows.
- I learned how to design and maintain semantic commit messages, which helped improve our team’s workflow consistency.
- Collaborating on a large dataset and multi-role system taught me how to structure and scale frontend components effectively.
- I gained practical experience with React best practices and complex dashboard UI patterns.