ScrapAway is a MERN stack platform for door-to-door waste pickup. The interface supports two main user groups: disposers who list and schedule waste pickup, and collectors who review, confirm and manage collection requests.
Responsive web interface for waste listing, pickup scheduling, collector dashboards and order tracking.
The interface needed to make a multi-step service feel simple: choose a role, enter secure account details, list waste, schedule pickup, confirm requests and track order status. The page structure, forms, cards and dashboards were designed to keep each action clear.
The project combines responsive layouts, reusable interface sections, API-connected data, authentication states and role-specific dashboards for disposers and collectors.
Home, authentication, dashboards, tracking, content pages and support pages built with adaptable layouts and structured visual hierarchy.
Waste categories, prices and pickup records are displayed from backend data, helping users review current information without static page updates.
Different journeys guide disposers and collectors to the right dashboard, forms and pickup management tools.
The flow was organized around a simple operational path that helps both user types understand what to do next.
The selected screens show the main front-end systems: homepage, authentication, disposer dashboard, collector dashboard and order tracking.
The homepage introduces the platform, shows key navigation, and uses category cards to communicate waste types and estimated pricing.
The login and sign-up UI supports user role selection for disposers and collectors, with account creation, login, error handling and reset-password screens.
Disposers can select waste type, add pricing and weight details, upload an image, enter pickup information and choose a pickup date through a stepped form flow.
Collectors can browse nearby waste requests, filter by category, review pickup details and confirm the collection from their dashboard.
The track order interface groups requests by status, including pending, confirmed, completed and cancelled, so users can follow the pickup lifecycle clearly.
The application connects a React front end with backend APIs, MongoDB data storage and authenticated user sessions.
The project combines front-end interface development with backend services and database connectivity.
The project was completed as a team build. My focus centered on making the collector-side experience clear and efficient, with attention to route planning, booking management, dashboards and user-friendly interaction patterns.
Designed and refined screens that help collectors review available waste, filter requests and confirm pickups.
Organized pickup data into readable cards, status sections and action areas for faster decision-making.
Maintained consistent form styling, navigation, spacing and responsive behavior across key screens.
ScrapAway shows the ability to connect design thinking with front-end implementation: structuring real user flows, creating responsive screens, working with authenticated states and presenting operational data in a way that feels clear and usable.
View the UI/UX version of this case study or continue through other portfolio areas.