https://github.com/mdashraful24/dream-11
BPL-DREAM XI is an interactive React-based cricket team selection app where users can build a customized team of up to six players within a credit budget. It features real-time feedback via toast notifications, strategic team selection, and immersive credit management to simulate the thrill of real-world cricket auctions.
https://github.com/mdashraful24/dream-11
daisyui html5 javascript reactdom reactjs tailwindcss toastify vitejs
Last synced: about 1 year ago
JSON representation
BPL-DREAM XI is an interactive React-based cricket team selection app where users can build a customized team of up to six players within a credit budget. It features real-time feedback via toast notifications, strategic team selection, and immersive credit management to simulate the thrill of real-world cricket auctions.
- Host: GitHub
- URL: https://github.com/mdashraful24/dream-11
- Owner: mdashraful24
- Created: 2024-12-09T12:16:49.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-04T06:23:58.000Z (about 1 year ago)
- Last Synced: 2025-06-14T23:44:30.579Z (about 1 year ago)
- Topics: daisyui, html5, javascript, reactdom, reactjs, tailwindcss, toastify, vitejs
- Language: JavaScript
- Homepage: https://b10a7-select-your-xi.netlify.app/
- Size: 675 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# BPL-DREAM XI
The **BPL-DREAM XI** app is an interactive cricket team selection platform built with React, designed to offer fans an immersive experience in forming their dream cricket team within a fixed credit budget. The app enables strategic team building while ensuring real-time feedback and a user-friendly interface.
## 🚀 Live Demo
- **Netlify:** [https://b10a7-select-your-xi.netlify.app/](https://b10a7-select-your-xi.netlify.app/)
- **Surge:** [https://b10a7-select-your-xi.netlify.app/](https://b10a7-select-your-xi.netlify.app/)
## ✨ Key Features
- **Credit Management:**
Users start with a fixed credit balance and can add credits if needed. Credits are deducted based on player bidding prices, requiring effective budgeting and decision-making.
- **Strategic Player Selection & Removal:**
Users can select up to six players while staying within the budget. Selected players can be removed at any time, with credits instantly refunded.
- **Real-Time Notifications:**
Using **React Toastify**, users receive instant feedback for all actions: successful selections, removal confirmations, duplicate warnings, and budget constraints.
## 🛠️ Technologies Used
- **React**: For building the UI and managing state.
- **CSS & Tailwind CSS**: For styling, responsive layouts, and clean design.
- **JSON**: For player data management.
- **PropTypes**: For type checking of React components.
- **React Toastify**: For interactive notifications.
- **Vite**: For fast development and optimized builds.
## 📦 Installation
To set up this project locally, follow these steps:
```bash
# Clone the repository
git clone
# Navigate to the project directory
cd bpl-dream-xi
# Install dependencies
npm install
# Start the development server
npm run dev
````
Open [http://localhost:5173](http://localhost:5173) to view it in your browser.
## 🧩 Available Scripts
* **`npm run dev`**: Start the development server.
* **`npm run build`**: Build the app for production.
* **`npm run lint`**: Lint the project using ESLint.
* **`npm run preview`**: Preview the production build.
## 📝 Project Structure
```
bpl-dream-xi/
├── public/ # Static assets
├── src/
│ ├── components/ # Reusable React components
│ ├── data/ # JSON player data
│ ├── styles/ # Tailwind & CSS styles
│ ├── App.jsx # Root React component
│ └── main.jsx # React DOM entry point
├── tailwind.config.js # Tailwind configuration
├── package.json # Project metadata & dependencies
└── vite.config.js # Vite configuration
```
## 📊 Dependencies
Here are some key dependencies used:
```json
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-toastify": "^10.0.6"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.3.3",
"tailwindcss": "^3.4.14",
"eslint": "^9.13.0",
"daisyui": "^4.12.13",
"vite": "^5.4.9"
}
```
## 🔗 Links
* **Live App:** [https://b10a7-select-your-xi.netlify.app/](https://b10a7-select-your-xi.netlify.app/)
* **React Toastify:** [https://fkhadra.github.io/react-toastify/](https://fkhadra.github.io/react-toastify/)
* **Tailwind CSS:** [https://tailwindcss.com/](https://tailwindcss.com/)
## 📌 License
This project is licensed under the [MIT License](LICENSE).
---
Enjoy strategizing and building your dream cricket team! 🏏