This is a fun Bingo app for travellers. It generates name of different places in the world randomly and the players can mark the places they have visited.
The application is responsive to changes in screen size.
- Default layout:
- Layout during the game, when some of the names have been called out:
- Last called name (Madrid) is highlighted in bold in left side panel and corresponding ticket element is highlighted with blue border.
- The names which have been called out are listed in left side panel.
- The called names which are present in the ticket are highlighted with blue background.
- Layout for two players:
- Layout during the game:
- User loads the web page in the browser.
- Arrives at the home screen which has the following components:
- The app name on the top
- An input control for the user to enter the total number of players. By default, it is one.
- A 5 X 5 bingo ticket with names of cities in each cell and a Bingo image in center.
- A button with the text 'Next City'.
- When user changes the number of players, that many different tickets are shown on the screen.
- When user clicks on the button 'Next City'
- A randomly picked city name is shown on the screen.
- If in any of the tickets, that city name is present, that cell gets highlighted.
- A list of the cities which have been called, is displayed.
- When user click on the highlighted cell:
- Colour of the cell changes indicating that the corresponding city name has been called out.
- If all the names which are vertically, horizontally or diagonally adjacent to this cell have been called out, it is a Bingo.
- If the user is just one name call away from Bingo, that city name is highlighted in the ticket.
- When there is a Bingo, all the cells which are part of the bingo combination, are highlighted with some animation to indicate the win.
- User can only enter numeric value greater than one in the 'Number Of Players' input box.
- User can mark only those city name(s) in the ticket which is being called or have been called.
- ReactJS 17.0.2
- React Hooks
- React Testing Library for Unit Tests
- Node Package Manager (npm)
- Git with a commit history
- Followed standard coding guidelines
The package has the following code folders:
- public: Boilerplate code generated by create-react-app
- src: Application specific code
- components: react components
- styles: a common stylessheet and other component specific stylesheets
- tests: component specific unit tests
- utils: utility methods, constants, images etc.
Following are the steps to load the application in browser:
- Clone the repository.
- Open command prompt and change working directory to 'bingo' from the cloned folder.
- Run "npm install". This will install all the dependencies needed for this application to run.
- Run "npm start". This will open a new tab in browser. Default URL is localhost:3000.
- To run unit tests, run "npm test" command.
- The animations and effects, when the player is one name call away from bingo and on finally getting a bingo, can be made more appealing.
- For smaller screens, the UI layout can be improved.
- Current layout: The list of cities which have been called is taking a lot of screen space.
- Suggested layout: It can be converted to an on-demand component or pop-up.
- Properly handle the change in number of players during the game.
- Current flow: If user adds/ removes players (hence tickets) during the game, new tickets are rendered with incorrectly highlighted names.
- Suggested flow: User should not be allowed to add/remove players during the game.