✏️ DrawCalc

Draw math with your mouse. Get the answer instantly.

DrawCalc is a handwriting calculator that uses AI to recognize math expressions drawn on a canvas and evaluate them in real time — no keyboard needed.

---

✨ Features

• 🖊️ Draw math expressions with your mouse (e.g. 15 + 5, 3 × 4, 10 / 2)
• 🤖 AI-powered recognition via Google Gemini
• 🌙 Light / Dark mode
• ⚡ Instant results
• 🔒 Secure by design

---

🚀 Getting Started

1. Clone the repo

git clone https://github.com/zaydkassimi/DrawCalc.git
cd DrawCalc

2. Install dependencies

npm install

3. Set up environment

cp .env.example .env.local

Then open .env.local and add your API key: GEMINI_API_KEY=your_key_here Get a free key at aistudio.google.com

4. Run

npm run dev

Open http://localhost:3000

---

🔑 Environment Variables

Variable	Description	Required
GEMINI_API_KEY	Google Gemini API key	✅ Yes

---

🛡️ Security

Feature	Status
.env.local gitignored	✅
Rate limiting (10 req/min per IP)	✅
Input validation & 5MB limit	✅
Security headers (XSS, CSP, X-Frame)	✅
No stack traces exposed to client	✅

---

🧠 How It Works

1. User draws a math expression on the canvas
2. Canvas is captured as a PNG image
3. Image is sent to Google Gemini Vision API
4. Gemini reads the handwriting and evaluates the math
5. Result is displayed instantly

---

🛠️ Tech Stack

• Next.js 14 — App Router
• TypeScript
• Tailwind CSS
• Google Gemini AI
• HTML5 Canvas API

---

📄 License

MIT — feel free to use and modify.

---

Made with ☕ by Zayd Kassimi