113 lines
2.4 KiB
Markdown
113 lines
2.4 KiB
Markdown
# Type Practice
|
|
|
|
Type Practice is a web application designed to help users improve their typing skills through various practice exercises. It includes features for user registration, login, and an admin panel for managing code examples.
|
|
|
|
## Features
|
|
|
|
- User Registration and Login
|
|
- Typing Practice Exercises
|
|
- Admin Panel for Managing Code Examples
|
|
- **K-Means Algorithm Visualization** (NEW!)
|
|
- Responsive Design
|
|
|
|
## Technologies Used
|
|
|
|
- React
|
|
- TypeScript
|
|
- Node.js
|
|
- Express
|
|
- MongoDB
|
|
- Material-UI
|
|
|
|
## Getting Started
|
|
|
|
### Prerequisites
|
|
|
|
Ensure you have the following installed:
|
|
|
|
- Node.js
|
|
- npm (Node Package Manager)
|
|
- MongoDB
|
|
|
|
### Installation
|
|
|
|
1. Clone the repository:
|
|
|
|
```bash
|
|
git clone https://github.com/bobcoc/typing_practiceweb.git
|
|
cd typing_practiceweb
|
|
```
|
|
|
|
2. Install server dependencies:
|
|
|
|
```bash
|
|
cd server
|
|
npm install
|
|
```
|
|
|
|
3. Install client dependencies:
|
|
|
|
```bash
|
|
cd ../client
|
|
npm install
|
|
```
|
|
|
|
### Running the Application
|
|
|
|
1. Start the MongoDB server.
|
|
|
|
2. Run the server and client concurrently:
|
|
|
|
```bash
|
|
cd ..
|
|
npm run start
|
|
```
|
|
|
|
This will start both the server and client.
|
|
|
|
### Environment Variables
|
|
|
|
Create a `.env` file in the root directory and add the following variables:
|
|
|
|
```plaintext
|
|
# Server Configuration
|
|
PORT=3001
|
|
NODE_ENV=development
|
|
|
|
# MongoDB Configuration
|
|
MONGODB_URI=mongodb://localhost:27017/typeskill
|
|
MONGODB_DB_NAME=typeskill
|
|
|
|
# JWT Configuration
|
|
JWT_SECRET=your_jwt_secret_key
|
|
JWT_EXPIRES_IN=24h
|
|
|
|
# Client Configuration
|
|
REACT_APP_CLIENT_URL=http://localhost:3001
|
|
```
|
|
|
|
You can copy the contents from `.env.example` and modify them according to your needs.
|
|
|
|
## Usage
|
|
|
|
- Visit `http://localhost:3001` to access the application.
|
|
- Register a new account or log in with existing credentials.
|
|
- Admin users can access the admin panel to manage code examples.
|
|
- **NEW: Access K-Means visualization demo at `http://localhost:3001/kmeans`**
|
|
- See [KMEANS_QUICKSTART.md](./KMEANS_QUICKSTART.md) for quick start guide
|
|
- See [KMEANS_README.md](./KMEANS_README.md) for detailed documentation
|
|
- See [KMEANS_DEPLOYMENT.md](./KMEANS_DEPLOYMENT.md) for deployment guide
|
|
|
|
## Contributing
|
|
|
|
Contributions are welcome! Please fork the repository and submit a pull request for any improvements.
|
|
|
|
## License
|
|
|
|
This project is licensed under the MIT License.
|
|
|
|
## Contact
|
|
|
|
For any inquiries, please contact [smshine@qq.com](mailto:smshine@qq.com).
|
|
|