Whiteboard For Fun
- raedgharzeddine
- May 12
- 1 min read
In 2022, I developed a small project named Whiteboard For Fun to refresh my TypeScript skills. The aim was not to produce a polished commercial product but to re-engage with browser-based interaction, state management, and frontend architecture by creating something visual and functional.
The project is a browser whiteboard built with TypeScript and bundled with WebPack. It uses a canvas for rendering and an SVG toolbox for interaction. added multiple pen presets, an eraser, and geometry tools such as a ruler, protractor, set square, and compass. I also included basic file operations like new, open, save, and clear, with local whiteboard files stored in a custom ".w4fun" extension.
The project was valuable to me not only for its UI but also for its underlying structure. I implemented an event-driven approach to manage the whiteboard, toolbox, drawing tools, and geometry helpers. Handling pointer events, creating drawing data models, and managing local files allowed me to revisit TypeScript design decisions that can be easy to overlook without consistent practice.
Reflecting on this project, I see it as a straightforward yet effective method to strengthen my TypeScript basics. It highlighted that creating something interactive from the ground up is an excellent way to update technical skills. Even a small personal project encourages careful consideration of architecture, browser behavior, and maintainability. Note! The whiteboard is not touch-friendly. The next step is to make it run on mobiles and tablets without issues.
Feel free to check the code at: Raed-DevJourney/webwhitboard-forfun
To play with the solution:
Comments