An online scratchcard game. Do you feel lucky?
There are five different rewards with different sounds, 1🪙, 10🪙, 100🪙, 1000🪙 or 0🍌. It is a full-stack implementation, with the rewards generated on the server.
In order to run the project locally you need to start both the client (this repository) and the server, that can be found in its own repository, Scratch Bonanza Server.
1. Start the server.
2. Install the project dependencies:
yarn
3. Start Vite:
yarn dev
There is also an online deployment of Scratch Bonanza that can be found in here. The online version is deployed in Vercel and is configured to use an online deployment of the server, deployed in Render.
When using the online version, you should note that loading the first scratchcard will usually take around 30-50 seconds, as the project is hosted using the free tier of Render, thus the server sleeps when inactive. On rare occasions, the server might take up to 5 minutes to respond to the first call.
- Three game phases: ready, playing, ended
- Total number of coins won saved both in state and in local storage
- Number of scratchcards used saved both in state and in local storage
- Clear data functionality
- Each scratchcard features four scratchable areas that have a reward hidden underneath
- Five different reward options: 1🪙, 10🪙, 100🪙, 1000🪙 or 0🍌
- New game and restart functionality
- Stats bar at the bottom displaying total coins won and total scratchcards used
- New button is active only when all four areas have been scratched
- Help modal available in all screens
- Responsive for mobile (iPhone 13 Pro and iPhone SE) and desktop
- Animated logo
- Scratching sound while scratching implemented both on touch and on non-touch devices
- Four different sounds when revealing an award (a sound for 0 bananas, a sound for 1 coin, another sound for 10 coins, and another sound for 100 and 1000 coins)
- Sound when a new card loads
The core technologies of Scratch Bonanza are JavaScript, CSS and the Canvas API. The following libraries and tools are used:
| Name | License | Description |
|---|---|---|
| TypeScript | MIT | A strongly typed language that builds on JavaScript |
| React | MIT | Component-based, front-end interface library |
| React Router | MIT | Declarative routing for React web applications |
| React Scratchcard | MIT | A scratchcard component for React |
| Zustand | MIT | State management |
| Vite | MIT | Frontend development tooling |
| Vitest (Planned) | MIT | Unit test framework powered by Vite |
| React Testing Library (Planned) | MIT | Testing utility |
- Testing
- Different game modes with different sets of awards
- Credits
- Translations
A non-exhaustive list of all the software that was used during the development of Scratch Bonanza.
- Visual Studio Code
- Inkscape
- Audacity
- Google Chrome
- Microsoft Edge
- Mozilla Firefox
Thank you so much for your interest in my project! If you want to go a step further and support my open source work, buy me a coffee:
Copyright (c) 2023 Michael Kolesidis
Licensed under the GNU Affero General Public License v3.0.