An elegant web application designed to help users master Japanese characters through interactive challenges and intuitive drawing recognition.
- 🎮 Interactive character recognition game
- ✍️ Intuitive drawing interface with real-time feedback
- 🎯 Pattern-based stroke recognition system
- 🔄 Seamless switching between Hiragana and Katakana
- 📊 Dynamic scoreboard for progress tracking
- 💫 Beautiful animations and visual feedback
- 🌓 Light/Dark mode support
- 📱 Responsive design (mobile-friendly)
- ⚡ Optimized performance with Vite
- 🎨 Modern UI with Tailwind CSS
- 🔔 Elegant notifications with Sonner
- 🎭 Smooth animations with Framer Motion
The app uses a sophisticated pattern-based recognition system that:
- Tracks each stroke's direction and position
- Analyzes stroke patterns in real-time
- Provides instant visual feedback
- Matches patterns against known character forms
- Smooth, responsive drawing surface
- Real-time stroke analysis
- Visual feedback for each stroke
- Clear and intuitive controls
- Framework: React (TypeScript)
- Build Tool: Vite
- Styling: Tailwind CSS
- Animations: Framer Motion
- State Management: React Query
- Notifications: Sonner
- Hosting: Vercel
src/
├── App.css
├── App.tsx
├── index.css
├── main.tsx
├── vite-env.d.ts
├── components/
│ ├── DrawingCanvas.tsx
│ ├── GameCard.tsx
│ ├── Handbook.tsx
│ ├── NetworkVisualization.tsx
│ ├── SakuraPetals.tsx
│ ├── ScoreBoard.tsx
│ ├── StrokeAnimation.tsx
│ └── ui/
├── data/
│ └── characters.ts
├── hooks/
│ ├── use-mobile.tsx
│ └── use-toast.ts
├── lib/
│ └── utils.ts
├── pages/
│ ├── Index.tsx
│ └── NotFound.tsx
├── services/
│ ├── recognitionService.ts
│ └── simpleRecognitionService.ts
└── types/
└── drawing.ts
- Clone the repository:
git clone https://github.com/KrishGaur1354/romaji-challenge.git
cd romaji-challenge- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Start the development server:
npm run dev
# or
yarn dev
# or
pnpm devThe app will be available at http://localhost:5173/
The app is deployed on Vercel. To deploy your own instance:
- Fork this repository
- Import to Vercel
- Deploy!
Contributions are welcome! Here's how you can help:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add 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.
- Thanks to all contributors who have helped shape this project
- Inspired by traditional Japanese calligraphy practice
- Built with modern web technologies and love for learning