Skip Selector Application

A React TypeScript application for selecting waste disposal skips with modern UI and mobile responsiveness.

Project Overview

This project implements the "Select Skip" step (step 3) of a waste management booking flow, featuring:

• Professional dark theme design with 3D effects
• Mobile-first responsive layout
• Real-time API integration
• Modern React patterns with TypeScript

Tech Stack

• React 18 with TypeScript
• Tailwind CSS for styling
• Axios for API requests
• React Router for navigation
• Lucide React for icons

Installation

# Clone and install dependencies
npm install

# Install required packages
npm install react-router-dom axios lucide-react

# Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer @types/react-router-dom
npx tailwindcss init -p

# Start development server
npm start

Configuration

Tailwind Setup

Configure tailwind.config.js with custom colors and animations for the dark theme design.

Axios Configuration

API client configured with:

• Base URL: https://app.wewantwaste.co.uk/api
• Timeout: 10 seconds
• Error handling with retry logic

Approach

Design Decisions

1. Dark Theme: Modern professional aesthetic matching the original design
2. 3D Effects: CSS transforms for desktop, simplified for mobile performance
3. Component Structure: Minimal splitting - only BackgroundEffects, FilterSection, and SelectedSkipSummary as separate components
4. Mobile Optimization: Removed scale effects, optimized spacing, touch-friendly interactions

API Integration

• Direct axios calls in components
• Error handling with user-friendly messages
• Loading states with professional spinners
• Real skip images with fallback illustrations

Responsive Strategy

• Mobile: Single column, simplified animations, compact UI
• Tablet: 2-column grid, medium elements
• Desktop: 4-column grid, full 3D effects, advanced interactions

Key Features

• Skip Filtering: Filter by size, road placement, heavy waste allowance
• 3D Card Effects: Perspective transforms with depth shadows (desktop only)
• Image Handling: Real skip images from Supabase with error fallbacks
• State Management: Clean React hooks for selection and filtering
• Animations: Staggered entrance effects, smooth transitions

File Structure

src/
├── components/
│   ├── BackgroundEffects.tsx    # Animated background elements
│   ├── FilterSection.tsx        # Skip filtering interface  
│   ├── SelectedSkipSummary.tsx  # Selection display
│   ├── SkipCard.tsx             # Individual skip cards
│   ├── StepIndicator.tsx        # Progress indicator
│   └── [other utility components]
├── config/axios.ts              # API configuration
├── pages/SkipSelectorPage.tsx   # Main page component
├── types/index.ts               # TypeScript interfaces
└── utils/index.ts               # Helper functions

Key Implementations

1. Mobile Responsiveness: Breakpoint-specific layouts with md: prefixes
2. API Error Handling: Comprehensive error states with retry functionality
3. Professional Animations: CSS transforms with performance optimization
4. Clean Architecture: TypeScript interfaces, reusable components, proper separation of concerns

Browser Support

• Modern browsers (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)
• Graceful degradation for older browsers
• Mobile browsers optimized