Type Dash

A 1v1 or group typing challenge game, created for conducting live Typing Race Events in an Exhibition or a Competition

View Demo · Report Bug · Live Demo · UI Link

About The Project

Type Dash is a dynamic real-time multiplayer typing competition platform designed for conducting live typing race events in exhibitions, competitions, and casual gaming. Whether you're organizing a 1v1 duel or a group tournament, Type Dash provides an engaging space-themed environment where players can compete, improve their typing skills, and climb the leaderboard.

Use Cases

1v1 or 1vn Competition: Players compete in real-time group typing competitions with instant results and rewards for winning players. Perfect for live events and competitions.

All Players Competition: Players compete in group competitions by registering with their unique Player ID. Type Dash stores the highest score for each registered user, allowing rewards to be distributed based on leaderboard rankings at the end of typing events.

Key Features

🚀 Real-Time Typing Challenges - Compete with friends, family, or groups in live typing races

📊 Leaderboard Rankings - Stores and displays the highest scores for each player

🎮 Easy Login System - Quick player registration using unique Player ID from the home page

👨‍🚀 Avatar Selection - Choose from various avatars for better user experience with a space-like theme

⚡ Live WPM Updates - Real-time words per minute tracking and avatar movements on the race track

⌨️ Shortcut Keys - Complete mouseless experience with keyboard shortcuts

🎯 Two Difficulty Levels - Different sentence types to test typing performance on various characters (dots, commas, simple letters)

🚦 Traffic Light Timer - Countdown indicator before starting matches to ensure all users are ready

🎲 Random Avatar Names - Quick sign-up with a variety of randomly generated avatar names

📈 Performance Analytics - Shows WPM and accuracy statistics after completing matches

✨ Optimized TsParticles - Beautiful space-themed background with twinkling stars and particle effects

Checkout the live link here (Note: It might take few minutes to load due to server inactivity).

Built With

Getting Started

Type Dash can be set up in multiple ways depending on your needs. Choose the setup method that works best for your environment:

🚀 Quick Setup Options

Option 1: Docker Setup (Recommended)

Perfect for production and easy deployment with all dependencies included. View Complete Guide at DOCKER_INSTRUCTIONS.md

# Clone the repository
git clone https://github.com/anisharma07/TypeDash
cd Type-Dash

# Start with Docker (includes MongoDB)
chmod +x scripts/start.sh
./scripts/start.sh

# Access the application
# Local: http://localhost:2360
# Network: http://YOUR_IP:2360

Option 2: Manual Development Setup

Best for development and customization. See DEVSETUP.md for detailed instructions.

# Clone the repository
git clone https://github.com/anisharma07/TypeDash
cd Type-Dash

# Install dependencies
npm install

# Configure environment (.env file)
MONGODB_URI=mongodb://localhost:27017/TypeDash

# Start the application
npm start

# Access the application
# Local: http://localhost:2360
# Network: http://YOUR_IP:2360

Prerequisites

For Docker Setup:

• Docker & Docker Compose
• Git

For Manual Setup:

• Node.js (v16 or higher)
• npm or yarn
• MongoDB (local or Atlas)
• Git

Environment Configuration

Create a .env file in the root directory:

# For local MongoDB
MONGODB_URI=mongodb://localhost:27017/TypeDash

# For local development with docker (default)
MONGODB_URI=mongodb://mongo:27017/TypeDash

# For MongoDB Atlas
MONGODB_URI=mongodb+srv://username:[email protected]/TypeDash

# Optional configuration
NODE_ENV=development
PORT=3000

Playing Suggestions

1. Local Network Hosting

• Copy the Network Ip from your computer, also logged when you run the application
• Share the ip with your devices running the same wifi network.
• Access the app on http://<your_ip_address>:2360

2. NGROK

• Install ngrok and create a temporary link to the port where app is running...
• share the link with your friends and enjoy typing...

3. Host on Cloud Service:

• Use Aws or any other cloud service to host the application
• Use the public Ip or domain from service provider to access the application online.

For Optimal Visual Experience, I Recommend:

To adjust screen size using

CTRL + or CTRL -

or using the zoom icon from the browser window