Video conferencing Bingo App
The Bingo app is a simple web application that generates a 5x5 bingo card with random phrases related to video conference calls!
Folder Structure
?bingo-react-app
┣ ?public
┃ ┣ ?favicon.ico
┃ ┣ ?index.html
┃ ┣ ?logo192.png
┃ ┣ ?logo512.png
┃ ┣ ?manifest.json
┃ ┗ ?robots.txt
┣ ?src
┃ ┣ ?animations
┃ ┃ ┣ ?FireworksDisplay.jsx
┃ ┃ ┗ ?WinAnimation.jsx
┃ ┣ ?components
┃ ┃ ┣ ?BingoCard.jsx
┃ ┃ ┣ ?BingoCell.jsx
┃ ┃ ┗ ?Navbar.jsx
┃ ┣ ?hooks
┃ ┃ ┣ ?useCardPhrases.jsx
┃ ┃ ┗ ?useWinSounds.jsx
┃ ┣ ?sounds
┃ ┃ ┣ ?click.mp3
┃ ┃ ┣ ?explosion0.mp3
┃ ┃ ┣ ?explosion1.mp3
┃ ┃ ┣ ?explosion2.mp3
┃ ┃ ┗ ?explosion3.mp3
┃ ┣ ?styles
┃ ┃ ┣ ?animations
┃ ┃ ┃ ┣ ?_fire-works.scss
┃ ┃ ┃ ┣ ?_win-animation.scss
┃ ┃ ┃ ┗ ?index.scss
┃ ┃ ┣ ?components
┃ ┃ ┃ ┣ ?_bingo-card.scss
┃ ┃ ┃ ┣ ?_bingo-cell.scss
┃ ┃ ┃ ┣ ?_navbar.scss
┃ ┃ ┃ ┗ ?index.scss
┃ ┃ ┣ ?.DS_Store
┃ ┃ ┣ ?Globle.scss
┃ ┃ ┣ ?_app.scss
┃ ┃ ┣ ?_main.scss
┃ ┃ ┣ ?_theme.scss
┃ ┃ ┗ ?_variables.scss
┃ ┣ ?theme
┃ ┃ ┗ ?ThemeContext.jsx
┃ ┣ ?utils
┃ ┃ ┗ ?Phrases.js
┃ ┣ ?.DS_Store
┃ ┣ ?App.jsx
┃ ┣ ?App.test.js
┃ ┣ ?index.css
┃ ┣ ?index.js
┃ ┣ ?logo.svg
┃ ┣ ?reportWebVitals.js
┃ ┣ ?service-worker.js
┃ ┣ ?serviceWorkerRegistration.js
┃ ┗ ?setupTests.js
┣ ?.DS_Store
┣ ?.gitignore
┣ ?README.md
┗ ?package.json
Light Mode
Dark Mode
How to start this project!
Note This project was created using node version v17.4.0
clone the branch
git clone https://github.com/Milan-960/Bingo-App.git
Install dependecies
npm install
run on the localhost
npm start
BACKGROUND
-
Video conferencing is an essential part of our daily work. Either working with colleagues internally or meeting with clients and partners.
-
But sometimes there's a common wording over and over again. So we created this simple fun app to enjoy video conferencing even more. ?
-
A list of common phrases like: "Sorry, I couldn't log in" or "I had connection issues" are placed randomly on a standard bingo card.
If you never played bingo before – what?? ? – here are the basic rules.
The most important rules in our version:
- A player wins by completing a row, column, or diagonal.
- There's a free slot (always on) in the middle
- You can have multiple bingos
Technologies which have been used ?
- ReactJS SPA
- React-Sounds To Provide better user experience!
- Fireworks To Provide better user experience when they win the game!
- React-icons Used for a ICONS insted using PNG
- GSAP Used for cool animation!
- React-ink For Ripple effect in the Bingo-Cell
Here are the links to the branches!
PS: This is just a GIF not original!
Here are some key findings, ideas, and potential problems for the bingo app!
- User Experience (UX) improvements:
- Adding smooth transitions or animations for a more enjoyable user experience
- Implementing a tutorial or guide for new users to learn how to use the app
- Responsiveness and mobile device support:
- Testing the app on various screen sizes and devices to ensure proper display and functionality
- Performance optimizations:
- Implementing lazy loading for components that are not immediately visible on the screen
- Accessibility:
- Ensuring the app meets accessibility standards, such as color contrast, keyboard navigation, and screen reader support
- Customization:
-
Allowing users to create custom bingo cards with their own phrases or images
-
Providing different themes or color schemes for a personalized experience
- Social features:
- Implementing multiplayer functionality to allow users to play bingo together
- Add the ability to share completed bingo cards or game results on social media platforms
- Potential problems:
- Security and data privacy concerns: Ensure proper measures are in place to protect user data and privacy
- Scalability:
- As the app grows in popularity, consider optimizing the backend and infrastructure to handle increased user traffic
- Monetization strategies:
- Implementing in-app purchases for premium features or content
- Integrate non-intrusive advertisements to generate revenue while maintaining a positive user experience
