Skip to content

A modern web application designed to help users practice and test their knowledge of Romaji through interactive challenges.

License

Notifications You must be signed in to change notification settings

KrishGaur1354/romaji-challenge

Repository files navigation

Romaji Challenge

Vercel Deployment

An elegant web application designed to help users master Japanese characters through interactive challenges and intuitive drawing recognition.

✨ Features

Core Features

  • 🎮 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

Technical Features

  • 📱 Responsive design (mobile-friendly)
  • ⚡ Optimized performance with Vite
  • 🎨 Modern UI with Tailwind CSS
  • 🔔 Elegant notifications with Sonner
  • 🎭 Smooth animations with Framer Motion

🎯 How It Works

Character Recognition

The app uses a sophisticated pattern-based recognition system that:

  1. Tracks each stroke's direction and position
  2. Analyzes stroke patterns in real-time
  3. Provides instant visual feedback
  4. Matches patterns against known character forms

Drawing Interface

  • Smooth, responsive drawing surface
  • Real-time stroke analysis
  • Visual feedback for each stroke
  • Clear and intuitive controls

🛠️ Tech Stack

  • Framework: React (TypeScript)
  • Build Tool: Vite
  • Styling: Tailwind CSS
  • Animations: Framer Motion
  • State Management: React Query
  • Notifications: Sonner
  • Hosting: Vercel

📂 Project Structure

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

💻 Getting Started

Prerequisites

Installation

  1. Clone the repository:
git clone https://github.com/KrishGaur1354/romaji-challenge.git
cd romaji-challenge
  1. Install dependencies:
npm install
# or
yarn install
# or
pnpm install
  1. Start the development server:
npm run dev
# or
yarn dev
# or
pnpm dev

The app will be available at http://localhost:5173/

🚀 Deployment

The app is deployed on Vercel. To deploy your own instance:

  1. Fork this repository
  2. Import to Vercel
  3. Deploy!

Deploy with Vercel

🤝 Contributing

Contributions are welcome! Here's how you can help:

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature/amazing-feature
  3. Commit your changes: git commit -m 'Add amazing feature'
  4. Push to the branch: git push origin feature/amazing-feature
  5. Open a Pull Request

📝 License

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

🙏 Acknowledgments

  • 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

🔗 Links

About

A modern web application designed to help users practice and test their knowledge of Romaji through interactive challenges.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published