Shapepad

• 

  Having many different files open at once on top of a coding application.

Inspiration

Being new to coding and programming in general, and having this be my first hackathon. I have decided to go for something quite simple and relatively useful for a student. You could say it was more of a bucket-list sort of situation, not here to win but rather to gain experience and learn from this opportunity.

What it does

ShapePad provides a clean, interactive canvas that allows users to:

• Draw, manipulate, and position geometric shapes seamlessly on a digital pad.
• Organize visual notes, diagrams, and ideas without complex design-tool overhead.
• Quickly clear, export, or adjust elements on the fly for rapid prototyping and studying.

How we built it

• Designed the frontend interface to prioritize simplicity, minimal latency, and zero learning curve.
• Implemented interactive canvas rendering logic to handle user inputs and shape drawing efficiently.
• Utilized modular code structuring to make future feature additions (like custom styling and export formats) straightforward.

Challenges we ran into

• Canvas State & Interaction: Managing active shape coordinates, smooth rendering on user drag/click, and preventing accidental canvas resets was a steep learning curve.
• First Hackathon Time Constraints: Balancing the ambition to add many features with delivering a stable, functional core MVP within the deadline.

Accomplishments that we're proud of

• Successfully creating and deploying a complete, working application from scratch as a complete beginner via vibecoding.
• Keeping the UI clean and distraction-free, making it genuinely usable for students and note-takers.

What we learned

• Hands-on experience with frontend event handling, canvas manipulation, and modern project structuring.
• How to scope an MVP (Minimum Viable Product) under hackathon deadlines.

Built With

• canvas
• claude-code
• css3
• drawing
• html5
• javascript
• note-taking
• notepad
• react
• tailwindcss
• typescript
• ui-design
• vibecoded