Skip Selection App

A sleek and responsive React + TypeScript web app for browsing and selecting skip bins based on real-time data. Includes modern features like dark mode, animated UI elements, and a clean modal experience.

_____ Tech Stack_____ React + TypeScript

TailwindCSS for styling

Framer Motion for animations

Lucide Icons for consistent iconography

React Context API for state management

Key Features Pulls skip data from:

https://app.wewantwaste.co.uk/api/skips/by-location?postcode=NR32&area=Lowestoft

Animated skip cards with hover glow effect

Modal popup with full skip details

Toggle between light and dark themes

Skeleton loaders during data fetching

Tooltips for better user guidance

Fully responsive layout for mobile and desktop

__ Development Approach __ Component-Based: Broke the UI into reusable parts like SkipCard, SkipModal, ThemeToggle, etc.

Global State: Managed selected skip and modal visibility using Context API.

Styling: Used TailwindCSS for rapid and responsive design.

Animations: Integrated Framer Motion for card and modal transitions.

Theming: Supports both system preference and manual dark/light theme switching.

__ Getting Started__ Clone the repo and run it locally:

git clone https://github.com/atumfohene/skip-selection-app.git cd skip-selection-app npm install npm run dev