https://github.com/zakariasisu5/project-work
Skip size selection , App build with react, JavaScript, CSS and html
https://github.com/zakariasisu5/project-work
css front-end-development git github html javascript reactjs responsive-design vite
Last synced: 3 months ago
JSON representation
Skip size selection , App build with react, JavaScript, CSS and html
- Host: GitHub
- URL: https://github.com/zakariasisu5/project-work
- Owner: Zakariasisu5
- Created: 2025-06-04T10:42:29.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-13T17:04:50.000Z (about 1 year ago)
- Last Synced: 2025-06-19T13:06:03.941Z (about 1 year ago)
- Topics: css, front-end-development, git, github, html, javascript, reactjs, responsive-design, vite
- Language: JavaScript
- Homepage: https://project-work-mu.vercel.app
- Size: 168 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚛 Skip Size Selector
A modern, responsive React app for selecting the perfect skip size for your waste disposal needs.
Built with accessibility, mobile-friendliness, and a beautiful dark theme in mind.
---
## ✨ Features
- **Interactive Skip Selection:**
Choose from a range of skip sizes with clear details and instant feedback.
- **Responsive Design:**
Looks great on desktop, tablet, and mobile devices.
- **Dark Mode:**
Eye-friendly dark background with crisp white text.
- **Action Buttons:**
Preview, Continue, or Clear your selection with a single click.
- **Accessible & User-Friendly:**
Large buttons, clear icons, and keyboard-friendly navigation.
---
## 🚀 Getting Started
1. **Clone the repository:**
```sh
https://github.com/Zakariasisu5/project-work.git
cd your-repo-name
```
2. **Install dependencies:**
```sh
npm install
```
3. **Start the development server:**
```sh
npm start
```
4. **Open in your browser:**
🔗**Visit** https://project-work-mu.vercel.app/
---
## 🌐 Deploying to GitHub Pages
1. Add the following to your `package.json`:
```json
"homepage": "https://Zakariasisu5/github.io/project-work"
```
2. Add deploy scripts:
```json
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
```
3. Deploy:
```sh
npm run deploy
```
---
## 📁 Project Structure
```
src/
├── assets/
│ └── WASTE-BIN__ScaleMaxWidthWzEwMDBd.jpeg
├── App.js / App.jsx
├── App.css
└── SkipSelection.jsx
```
---
## 🛠️ Built With
- [React](https://react.dev/)
- [gh-pages](https://www.npmjs.com/package/gh-pages)
---
## 🤝 Contributing
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.
---
## 📄 License
[MIT](LICENSE)
---
**Enjoy your skip selection experience!**