Turn movement into mastery: the new way to learn writing

WriteRight_Gif.mp4

Table of Contents

• ✒️ Project Overview
• 🖥️ Tech Stack & Features
• ➡️ WriteRight Basic User Flow
• 🎨 Mascots
• 📼 Video Demo
• 🔎 Looking Ahead
• 💾 Installation Instructions

✒️ Project Overview

WriteRight is an interactive app designed to help users practice Kanji handwriting with real-time feedback, created for the 24-hour BCS hackathon at UBC. It transforms your webcam into an interactive writing tool that tracks and traces your index finger movements, providing overlays to help you learn by tracing the flow and structure of the characters. By leveraging hand motion tracking technology and optical character recognition (OCR), WriteRight helps learners refine their handwriting and provides instant scores for accuracy.

Several benefits of WriteRight includes:

• ✔️ Reducing strain on hand caused by writing complex scripts with a pen and paper
• ✔️ Improves accessibility for students with ADHD/Kinesthetic learners
• ✔️ Allows students to focus on the flow and structure of characters rather than managing writing tools

🖥️ Tech Stack & Features

• React – For front-end development JavaScript library for building user interfaces.
• Vite – Build tool for development
• Node.js – JavaScript runtime for backend operations
• Google Mediapipe API – Used for hand motion tracking
• Azure AI Vision OCR – For comparing user input with the correct Kanji for accuracy score

➡️ WriteRight Basic User Flow

🎨 Mascots

📼 Video Demo

Check out the demo of WriteRight in action below:

🔎 Looking Ahead

Our team is continuing to work on WriteRight to improve the user interface and experience! Here are some of our future goals for the project:

• 📌Smoother Writing Experience: We will be making the drawing action more intuitive for the user and improving the smoothness of the lines drawn to ensure the provided score of accuracy is an accurate reflection of the user’s writing ability
• 📌Kanji Information: We will be adding details about each Kanji including the kunyomi and onyomi pronounciations, example words, etc.
• 📌Restructuring Kanji Lessons: Kanji will be organized by their groupings in the Genki textbooks, which are commonly utilized books for both self-learning and university education
• 📌Analytics: We will be implementing a database to track and update a user’s familiarity with each Kanji and their relevant scores of writing accuracy. This will allow users to understand which Kanji they are struggling with the most so they can create a study schedule that suits their needs best.

💾 Installation Instructions

To set up WriteRight on your local machine, follow these steps:

Prerequisites

1. Node.js (v14 or higher)
   Install Node.js

2. Git
   Install Git

Steps

insert instructions here

---

User Instructions

• Start Now: Click the "Start Now" button to begin practicing Kanji. The app will use your webcam to track hand movements and allow you to draw Kanji characters.

• Your Scores: View your performance and see how accurate your handwriting was based on real-time feedback. Check your accuracy score and review past attempts.

• More Modes: Explore different modes, such as pronunciation practice and stroke order training.

• Save Progress: Track your improvement over time by saving your scores and revisiting them later.

---

Contributing

We welcome contributions! If you'd like to help improve WriteRight, please follow these steps:

1. Fork the repository and clone it to your local machine.

2. Create a new branch for your feature or bug fix:

   git checkout -b feature-name
   

3. Make your changes, commit them, and push them to your fork:

   git add .
   git commit -m "Add new feature"
   git push origin feature-name
   

4. Create a pull request to merge your changes into the main branch.

---