This project is a complete redesign of the skip selection interface, transforming a dark-themed, basic layout into a modern, user-friendly experience while maintaining all original functionality.
- Modern Light Theme: Clean, professional appearance with better contrast
- Responsive Grid Layout: Optimized for mobile, tablet, and desktop
- Visual Feedback: Hover states, selection animations, and micro-interactions
- Touch-Friendly Interface: Larger tap targets and optimized spacing
- Responsive Breakpoints
- API Integration: Real-time data fetching from We Want Waste API
- Error Handling: Graceful fallbacks and user-friendly error messages
- Loading States: Skeleton components for better perceived performance
- Type Safety: Full TypeScript implementation
- Accessibility: ARIA labels, semantic HTML, and keyboard navigation
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: Shadcn/ui
- Icons: Lucide React
- Package Manager: npm
- Node.js 18.0.0 or higher
- npm 8.0.0 or higher
-
Clone the repository
git clone https://github.com/Eljyoussef/Rewaste-design cd Rewaste-design -
Install dependencies
npm install
-
Run the development server
npm run dev
-
Open your browser Navigate to http://localhost:3000
Rewaste-design/
├── app/
│ ├── globals.css # Global styles and CSS variables
│ ├── layout.tsx # Root layout component
│ └── page.tsx # Main skip selection page
├── components/
│ └── ui/ # Reusable UI components
│ ├── badge.tsx
│ ├── button.tsx
│ ├── card.tsx
│ └── skeleton.tsx
├── lib/
│ └── utils.ts # Utility functions
├── public/ # Static assets
├── next.config.mjs # Next.js configuration
├── tailwind.config.ts # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Dependencies and scripts