TypeFlow - Modern Typing Practice App

A cyberpunk-themed typing practice application with real-time performance tracking and a sleek, responsive design.

🌐 Live Demo

Visit the app: TypeFlow

🚀 Features

• Real-time WPM (Words Per Minute) tracking
• Accuracy statistics
• Multiple difficulty levels
• Cyberpunk-inspired UI with neon effects
• Responsive design for all devices
• Smooth cursor animations
• Performance analytics

🛠️ Tech Stack

• Next.js 14
• TypeScript
• Tailwind CSS
• Framer Motion
• React Icons

🎨 Design

• Dark cyberpunk theme (#0a0a0f)
• Neon accents (Cyan: #00B8D9)
• Glass morphism effects
• Responsive layout
• Custom animations

🔧 Development Setup

1. Clone the repository:

git clone https://github.com/geekylax/typing-practice.git
cd typing-practice

2. Install dependencies:

npm install

3. Run development server:

npm run dev

4. Build for production:

npm run build

🌐 Deployment

The app is now deployed on Cloudflare Pages (previously on Vercel). Here are both deployment options:

Vercel Deployment (Previous)

npm install -g vercel
vercel --prod

Cloudflare Pages Deployment (Current)

1. Install Wrangler CLI:

npm install -g wrangler

2. Login to Cloudflare:

wrangler login

3. Build the project:

npm run build

4. Deploy to Cloudflare Pages:

wrangler pages deploy out --project-name typing-practice

Note: The app is now live at TypeFlow

🤖 Development Process with AI

This project was developed using Claude AI in Windsurf VSCode. Here are the key development prompts and steps used:

Initial Setup

1. "Create a modern typing practice app with Next.js and TypeScript"
2. "Add Tailwind CSS for styling"
3. "Implement basic typing test functionality"

UI Development

4. "Design a cyberpunk theme with neon effects"
5. "Add glass morphism panels and gradient backgrounds"
6. "Implement smooth cursor animations"

Features

7. "Add real-time WPM calculation"
8. "Implement accuracy tracking"
9. "Create multiple difficulty levels"

Optimization

10. "Optimize performance and bundle size"
11. "Add responsive design for mobile devices"
12. "Configure Cloudflare Pages deployment"

📱 Responsive Design

• Mobile-first approach
• Adaptive layout for all screen sizes
• Touch-friendly interface

🔜 Future Improvements

• User accounts and progress tracking
• Custom practice texts
• More detailed analytics
• Keyboard heatmap
• Multiplayer mode

📄 License

MIT License - feel free to use this project for learning or personal use.

👨‍💻 Author

Created by Lakshmanan

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with Next.js
• Styled with Tailwind CSS
• Animations by Framer Motion
• Icons from React Icons
• Developed using Windsurf VSCode with Claude AI

---

Made with ❤️ by geekylax