Learn to Write, One Doodle at a Time!
DoodleTrace is a fun, interactive tracing app designed for kids to practice writing letters and numbers. Trace over dashed guides with your finger or mouse to build handwriting skills.
Live Demo: https://doodle-trace.web.app
-
Three Practice Modes
ABC– Uppercase letters (A-Z)abc– Lowercase letters (a-z) with handwriting-friendly font123– Numbers (0-9)
-
Simple Drawing Tools
- 5 vibrant colors: Red, Blue, Green, Purple, Black
- Thick brush optimized for tracing
- One-tap Clear button
-
Easy Navigation
- Large Next/Previous arrows on each side
- Looping navigation (Z → A, 9 → 0)
-
Mobile Optimized
- Full-screen canvas on phones and tablets
- Larger letters on mobile for easier tracing
- No scrolling required
- Node.js 18+
# Install dependencies
npm install
# Start development server
npm run devOpen http://localhost:5173 in your browser.
# Build for production
npm run build
# Deploy to Firebase Hosting
firebase deploy --only hostingdoodle-trace/
├── src/
│ ├── App.tsx # Main application
│ ├── App.css # Responsive styles
│ └── components/
│ ├── Canvas.tsx # Drawing surface
│ ├── Controls.tsx # Color palette & clear button
│ └── LetterGuide.tsx # SVG dashed letter guides
├── index.html
├── firebase.json # Hosting configuration
└── package.json
MIT