Creating something that blends functionality and design has always intrigued me. Inspired by Apple’s math notes, I set out to build a web-based version—but with an extra twist: a drawing canvas for solving kinematic problems and writing math expressions.
Here’s a detailed look at what went into the project:
The Features
1. Advanced Calculator:
- Handles basic arithmetic and scientific calculations.
2. Drawing Canvas:
Allows users to sketch problems or equations.
Canvas drawings are processed as image data and analyzed for solutions.
3. Intuitive UI/UX:
Modern, minimalistic design.
Built using React, Tailwind CSS, and Shadcn for responsive and elegant interfaces.
The Tech Stack
Frontend:
React, Vite, Tailwind CSS, Shadcn, React Router DOM.
PostCSS for advanced styling needs.
Backend:
Node.js and Express for efficient API handling.
Sharp for image processing.
Challenges Faced
1. API Integration:
I initially aimed to use the Google Gemini API to process mathematical problems. Unfortunately, proto file challenges slowed progress, so I pivoted to handling the data directly within the backend.
2. Canvas Rendering:
Ensuring accurate data capture while keeping interactions smooth was tricky. After multiple debugging sessions, I nailed the process!
3. UI/UX Design:
Striking a balance between functionality and aesthetics for various screen sizes was challenging but rewarding.
What I Learned
Seamlessly connecting frontend and backend components.
The intricacies of canvas rendering and image processing.
Debugging API integration and adapting when things don’t go as planned.
Next Steps
This project has laid the foundation for more exciting updates:
Adding eraser and clearing tools for the canvas.
Exploring AI-powered math solutions.
Expanding the calculator’s functionality with advanced modes.
Final Thoughts
This project was more than just about coding—it was about learning to adapt, debug, and think creatively. Each challenge taught me something new, and I’m proud to share the results.
If you’re curious to see it in action or dive deeper:
- GitHub Repo: https://github.com/Kai-Chan-UWU/AI_Calculator
Thanks for reading! I’d love to hear your thoughts and feedback. Let’s keep building and growing together!