CasCade is a classic arcade single-page application. This application provides an intuitive front-end layout powered by Archive.org’s Internet Arcade collection. I made this application to provide an easy-to-use, inviting design that allows users to access and play their arcade favorites.
This application offers multiple views to access the game library, including Library, Favorites, Search, and Shuffle. This app was built using React, RESTful APIs via json-server, notistack notification library, and styled with Material-UI.
A working demo is available on Heroku1 at https://cascade-app.herokuapp.com/.
Register a new account2 or use the email address [email protected] to login and browse the app.
- Download and install Node.js and npm.
- Use https or SSH to clone the project folder to a local directory:
$ git clone ...
- From the cloned project directory:
$ npm install
- Install the JSON Server node package:
$ npm install -g json-server
- Navigate ⬆ up from the cloned project one directory level, create a new directory and copy the default database.json file:
$ cd .. && mkdir ./casCade-database && cp ../casCade/api-base/database.json ./casCade-database
- Move qto the casCade-database directory and launch JSON Server:
$ cd ./casCade-database && json-server --watch default-entries.json --port 8088
- Use your preferred code editor to find & replace the string
https://cascade-app.herokuapp.com/withhttp://localhost:8088/in the following files:./src/components/auth/Login.js./src/components/auth/Register.js./src/components/favorites/FavoritesProvider.js
- From the project root directory, run the following:
$ npm start
- Once casCade loads in the browser, click the Register tab to sign up for a new account and login.
casCade is comprised of five sections:
- Home
- Library
- Favorites
- Search
- Game Player
Home provides basic getting started instructions, a minified search bar and shuffle option.
Using the search affordance will redirect you to the Search view to view the results. The shuffle option will select a game at random and load the game player.
Library provides a list of titles available from the Internet Arcade collection. To optimize the application, library results are limited to 150. This can be altered in the LibraryList react hook, located in ./src/components/library/Library.
Game cards contain game details, notes, and favorite status. Game details include release date and publisher and category. If available, user notes are also displayed. The favorites button will add a game to the current user's favorites, if a title has already been added, this option will allow the user to redirect to the game title in favorites.
The Favorites view provides the same options as the Library view, with the addition of being able to add and edit notes and remove titles from the Favorites list.
Once a title is successfully modified, the browser displays a toast-style notification in the lower right-hand corner.
The Search view allows users to locate games by title and view any associated results. If the game does not exist in the database, the page will confirm that no matching results are found.
The Game cards provide the same features as the Library view.
Clicking the play button on any game card or using the Shuffle option will load the selected game to the player.
Selecting the power button above the game preview will load the game in the embedded emulator. The help button in the upper right corner will provide basic game controls. Game details are also available in the player.
- [1] Heroku will periodically cycle apps into a sleep state, please allow an additional moment on first load. ↩
- [2] Heroku will reset the
json-serverdatabase to its default state from time to time, expect all demo account data to be removed. ↩