For my 4th Flatiron School project, I created a drawing application. The app allows you to pull up a reference image and draw. You can then save that drawing after submitting a username. Upon saving an image, it creates a button that allows you to see the drawing that you created.
The frontend consists of 7 classes: Line, Reference, ReferenceService, User, UserService, Drawing, and DrawingService. I first tackled the Line class, which began with a steep learning curve due to my unfamiliarity with html5 canvas. Before I could begin this project, I had to read the canvas API documentation and watch countless videos on how to create a canvas object that you can draw on. An additional challenge to this was creating this using object oriented programming. After many hours of trial and error, I was able to successfully create a Line class that allows users to draw when the mouse is clicked and moving.
I then moved onto the Reference and ReferenceService classes which handle the ability to append a random reference image onto the DOM. This was definitely the easiest part of this project. I used a JSON file that was populated with urls of 17 different images and ran a fetch (GET) request in order to transfer it from backend to frontend and append it to the DOM. Creating these two classes, really helped me better understand how to organize object oriented programming in JavaScript. Once I finished them, I compared it to the Line class, which didn’t look as good. And so, I spent a long time refactoring the Line class again and again to make sure that it was as DRY as possible.
Once I was satisfied with the Line class, I moved onto the User, UserService, Drawing, and DrawingService classes. In the Rails api, a user has_many drawings while a drawing belongs_to a user. One of the biggest challenges in developing these 4 classes, was displaying the relationship from the backend on the frontend. It really pushed my creativity when problem solving and required me to console.log EVERYTHING.
Throughout this project, refactoring was my friend. While, I essentially worked on the classes in the order mentioned above, I had to spend a lot of time revisiting different classes to refactor them. Overall, this was a tough, but really fun project to create. I’m really proud of the work that I’ve done on it.
In the future, I would love to give it more drawing functionality such as, the ability to draw in shapes (instead of lines) or more CRUD functionality such as being able to edit and delete a drawing you created.