RaveWave.V2.mp4
By combining Kahoot with Spotify, RaveWave creates a competitive and fun music guessing game to play among friends. This is the repository of the front-end part of our implementation, you'll find the back-end part here.
The client is written in TypeScript using React. For styling Mantine components are used.
To establish a connection between the front- and backend REST is used. When further proceeding in the game (invite players), a stomp websocket connection gets established.
The SelectGameMode view allows the users to choose a game mode, select the number of game rounds and select the playback duration. In addition, the user can choose from a variety of playlists. The game configuration is sent to the backend via the stomp websocket connection as soon as the host invites players to the game.
The different game mode views, namely GuessSong , GuessArtist, GuesLyrics are the most important component of RaveWave. This is where the users can listen to music and can give their guesses. Again, the communication with the backend is done with stomp websockets.
Lastly, PostRound and PostGame are a central part of the frontend. PostRound displays the game results after every round and PostGame displays the results at the very end of the game.
The GameController controls the game states as soon as the stomp websocket connection is established. The GameController subscribes as a listener and handles the different game states and decides which views are rendered.
-
npm run dev
Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits. You will also see any lint errors in the console.
-
npm run build
Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes. Your app is ready to be deployed!
- New game mode: Guess the lyrics
- Global RaveWAver leaderboard
- Submit Quota Extension request (takes about six weeks)
SoPra Group 17 2022 consists of Marco Leder, Valentin Hollenstein, Dennys Huber, Sheena Lang and Isabella Chesney.
We first want to thank our teaching assistant Tarek Alakmeh for his help during the last semester, as well as our previous teaching assistant Kyrill Hux. We also thank Spotify for providing such a well documented API and Kahoot for the inspiration. It has been a very educational and challenging semester, and we are very thankful for this experience.
Apache-2.0 license