Project Start to Finish - Collaborative Pixel Canvas: Staring Up - Initial Requirements

Hello, my name is Justin Baker and this series of posts will follow the development of a personal project to develop a full stack application from start to finish. The idea for this project is to implement something akin to Reddit's /r/place.

This is a continuation of my previous where I detailed what tools I would using. This post will continue where I left off and detail some initial requirements for this project.

Requirements 

There will be two major components for this project. The first that I will focus on will be the front end that is responsible for displaying the current state of the canvas. The second is the backend that will be responsible for maintaining the history of changes to the canvas, validating input, synchronizing users, etc.

I will focus on higher level requirements and detail more specific requirements when I move onto more specific implementation.

Front-End Requirements

•  Display a grid of colored squares, representing an arbitrary x by x pixel canvas.
• Support user system
• Register
• Login
• Guest
• Allow user to select cell and change the color.
• May be restricted by timer and color choice to have reasonable bandwith usage.
• Display cell info.
• Last modified: [Timestamp]
• Modified by: [User]
• Activity level [color] (use mean and deviation to determine color?)
• Zoom in and out.
• Panning when zoomed in.
• Support Desktop browsers & be at least viewable on mobile.
• Update in real time or regularly with authoritative server state.

Back-End Requirements

•  Maintain database for the following
• Users
• Login & Authentication
• Input history
• Tiles
• Tiles will make up canvas
• History of edits
• Server side validation 
• Ensure changes are propagated to all clients
• Enforce timers on tile changes
• Only accept valid changes

These requirements can be flushed out more as the project progresses and I decide to add or remove features. However, as a solo project I want to prioritize getting something working and will leave it at this for now.

On my next post I'll go over setting up a development environment and to start working with Phaser.

Project Start to Finish - Collaborative Pixel Canvas: Staring Up - Selecting Tools

Hello, my name is Justin Baker and this series of posts will follow the development of a personal project to develop a full stack application from start to finish. The idea for this project is to implement something akin to Reddit's /r/place.

This project is serving a purpose to demonstrate my ability to bring a project to fruition from design to release and to show my problem solving process. Secondarily this project is as opportunity to better familiarize myself with various development technologies that I'm interested in.

Starting Up

To start this project I need to determine what tools I will be using. This project is focusing on a set of development tools and making them work with the project, rather than selecting technologies that would best fit the project since one of my major goals is learning these. Because of this I'm not starting with requirements and will focus on the technologies that I want to use.

Development Technologies

• OS: Windows 10
• My primary computer runs Windows, I don't have the funds or space to have dedicated Linux development machine and I don't want to deal with the Linux subsystem or dual booting.
• IDE: Visual Studio Code
• Visual Studio Code is a great lightweight IDE that is multi-platform with tons of plugins. I have recently been finding using VSC to be preferable to big hulking IDEs like Visual Studio & Eclipse.
• Languages: TypeScript
• My previous largest project using JavaScript was my game Golem Smash! I did not enjoy the dynamic typing and throughout development I was interested in checking out TypeScript to get around this part of Javascript. Now that I'm doing a project on my own with a fresh codebase I am free to pursue that interest of using TypeScript.
• Front End: Phaser & Angular
• Given that I want to use TypeScript the front end technologies that I decided to use was pretty straight forward. Phaser is a game Framework that can take care of rendering and provides a familiar API. Working directly with the Canvas API was an option, but for the scope of the project the added weight of Phaser won't be much of an issue.
  
  For the rest of the front end I am intending to use Angular. Angular was written in TypeScript and makes TypeScript development easy. 
• Back End: TBD
• I am not particularly set on what technologies I'd like to use for handling the back end. I intend to focus on implementing the core components on the front end and then determine a set of requirements.
• Hosting: TBD
• I am currently hosting most of my projects with Heroku. As development progresses I will consider options best fit for the project. 

These tools should be enough for the core of the project. My next couple posts on this project will focus on setting some initial requirements and setting up my development environment.