Picly

Minesweeper game built with Javascript

Description

Picly began as a code challenge. The app had these 3 requirements:

  1. A user must be able to upload an image
  2. They must be able to draw on that image, with either a mouse or their finger
  3. They should be able to submit the image to a gallery and see others past submissions

I originally had a weekend to complete this, so it's definitely not production ready but I think it's a good example of what I can get done in a weekend.

Challenges

This was my first full experience working with the new canvas element and also with touch. Both technologies proved to be more elaborate than I had expected and I feel like I barely scratched the surface of what's possible. Still, it forced me to focus and patiently read through the docs until I thoroughly understood how to implement each feature.

Lessons Learned

Invest some time into learning a new technology: At first I assumed I could just add a canvas tag and easily start bending it to my will with JavaScript. This was not the case. There's a lot to canvas api and the same goes for how browsers handle touch. It definitely paid off to take some time, find appropriate documentation, and thoroughly understand it so I could be productive.

Simple interfaces often require more thought & planning: Keeping the focus on a pleasant drawing experience seems really easy. Especially when you consider that the most important *control* is the users finger or mouse pointer. In order to keep the focus on the drawing surface and still provide enough options for creativity, I had to think carefully about what I added to the interface and ensure that only essential elements were present.

Conclusion

This project was pretty fun and I think it turned out well for a weekend project. Of course, there's always room for improvement! I'd love to revisit this project and clean up the drawing experience a bit more. The lines are more jagged than I'd prefer and it's be great to add some different brushes.

I'd also like to try some other directions for the controls. I was tasked with building this to work on every size screen but I really think a mobile specific app would be more useful. I think some details of the layout and controls could be improved if I focused on the mobile experience first.

Thanks for reading. You can try out the app here. I'd love to know what you think!