Skip to content
/ taipo Public

⌨ Multiplayer typing game built with React and socket.io

Notifications You must be signed in to change notification settings

vikvikvr/taipo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tàipo


About ℹ

Multiplayer typing game that will take your mistakes to the next level.

Get a sentence and type it as fast as you can. Look out for the typos, some letters won't be the ones you expect! 😵

It's 💯 free! Play now 👈

screenshots

Demo video 🎬

Grab some popcorns and enjoy a short cinematic montage of the app 👇

youtube preview

This video was created to showcase the product to potential stakeholders and investors, using Shotcut and Audacity. 💲

Features 💡

Multiplayer Social Login Landing page
gameplay social login landing page

Fast and realtime, will require speed and reflexes. Players can see the progress of their opponent. 🔎

Available game modes:

  • play as a guest 🥱
  • meet a random opponent 😨
  • challenge a friend 😎

You can access the multiplayer modes by signing up via Google, Facebook or GitHub. 🔑

React router prevents unhautorized users from accessing protected content. 🧭

All the game logic is handled on the server, making cheating a non-issue. 🛡

Future plans 💭

This app is still in active development, here are some ideas I'm working on:

  • Leaderboard functionality
  • Tutorial to improve UX
  • Test both back-end and front-end

Tech Stack 🛠

Front end built with Typescript, React, and Sass. State management done with Rxjs, authentication with Firebase. Animations with GSAP and sounds with Howler.js. Deployed on Netlify.

Back end written in Typescript, powered by socket.io living on an Express server. Data is handed to a mongoose model and stored in a MongoDB database. Deployed via Heroku.

Contributing 🤝

To start the development server install MongoDB before executing these commands:

$ cd server
$ cp .env.example .env
$ npm install
$ npm run dev

You can also use Mongo Atlas and change the connection string in .env. 💡


To start the client first get the API keys from Firebase console and then run:

$ cd client
$ cp .env.example .env
$ npm install
$ npm start

Happy hacking and remember: PRs are welcome! 😄