Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/juliankrzysiak/404-page
Slot Machine 404 Page
https://github.com/juliankrzysiak/404-page
404 404-page not-found
Last synced: about 1 month ago
JSON representation
Slot Machine 404 Page
- Host: GitHub
- URL: https://github.com/juliankrzysiak/404-page
- Owner: juliankrzysiak
- License: mit
- Created: 2024-02-11T05:00:32.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-02-22T23:32:34.000Z (11 months ago)
- Last Synced: 2024-05-10T23:23:00.166Z (9 months ago)
- Topics: 404, 404-page, not-found
- Language: TypeScript
- Homepage: https://404-page-7ty.pages.dev/
- Size: 188 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
## About The Project
### Screenshot
### Built With
### Inspiration
I wanted to create a 404 page that matched the main theme and style of [Codédex](https://www.Codédex.io/), gamification. It should be something that was informative while also being a small game in of itself.
Wanting to combine the Codédex coin with a game, my mind naturally wandered to making a Slot Machine. The slot numbers would be the response code, and a user could win by getting a "good" response code, 200.
And just like a Slot Machine, a flurry of coins would fall randomly when a winning spin had been achieved.
I also added the ability to drop even more coins when the user won to supoprt the gaming theme moreso; and thus, my idea had come to fruition.
### Features / Usage
- Slot Machine progressing through random numbers
- Will always land on 404 when page is first loaded
- Will always land on 200 (or any other number) in a random number of spins within a defined range, eg., the default is set to 3-5, so it will take 3, 4, or 5 spins to win
- Can always go back to the previous page if desired
- Many Codédex coins will fall randomly when the winning spin has been achieved
- When a win has been achieved, the user can click to drop a random number of coins from the heavens
- Messages when losing are randomized so it doesn't get boring
- Enter the Konami Code for a secret Easter Egg
### Optimizations
- Built on the same Next.JS version to ensure it will work and ease transfer for the Codédex team.
- Built on the same Styled Components version to again ensure an easier transfer.
- All design choices (colors, fonts, images, etc.) were implemented to match Codédex's design system as closely as possible.
- Codédex Team can feel free to replace elements I tried to replicate, ie., buttons, with their own
- Responsive Design
- Only uses 1 extra dependency
- Motion One, a simple animation library smaller than most.
- Customization Galore, most functions have sensible default parameters which can be easily changed using objects
- Error Page is an actual error page since the main button takes you to a non-existent location
## Getting Started
To get a local copy running, follow the instructions.
### Prerequisites
* pnpm
```
npm install -g pnpm
```
### Installation
1. Clone the repo
```
git clone https://github.com/CastillejaCode/portfolio.git
```
2. Install NPM packages
```
pnpm install
```
3. Run local development server
```
pnpm dev
```
## License
Distributed under the MIT License. See `LICENSE.txt` for more information.
## Contact
Julian Krzysiak - [email protected]
## Acknowledgments
* Coin image - [Codédex](https://www.Codédex.io/)
* Favicon generator - [favicon.io](https://favicon.io/)
