BPL-DREAM 11 allows users to choose cricket players within a coin-based budget. The application mimics a fantasy league system, enabling the selection of players, toggling views between available and selected lists, and ensuring logical constraints such as no duplicates and team size limits. The interface is designed to match the provided Figma UI and ensures a seamless user experience.
- React.js – Front-end library for building UI
- Tailwind CSS – Utility-first CSS framework for design
- React-Toastify – For elegant toast notifications
- JavaScript (ES6+) – Logic and interactivity
- Figma – For design inspiration
- Users start with zero coins and can earn coins using the Free Claim Coin button.
- Players have bidding prices, and can only be selected if enough coins are available.
- Duplicate selections and max team size (6 players) are strictly validated.
- Clean UI buttons let users switch between available and selected players.
- Selected section dynamically displays how many players are chosen.
- All alerts replaced with React-Toastify for better UX.
- Follows Figma layout
- Displays total user coins dynamically
- Includes button to increase coins
- Show player name, image,About
- "Choose Player" adds them to selection (with validation)
- One-column cards with player details and remove functionality
- Styled form with LocalStorage-based subscription
- Fully Figma-inspired footer layout
- ❗ Prevent duplicate selections
⚠️ Max 6-player team rule enforced- 🚫 Selection disabled if coins are insufficient
- 🔁 Toggle between available and selected players
- 🧹 Remove player from team easily
- 🔔 All alerts use
react-toastify
git clone https://github.com/sadhin28/react-cricket-project.git
cd bpl-dream11
npm install
npm run dev