This project is a definitive and comprehensive solution to the front-end coding challenge for the Full Stack Developer role at REMwaste. It is a complete architectural and visual redesign of the "Choose Your Skip Size" page, built with a focus on modern best practices, exceptional user experience, and long-term maintainability.
The core instruction was to create a page that was "completely different from the original." I took this as an opportunity not just to change the aesthetics, but to fundamentally improve the user flow.
Instead of a simple grid of cards leading to subsequent pages, I designed an all-in-one "Configurator." This single-page application integrates all the necessary logic into one cohesive and interactive view.
This design is superior for three key reasons:
- Reduces Cognitive Load: By organizing the process into clear, numbered steps (
1. Choose Size,2. Choose Placement,3. Details & Price), the user is guided through the decision-making process without being overwhelmed. - Instant & Contextual Feedback: The user immediately sees the consequences of their choices. Selecting a large skip instantly and elegantly disables the "Public Road" option. Choosing "Public Road" instantly adds the permit fee to the final price. There are no page reloads, no jarring error messages—just a fluid, intelligent response.
- Modern & Professional Feel: The layout, animations, and interactive nature of the configurator provide a premium, application-like experience that builds user confidence and trust.
This project was built from the ground up to showcase a deep understanding of modern front-end development.
- React & Vite: For a blazing-fast, modern development environment.
- Tailwind CSS: For a utility-first, highly maintainable, and responsive styling system.
- Framer Motion: For fluid, meaningful animations that provide polished user feedback.
- Lucide React: For crisp, lightweight, and high-quality icons.
- Custom Hooks (
useSkips): All data-fetching, loading, and error-handling logic is encapsulated within a reusable custom hook. This is a powerful pattern that keeps the UI components completely decoupled from the data-fetching implementation, making the code exceptionally clean and easy to maintain. - Component-Driven Design: The UI is composed of small, reusable, and well-defined components (e.g.,
<Badge />,<Modal />,<PlacementSelector />). - Environment Variables: The API URL is stored in a
.envfile, a crucial security and configuration best practice. - Absolute Imports (
@/): Configured for a cleaner and more maintainable import structure, improving the overall Developer Experience (DX).
- Graceful Loading States: The application displays a skeleton loader that mimics the final layout, dramatically improving perceived performance.
- Robust Error Handling: The UI gracefully handles API failures and even broken image links, falling back to placeholders without crashing.
- Full Responsiveness: The two-column desktop layout seamlessly transitions to a stacked, touch-friendly mobile layout.
- Accessibility First: All interactive elements are semantic (
<button>) and fully keyboard-navigable with clear focus states. The modal can be closed with theEscapekey, ensuring usability for everyone.
To run this project on your local machine, please follow these steps:
- Clone the repository:
git clone https://github.com/your-username/remwaste-challenge.git
- Navigate into the project directory:
cd remwaste-challenge - Install all necessary dependencies:
npm install
- Create a local environment file: Create a
.envfile in the project root and add the following line:VITE_API_URL=https://app.wewantwaste.co.uk/api/skips/by-location?postcode=NR32&area=Lowestoft - Run the development server:
npm run dev
The application will then be available at http://localhost:5173.