TypeSymphony is a culturally immersive typing application featuring Indian storytelling elements, Holi color effects, and an engaging user experience to improve typing skills.
- Interactive Typing System: Character-by-character matching with real-time visual feedback
- Indian Cultural Elements: Traditional aesthetics, Holi-inspired color effects, and folk tales
- Engaging Storytelling: Progress through scenes as you complete typing challenges
- Performance Metrics: Track WPM (Words Per Minute) and accuracy
- User Accounts: Create profiles to save your progress and compete on leaderboards
- Particle system with Holi-inspired colors
- Animated backgrounds with parallax effects
- Ancient Indian manuscript-inspired UI
- Responsive design for all device sizes
- Client-side user authentication with localStorage
- Reusable React components
- Context API for state management
- Custom hooks for sound and animations
- GitHub Pages deployment ready
Visit TypeSymphony Live Demo to see the application in action.
To run TypeSymphony locally:
bash
git clone https://github.com/yourusername/typesymphony.git cd typesymphony
npm install
npm run dev
The application will be available at http://localhost:5173/.
typesymphony/ ├── public/ │ ├── images/ │ │ ├── background.jpg │ │ └── scenes/ │ │ ├── scene1.jpg │ │ ├── scene2.jpg │ │ └── ... │ └── sounds/ │ ├── background-music.mp3 │ ├── key-press.mp3 │ └── success.mp3 ├── src/ │ ├── components/ │ │ ├── auth/ │ │ │ ├── LoginForm.jsx │ │ │ └── SignupForm.jsx │ │ ├── game/ │ │ │ ├── StoryScene.jsx │ │ │ ├── TypingArea.jsx │ │ │ └── Stats.jsx │ │ └── shared/ │ │ ├── Button.jsx │ │ ├── HoliEffect.jsx │ │ ├── Input.jsx │ │ └── Navbar.jsx │ ├── contexts/ │ │ ├── AuthContext.jsx │ │ └── GameContext.jsx │ ├── hooks/ │ │ ├── useLocalStorage.js │ │ └── useSound.js │ ├── pages/ │ │ ├── DashboardPage.jsx │ │ ├── GamePage.jsx │ │ ├── HomePage.jsx │ │ ├── LeaderboardPage.jsx │ │ ├── LoginPage.jsx │ │ ├── ProfilePage.jsx │ │ ├── SignupPage.jsx │ │ └── StorylinesPage.jsx │ ├── styles/ │ │ └── gameAnimations.css │ ├── utils/ │ │ ├── debugLocalStorage.js │ │ └── storyData.js │ ├── App.jsx │ ├── main.jsx │ └── index.css ├── .github/ │ └── workflows/ │ └── deploy.yml ├── package.json ├── vite.config.js ├── DEPLOYMENT.md └── README.md
- Create an Account: Sign up with a name, email, and password
- Explore Stories: Browse the available Indian folk tales
- Start Typing: Select a story and begin typing practice
- Track Progress: View your WPM, accuracy, and overall statistics
- Compare Rankings: See how you stack up on the leaderboard
- React: UI components and state management
- Vite: Fast development and building
- React Router: Navigation and routing
- Tailwind CSS: Styling and responsive design
- localStorage: Client-side data persistence
- Howler.js: Sound management
See DEPLOYMENT.md for detailed instructions on deploying to GitHub Pages.
Basic deployment steps:
bash
npm run build
npm run deploy
To add new stories, edit the src/utils/storyData.js file:
javascript export const storyData = [ { scene: 7, title: "Your New Scene Title", text: "Your new story text for typing practice...", image: "scene7.jpg" }, // Add more scenes as needed ];
The Holi color effects can be customized in src/components/shared/HoliEffect.jsx by modifying the colors array:
javascript const colors = [ '#FE4365', // Pink '#FC9D9A', // Light Pink // Add or modify colors here ];
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (git checkout -b feature/amazing-feature)
- Commit your changes (git commit -m 'Add some amazing feature')
- Push to the branch (git push origin feature/amazing-feature)
- Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Inspiration from monkeytype.com
- Indian folk tales from "Krish Trish and Baltiboy" series
- Tailwind CSS for styling components
- React community for excellent documentation and tutorial