Sensory Bingo Game

Author: MARTIN OPUTA

This project was bootstrapped with Create React App. View the deployed live version: https://bingo-game-gcnn.onrender.com

TECHNOLOGIES USED FOR THIS PROJECT

1. React
2. TypeScript
3. Material-UI
4. Styled Compononents
5. CSS3
6. React-Use
7. React-Confetti
8. Unicode-Emoji
9. Render

HOW TO RUN THIS PROJECT:

1. Clone this project: git clone https://github.com/iprowriter/bingo-game.git
2. Run npm install at the root of the folder (bingo-game)
3. Run npm start

Open http://localhost:3000 to view it in the browser.

REASONS FOR USING TECHNOLOGIES MENTIONED ABOVE

1. React is the dependable library. It is suitable for this project because it is fast and no SEO required. In case SEO is required fo this project, then it will be better to switch to NextJs.
2. TypeScript used in this code to enforce type.
3. Material-UI (MUI) is an easy CSS framework that works perfectly with react. Another good option to consider in place of TypeScript is Tailwind Css.
4. Styled-Components allowed the use of normal CSS in MUI.
5. Some of the components feature could not be achieved using MUI. Therefore, it was necessary to use bare-boned CSS at some point.
6. React-Use was used in this project to be able to access with window object and used it with a library called React-Confetti.
7. React-Confetti is a lightweight CSS library for achieving confetti effect on react projects. It was used in this project to display Confetti effect when a player wins the game.
8. Unicode-Emoji was also used to make the data a lit bit more colorful
9. Render platform was used as an alternative to Heroku in the deployment of this project. Click this link to view the live version of the game: Bing-game-live-version

HOW TO PLAY THIS GAME:

• 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