BUG-TYPING

The Bug-Typing Game is a full-stack, interactive web application designed to enhance typing speed and accuracy.

It provides a dynamic platform to improve typing skills by practicing with randomized sentences and receiving real-time performance feedback.

Key Features

**Randomized Sentence Generation:** Fetches diverse and fresh sentences from a backend API, for a new typing challenge each time.
**Real-time Typing Feedback:** Provides immediate visual cues for correct and incorrect characters as the user types.
**WPM & Accuracy Calculation:** Precisely calculates your Words Per Minute (WPM) and accuracy percentage upon test completion.
**Timer-Based Tests:** Offers a time-constrained testing environment (e.g., 30 seconds) to simulate practical typing scenarios.
**Score Tracking:** Integrates with a MongoDB backend to save and retrieve user scores, allowing for progress monitoring.
**Anti-Cheating Measures:** Disables browser typing suggestions, autocorrect, and prevents copy-pasting.
**Responsive Design:** Optimized for a consistent and smooth user experience across various devices and screen sizes.

**React.js:** Used for building the dynamic and responsive user interface.
**HTML5:** Provides the foundational structure of the web pages.
**CSS3:** Utilized for styling and visual presentation of the application.
**JavaScript (ES6+):** Implements core frontend logic, interactivity, and client-side operations.

**Node.js & Express.js:** Used to create a robust RESTful API for handling data requests and responses.
**MongoDB:** A NoSQL database for efficient storage of typing test results and sentences.
**Mongoose ODM:** An Object Data Modeling (ODM) library for Node.js, simplifying interactions with MongoDB.
**CORS Middleware:** Configured to enable secure cross-origin resource sharing between the frontend and backend.

Watch Tutorial View on GitHub

To set up and run the Bug-Typing game on your local machine for development or testing, follow these steps:

**Clone the repository:**

git clone https://github.com/garimaa001/Bug-Typing.git

**Navigate to the project directory:**
```
cd Bug-Typing
```
**Backend Setup:**
- Go to the backend folder:
```
cd backend
```
- Install dependencies:
```
npm install
```
- Create a .env file in the backend folder and add your MongoDB connection string.
- Start the backend server:
```
npm start
```
**Frontend Setup:**
- Open a new terminal and go to the frontend folder:
```
cd frontend-react
```
- Install dependencies:
```
npm install
```
- Start the React development server:
```
npm start
```
The frontend should automatically open in your browser, usually at http://localhost:3000.