Development

The web-application front end was written in ReactJS. The back-end was written in Python Flask and handles API endpoints as well as websocket messages. It was completed in 2 sprints, with 2 weeks per sprint as part of a school project. This was a group project with 4 other students.

During the start of each sprint, my role consisted of planning and documenting. I drew up diagrams and tasks that would be distrubuted to team members based on preference.

In the first sprint, I primarily worked on the HTML canvas, implementing panning and rendering pixel grids. Before this, I also set up the project structure and basic UI using react router. The logo was created and animated by me in Paint.NET

In the second sprint I continued work on the HTML canvas. I also worked on implementing a timer for pixel placement, as well as checking authentication before any canvas actions could be performed.

Planning diagram for sprint 1

Technology

The application features a variable size canvas with $n^2$ pixels and is rendered using HTML canvas. Each pixel is stored as 1 byte with values ranging from 0-255, each value with a different color rendered on front-end.

In addition to the drawing canvas, there is a live chat with all other users in the app. Both live pixel placement and chat are accomplished using web-sockets. On the front-end side we used Socket.IO and on the back-end we used the Flask-SocketIO library.

In order to participate in pixel placement and chat, users must be authenticated. We implemented a signup and signin feature, storing user information as well as hashed passwords in the database.

Class Results

At the end of the project, each group presented their finished project to the class after which our project was voted best in class.