Introducing Neno - Final

Neno

I've introduced the game and a bit of an explanation of the decisions I had to make while developing this game.

In this article, I'll be going over the different game features.

UPDATE: There game is now live at Neno

Project Structure

I've covered the project structure in the previous part of this article series. I also have a README.md file with in-depth explanations of what each component in the project does.

Copy the content of .example.env and then paste it in a new .env file in order to run this project locally.

DB structure

Screenshot 2022-04-01 at 06.10.32.png

Game Components

Authentication

The game currently supports authentication via (only on localhost due to issues with terms of service policies).

  • Facebook
  • Google

I'm currently working on adding email/phone numbers. I'll also add the ability to play as a guest.

Screenshot 2022-04-05 at 23.37.34.png

Home

The home screen shows a menu where you can perform the following operations

  • View game instructions
  • Modify game settings
  • Start a new game

Screenshot 2022-04-05 at 23.32.29.png

Mode

Users can create rooms or join an existing room. You can only join public rooms at the moment. Private rooms will need an invitation code.

Screenshot 2022-04-05 at 23.30.19.png

Creating Room

When a user creates a room, they immediately get redirected to the game lobby where they could chat with other room members until the game starts.

Screenshot 2022-03-31 at 20.46.35.png

Joining an existing room

Users can browse a list of active rooms and join a room of their choice.

Screenshot 2022-04-05 at 23.35.19.png

Game Lobby โŒš๏ธ

Users can chat with other members before the game starts. The host can customize the room's settings as well.

Only the host can customize or start the game.

Screenshot 2022-04-05 at 23.36.45.png

Game Screen ๐ŸŽฎ

Screen where user plays the quiz in real-time with their friends

Screenshot 2022-04-01 at 04.01.15.png

Challenges ๐Ÿ˜ฉ

I am having difficulties keeping the count down timer for each round in sync between the game players.

I know I'm supposed to store the timer state in the server but not sure how to keep it in sync. Will be addressing this issue over the weekend.

Current Bottlenecks

  • Implement words API.
  • I need to be able to show a live leaderboard.
  • Showing game events such as when a user joins or leaves a room.
  • Implementing optimistic ui for a more interactive user experience.

Planned Improvements ๐Ÿ†

  • Fixing the timer synchronisation issue
  • Allow users to add friends so they could invite them into rooms they create.
  • Implementing a leaderboard feature
  • Solo and offline gameplay for when users have no connectivity.
  • Animations and audio to make the game more interactive.
  • Making it fully responsive (mobile version).
  • Serving static assets via s CDN
  • Refactor the logic in GameScreen to useReducer
8
Subscribe to my newsletter

Read articles from Emmanuel Gatwech directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Emmanuel Gatwech
Emmanuel Gatwech

I am a software developer with over four years of experience and a passion for building innovative solutions that address real-world problems, having worked on various projects in various sectors. I am the founder of Sahil, an app that connects small businesses with suppliers and customers in low-income areas. Sahil is a comprehensive platform that simplifies procurement processes, connects businesses with reliable suppliers, and ensures swift, efficient deliveries. In addition to Sahil, I am actively involved in two open-source initiatives: "Planet of the Bugs", an open-source platform that curates unique, curated issues and bugs from popular open-source projects on GitHub, and "VibeCheck", which explores innovative social networking to establish more authentic connections. I am committed to advancing technology for the benefit of all, and my commitment to efficiency and problem-solving is evident in my work. My technical proficiency lies in TypeScript, Next.js, GraphQL, Redis, PostgreSQL, Node.js, and Rust.