https://github.com/codehass/skip-selection-page
A modern, responsive React application for selecting and booking skips, with focus on clean code, maintainability, and excellent UI/UX.
https://github.com/codehass/skip-selection-page
reactjs tailwindcss typescript vite
Last synced: 7 months ago
JSON representation
A modern, responsive React application for selecting and booking skips, with focus on clean code, maintainability, and excellent UI/UX.
- Host: GitHub
- URL: https://github.com/codehass/skip-selection-page
- Owner: codehass
- Created: 2025-06-08T09:49:17.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-06-09T09:10:15.000Z (8 months ago)
- Last Synced: 2025-06-09T10:23:10.767Z (8 months ago)
- Topics: reactjs, tailwindcss, typescript, vite
- Language: TypeScript
- Homepage: https://skip-selection-page.vercel.app/
- Size: 582 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚛 Skip Hire Booking Interface ✨
A modern, responsive React application for selecting and booking skips, with focus on clean code, maintainability, and excellent UI/UX.
## 🔥 Features
- 🌐 **Responsive Design**: Fully optimized for mobile, tablet, and desktop
- 🌗 **Dark/Light Mode**: Smooth theme switching with system preference detection
- 🎨 **Interactive UI**: Animated progress bar and skip selection cards
- 📊 **Data-Driven**: Real-time skip data from API endpoint
- ♿ **Accessible**: WCAG compliant with proper contrast ratios
- 🛡️ **Type Safe**: Built with TypeScript for better developer experience
## 🖥️ Screenshots
### Desktop
### Mobile
### Tablet
## 🛠️ Tech Stack
- ⚛️ React 18 with Hooks
- 📜 TypeScript
- 🎨 Tailwind CSS
- ✨ Lucide Icons
- 🧩 Context API (State Management)
- ⚡ Vite (Build Tool)
## 🚀 Live Demo
Check out the live demo here: [Link](https://skip-selection-page.vercel.app/)
## 📦 Installation
1. Clone the repository:
```bash
git git@github.com:codehass/skip-selection-page.git
cd skip-selection-page
```
2. Install dependencies::
```bash
pnpm install
```
3. Run the development server::
```bash
pnpm run dev
```
## Code Structure
/src
├──📂 components
│ ├── ProgressBar.tsx # Step progress indicator
│ ├── SkipCard.tsx # Individual skip display card
│ ├── SkipDetails.tsx # Detailed skip information panel
│ ├── ThemeToggle.tsx # Dark/light mode switch
│ └── Skeleton.tsx # Loading state component
├──📂 context
│ └── ThemeContext.tsx # Dark/light mode state management
├──📂 types
│ └── skip.ts # Type definitions
├── App.tsx # Main application component
└── main.tsx # Application entry point
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](https://github.com/codehass/skip-selection-page-/issues).
Join us in supporting our project to improve cabin management in hotels! Your help makes a big difference in making stays smoother and guests happier. Let's work together to bring positive change to the hospitality industry!
This project is [MIT](./MIT.md) licensed.