A block diagram explaining the overall architecture of our web app
Create Game page
Waiting for other players to join
Player answer the question
Waiting for other players to answer the question
Player picks answer of some other player
The results are displayed
The score board is displayed at the end
The inspiration to build this came after playing endless hours of ludo, with my friends I wanted to do something better and also after watching Salvatore Sanfilippo's talk on redis streams, pumped us to do something interesting
Groschat: A realtime multiplayer game
What it does
This lockdown has been long for all of us, all of us have yearned to meet our friends and family. Groschat is a fun game you can play with your friends, answer questions about each other. So the game begins when a Sandy gets bored and decides to come to Groschat , he or she creates a new and waits for players to join, Eurus joins, Harry joins, Rohan joins
Once everyone has joined Sandy decides the game length and starts the game.
All the user's are shown the question, "What superpower does Rohan wish he/she had?"
- Sandy answers "Running fast like flash", and waits for Eurus, Harry, and Rohan
- Eurus Answers "Psychic powers to read anybody's mind", and waits for Rohan and Harry
- Rohan Answers "Flying like Iron Man", and waits for Harry
- Harry Answers "He is fine the way he is"
The game collects all answers and every one is show all the answers except their own answer, (you can't choose the answer you wrote)
Rohan is shown all the answers in a jumbled order
- Psychic powers to read anybody's mind
- He is fine the way he is
- Running fast like flash
Rohan chooses the third answer, "Running fast like flash" and waits for others to answer
Harry also chooses, "Running fast like flash",waits
Eurus chooses "Flying like Iron Man", waits
Sandy chooses "He is fine the way he is"
The collects all the chosen answers and tells every one whose answer did they choose and who who choose their answer?
In this Round Eurus chose Rohan's answer and her answer Psychic powers to read anybody's mind was not chosen by anybody. So she gets the following message from the game.
You choose Rohan's answer
Your answer was chose by none
Then all the players are shown the scorecard for this round, Sandy is in the lead
All the players click on ready and wait for everyone to be ready.
After all of the players are ready the game shows the next question
After 5, 7, 10 rounds the game is over and all the players are shown their scores and the game comes to and end.
How we built it
This game was built using MongoDB, React, Redux, Express, Node and Redis Streams and Data Structures.
MongoDB: This is used to store user info, and questions in the game, addtionally it stores data about the previous games
Node: NodeJS works as backend of the application the players communicate to the Redis streams by the means of POST Requests.
React: React is used for the frontend of the application where the user interacts with the game.Redux is used for state management of the game. Material UI's design system is also used to power the frontend.
Express: Acts as a middleware. Proper MVC architecture is followed while designing the backend.
Redis Streams: They are used for in game communication, every game uses a total of 4 streams
Challenges we ran into
React & Redux challenges
While making the frontend like setting up theming and components using Material UI, Then there was the challenge of updation state with each event in the redux store
Setting up express and using middleware for custom error handling,
Setting up redis for was chalenge to start working we have to setup redis-server and the redis-cli, which came up as a challenge for someone who hasn't used redis before, as well as hosting it online. Then came the challenges of setting up the full stack application. We use lists, hashes and sorted sets along with streams to enable communication between different parties
Accomplishments that we're proud of
We were able to make a decent enough gaming application for our friends and family to play.
What we learned
- Using JWT authentication in NodeJs
- Implementing Model-View-Controller pattern in backend
- Setting MongoDB Atlas
- Defining Complex Schema's in MongoDb
- How to setup a full stack application using the MERN stack
- How to Deploy a web app
- Setting up Redis on our machines
- Using Redis Streams
- Communication using different streams
- Using Lists in Redis
- Using Sorted Sets in Redis
- Using Hashes in Redis
- Using Redis on the NodeJS backend
- Setting up Redis Enterprise Edition
What's next for Groschat
We plan to use RediSearch for searching of users and questions. We may also use RedisGraph to connect friends request, we also plan to provide each user his/her own unique bar code for each game he creates. We also plan to make mobile app for our future using React Native