{"id":24546703,"url":"https://github.com/nahidn228/dream-xi-react-spa","last_synced_at":"2026-05-03T22:32:26.394Z","repository":{"id":265686363,"uuid":"896481269","full_name":"nahidn228/Dream-XI-React-SPA","owner":"nahidn228","description":"This project provides a platform to assemble a cricket team from a list of available players while managing a limited budget (coins). The design matches a pre-defined Figma layout and includes user-friendly features for selection, validation, and feedback.","archived":false,"fork":false,"pushed_at":"2024-11-30T13:37:16.000Z","size":674,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-05T16:58:52.856Z","etag":null,"topics":["daisyui","es6-javascript","javascript","react","reacttoastify","tailwindcss"],"latest_commit_sha":null,"homepage":"https://dream-xi.surge.sh/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nahidn228.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-30T13:32:35.000Z","updated_at":"2025-01-11T17:21:47.000Z","dependencies_parsed_at":"2024-11-30T14:34:38.819Z","dependency_job_id":"1bb12a20-fa97-41da-93b4-e751ffdb46da","html_url":"https://github.com/nahidn228/Dream-XI-React-SPA","commit_stats":null,"previous_names":["nahidn228/dream-xi-react-spa"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nahidn228/Dream-XI-React-SPA","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nahidn228%2FDream-XI-React-SPA","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nahidn228%2FDream-XI-React-SPA/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nahidn228%2FDream-XI-React-SPA/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nahidn228%2FDream-XI-React-SPA/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nahidn228","download_url":"https://codeload.github.com/nahidn228/Dream-XI-React-SPA/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nahidn228%2FDream-XI-React-SPA/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32587817,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T22:12:39.696Z","status":"ssl_error","status_checked_at":"2026-05-03T22:09:10.534Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["daisyui","es6-javascript","javascript","react","reacttoastify","tailwindcss"],"created_at":"2025-01-22T22:16:35.997Z","updated_at":"2026-05-03T22:32:26.376Z","avatar_url":"https://github.com/nahidn228.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BPL-DREAM 11\n\n## Live Link: [BPL-DREAM 11](https://dream-xi.surge.sh/)\n\n\nBPL-DREAM 11 is a React-based web application where users can manage and select their dream cricket team. Built this app replicates the thrill of forming a cricket team within a budget by enabling users to choose players, track budget in coins, and validate each selection based on team composition rules.\n\n## 📖 Project Overview\n\nThis project provides a platform to assemble a cricket team from a list of available players while managing a limited budget (coins). The design matches a pre-defined Figma layout and includes user-friendly features for selection, validation, and feedback.\n\n## 🚀 Technologies Used\n\n- **React** for building the user interface\n- **React Toastify** for enhanced alert and notification handling\n- **JavaScript (ES6)** for logic and interactivity\n- **Tailwind CSS** for styling consistency\n- **Daisy UI** for styling navbar, card, footer\n\n## ✨ Key Features\n\n1. **Player Selection with Coin Management**: Users can select players within a budget, view detailed player info, and receive validation feedback based on their selections.\n2. **Selection Validation**: Alerts for duplicate players or max player limit using React Toastify ensure users adhere to selection rules.\n3. **Interactive Design**: Toggle between available and selected players, and use an \"Add More Players\" option to revisit player selection.\n\n## ⚠️ Challenges \u0026 Learnings\n\nWhile building this project, I encountered a few notable challenges:\n\n1. **Dynamic Coin Display in Navbar**: I initially used two states to manage the coin count, which led to synchronization issues in dynamically updating the coin balance in the navbar. I learned how to consolidate states and improve state management in React.\n\n2. **Updating Coin Balance After Player Deletion**: Ensuring that removing a player added back their bidding price to the available coins in the navbar required careful attention to state updates.\n\n3. **Customizing React Toastify**: Configuring custom notifications to make React Toastify alerts visually cohesive with the app's style took extra effort, but it greatly enhanced user experience.\n\n## 📋 Detailed Requirements\n\n### Navbar\n\n- Displays user coins starting at 0, with the ability to add coins via the banner button called \"Claim free credit\".\n\n### Banner\n\n- Interactive button that adds coins to the user's budget for player purchases.\n\n### Main Section\n\n- Buttons to toggle between **Available** and **Selected** players.\n- Dynamic count of selected players displayed.\n\n### Player Cards\n\n- Players are displayed in cards (3-column layout) with details including name, country, role, type, and bidding price.\n- **Choose Player** button on each card to add players based on coin availability.\n\n### Selected Players\n\n- Shows selected players with a **Remove** button, allowing players to be removed from the team.\n\n### Newsletter and Footer\n\n- Designed to match the Figma layout for a consistent UI experience.\n\n### Challenges and Validation\n\n- Duplicate player selection, max team size alerts, and React Toastify for notifications..\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnahidn228%2Fdream-xi-react-spa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnahidn228%2Fdream-xi-react-spa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnahidn228%2Fdream-xi-react-spa/lists"}