A modern web application built with React, TypeScript, and Vite that allows bingo organizers to register drawn numbers while players can easily track which numbers have already been called.
The application provides a clean, responsive, and intuitive interface, making it suitable for use on desktops, tablets, or large display screens during bingo events.
- Register drawn numbers from 1 to 90
- Prevent duplicate numbers from being added
- Highlight the latest drawn number
- Display the complete 1–90 bingo board
- Visually distinguish drawn and remaining numbers
- Show the draw history
- Start a new game with confirmation
- Responsive design
- Local storage persistence (planned)
- Smooth animations (planned)
- React 19
- TypeScript
- Vite
- Tailwind CSS 4
- Lucide React
- Motion
- Vitest
- React Testing Library
- ESLint
- Prettier
src/
├── assets/
├── components/
│ ├── bingo/
│ └── ui/
├── constants/
├── hooks/
├── lib/
├── store/
├── types/
├── utils/
├── App.tsx
└── main.tsx
git clone https://github.com/GusGrecco/BinGu.gitcd bingupnpm installpnpm devThis project was created to practice and demonstrate modern Front-End development concepts, including:
- Component-based architecture
- Type-safe development with TypeScript
- State management
- Responsive UI design
- Clean Code principles
- Reusable components
- Accessibility best practices
- Automated testing
- Professional project structure
- Draw numbers from 1 to 90
- Prevent duplicate entries
- Display draw history
- Highlight the latest drawn number
- Persist data using Local Storage
- Add animations
- Implement dark mode
- Improve accessibility
- Add unit and component tests
Contributions are welcome!
If you have suggestions for improvements or new features, feel free to open an issue or submit a pull request.
This project is licensed under the MIT License.