Welcome to TypeShii, a fast-paced multiplayer typing racing game built as part of a take-home assessment for a job application. This monorepo is managed using Turborepo and contains both the frontend and backend for the game.
TypeShii is a multiplayer game where players compete to type through a given paragraph as quickly and accurately as possible. The first player to complete the paragraph wins!
- Join or Create a Game:
- Enter an existing game ID or create a new game.
- Race to Type:
- Type the provided paragraph as quickly and accurately as possible.
- Progress is displayed in real-time for all players.
- Win:
- The first player to complete the paragraph is the winner, but all players can see their scores and rankings at the end.
- RxJS: For reactive state management and handling real-time updates efficiently.
- Storybook: For building and testing UI components in isolation.
- Framer Motion: For smooth animations and transitions.
- Vite: A fast and modern frontend build tool.
- Socket.IO: For real-time communication between the client and server.
- Node.js: Runtime for building server-side applications.
- NestJS: Framework for scalable and modular backend systems.
- Socket.IO: Library for real-time bidirectional communication.
- RxJS: Reactive programming for efficient handling of data streams.
- Redis: In-memory data store for fast state management.
- Jest: For end-to-end testing.
Follow these steps to set up and run the project locally:
Make sure you have the following installed:
- Node.js (v16 or later)
- npm (preferred dependency manager)
Clone the Repository
git clone https://github.com/ore-codes/typeshii.git cd typeshiiInstall Dependencies
npm install
Set Up Environment Variables
Create a.envfile in the root directory with the following content:# BackendPORT=3000REDIS_URL=redis://localhost:6379# FrontendVITE_SERVER_URL=http://localhost:3000
Replace values as needed based on your setup.
Run the Development Servers
npm run dev
This will start both the frontend and backend in parallel.
Run Storybook
npm run storybook --workspace=apps/web
Storybook will be accessible at
http://localhost:6006.
- Real-Time Multiplayer: Powered by Socket.IO for seamless interactions between players.
- Reactive UI: Built using RxJS to handle live updates in player progress and game states.
- Interactive Animations: Framer Motion makes the game visually engaging and smooth.
- Component Isolation: Storybook ensures high-quality, reusable UI components.
- Modern Build Tooling: Vite and Turborepo enable efficient development and builds.
- Scalable Backend: NestJS and Redis provide a solid foundation for real-time gameplay.
typeshii/
├── apps/
│ ├── web/ # Frontend (React + Vite)
│ ├── server/ # Backend (NestJS + Socket.IO)
├── package.json # Turborepo root package
├── turbo.json # Turborepo configuration
The backend provides WebSocket APIs for game interactions and REST APIs for auxiliary operations.
createGame- Create a new game session.joinGame- Join an existing game.updateProgress- Update the player's progress.leaveGame- Leave the current game.
gameJoined- Triggered when a player successfully joins a game.gameStarted- Triggered when the game starts.playerJoined- Triggered when a new player joins the game.playerLeft- Triggered when a player leaves the game.gameStateUpdated- Triggered when the game state updates.gameCompleted- Triggered when the leaderboard is ready.error- Triggered when an error occurs.
exporttypePlayer={id: string;progress: number;speed: number;typedText: string;paragraph: string;finishTime?: number;score?: number;};- Ensure the environment variables are properly configured on the production server.
- Use a process manager like PM2 or Docker for deployment.
- Build and start the application:
npm run build npm run start
Contributions are welcome! Please fork the repository and submit a pull request.
This project is licensed under the MIT License.
- Live Site: https://typeshii-ruddy.vercel.app/
- Storybook: https://67b5a18e3e293979dd71095d-akbfebirsz.chromatic.com/
Thank you for checking out TypeShii! 🚀