Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/manju1807/speedtype
SpeedType is a typing game built with React, Next.js, and TypeScript. It features real-time error tracking, WPM calculation, and a sleek UI with Tailwind CSS and Framer Motion. Challenge yourself with random text snippets, track progress, and boost your typing skills. Ideal for coders and writers.
https://github.com/manju1807/speedtype
framer-motion magicui nextjs14 opengraph reactjs real-time seo tailwindcss typescript typing typing-game typing-practice typing-test typingspeedcheck typingspeedtest
Last synced: about 1 month ago
JSON representation
SpeedType is a typing game built with React, Next.js, and TypeScript. It features real-time error tracking, WPM calculation, and a sleek UI with Tailwind CSS and Framer Motion. Challenge yourself with random text snippets, track progress, and boost your typing skills. Ideal for coders and writers.
- Host: GitHub
- URL: https://github.com/manju1807/speedtype
- Owner: manju1807
- License: mit
- Created: 2024-08-11T19:58:08.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-08-12T16:46:43.000Z (3 months ago)
- Last Synced: 2024-10-11T05:03:36.143Z (about 1 month ago)
- Topics: framer-motion, magicui, nextjs14, opengraph, reactjs, real-time, seo, tailwindcss, typescript, typing, typing-game, typing-practice, typing-test, typingspeedcheck, typingspeedtest
- Language: TypeScript
- Homepage: https://speedtype-v1.netlify.app/
- Size: 669 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SpeedType: Boost Your Typing Skills
SpeedType is an interactive web-based typing game designed to improve your typing speed and accuracy. Built with a modern tech stack, it offers an engaging way to enhance your keyboard skills.
## 🚀 Features
- Real-time error tracking
- WPM (Words Per Minute) calculation
- Sleek and responsive UI
- Dark mode support
- Multi-language support (English and Spanish)
## 🛠 Key Tech Stack
- **React**: For building the user interface
- **Next.js**: For server-side rendering and routing
- **TypeScript**: For type-safe code
- **Framer Motion**: For smooth animations and transitions
- **Tailwind CSS**: For rapid and responsive styling
- **Zustand**: For efficient state management
- **Visual Studio Code**: As the primary development environment
## 🏁 Getting Started
To run the project locally:
1. Clone the repository
2. Install dependencies: `npm install` or `yarn install`
3. Run the development server: `npm run dev` or `yarn dev`
4. Open [http://localhost:3000](http://localhost:3000) in your browser
## 🌐 Deployment
The project is deployed at [https://speedtype-v1.netlify.app](https://speedtype-v1.netlify.app)
## 🎨 UI/UX
- Responsive design using Tailwind CSS
- Smooth animations powered by Framer Motion
- Customizable themes with dark mode support
## 🧠 State Management
Utilizes Zustand for efficient and simple state management
## 📊 Performance Metrics
According to PageSpeed Insights (as of Aug 12, 2024):
- **Performance Score**: 94/100 (Excellent)
- **Accessibility**: 100/100
- **Best Practices**: 100/100
- **SEO**: 100/100
These scores indicate that SpeedType is highly optimized for mobile devices, offering fast loading times, excellent accessibility, adherence to web best practices, and strong SEO fundamentals.
## 👨💻 Author
Manjunath R
## 🤝 Contributing
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
## 📝 License
This project is MIT licensed.
## Project Demo 🚀
### Video Demo
https://github.com/user-attachments/assets/fb341abe-89f6-4276-96a7-7baba0662ae1
### Screenshots
---
Made with ❤️ by Manjunath R