Welcome to TheABH 2024! This React-based application lets users select and manage a team of cricket players for upcoming BPL ,simulating a fantasy team management experience with coin-based player selection. The application’s design follows the guidelines from Figma.
This project is part of Assignment 07 and involves building a user-friendly UI where users can select players, manage their team under coin limitations, and navigate between different sections. The app uses React, React-Toastify for alerts, and LocalStorage for optional login functionality.
- React: UI development
- React Toastify: User notifications
- Tailwind CSS: Styling framework
- Font Awesome: Icons
- LocalStorage: For optional login persistence
- Figma: Design reference
-
Navbar
- Matches Figma design and displays user's available coins (starting at 0).
-
Banner
- Styled heading, text, and background according to Figma.
- "Claim Coins" button to increase user’s coin balance for player purchases.
-
Player Management
- Available & Selected Toggle: Buttons to switch between available and selected players.
- Player Card Layout:
- Available players displayed in a 3-column layout.
- Shows player details: Name, country, image, role, batting/bowling type, and bidding price.
- "Choose Player" button checks coin availability and selects players.
- Selected Player Section:
- Shows selected players in a one-column layout with image, name, role, and price.
- Includes a "Remove" button for deselection.
-
Player Selection Rules
- Alerts if user lacks coins for a player.
- Limits selection to a maximum of 6 players.
- Avoids duplicate selections.
-
Newsletter Section
- Styled to match Figma design with an optional login feature.
- Subscription stores email in LocalStorage, showing a personalized message on reload if email exists.
-
Footer
- Follows Figma design guidelines.
- Persistent Login in Newsletter: Stores user email in LocalStorage and displays a welcome message if already subscribed.
- React Toastify: Replaces traditional alerts with modern, unobtrusive notifications.
- Add More Player Button: Toggles back to available players for continued selection.
- Validation: Ensures only available players can be selected, checks coin limitations, avoids duplicate selections, and restricts team size to six players.
- Player Selection Validation: Prevents duplicate selections and enforces maximum team size.
- Notification System: Replaced default alerts with React-Toastify for a better user experience.
- Conditional Rendering: Dynamically shows Available or Selected players with corresponding toggle button colors.
Live Site Link-