Makers Academy Day 55

Charlotte Fereday
Jul 10, 2017 · 4 min read
Mind Mapp practice project week

This week was practice project week, where we got the chance to pitch and chose an idea to work on. I was fortunate that a project that I pitched, building an interactive mind map, was chosen as one of the projects to be worked on by a group. Me and four others spent the week figuring out how to go about building this. We started this process by identifying what our MVP would look like and summarising the purpose of our app in just one line. After establishing what our MVP would look like, we then went on to write our user stories. We wanted to make sure that we all had a clear understanding of the user requirements of the projects, before splitting into pairs to estimate user stories and break down epics into smaller pieces of work.

MVP vs Fantasy diagram & User stories

After some research we realised that HTML5 Canvas was a good option to make a board that can have ideas and lines added to it. There were a lot of resources online about Canvas and it seemed to have a supportive community ecosystem. In order to interact with the canvas we chose JavaScript ES6 to build the Canvas, Idea and Line objects that dealt with all of the logic of the program. The benefits of using ES6 was that it felt (in my opinion) much cleaner than other versions of JavaScript.

Line object written in JavaScript ES6

As you can see in the above Line object, we could create classes for our objects which had constructors and concise functions. This was extremely helpful for more complex objects such as the Canvas object, which spanned just under 200 lines of code. It helped us organise our code cleanly and ensure we maintained clarity on the purpose of each property and function. JavaScript was also used in our interface file, containing the functions that listened for and triggered actions on the DOM.

We used Node.js and Express to run our server. As our MVP stands our it could function as a single page app in the browser without a server. However we consciously chose to include a server early on so that it would be easier to integrate extra features later down the line, such as saving mind map data to a database. We used Pug templating in our HTML file in order to more easily render files in our views folder, such as our index.

Slightly blurry diagram of the main components of the app

It was an exciting week to be able to have free range to work on a project idea with new technologies of our choice. I hadn’t yet encountered Node.js for example, and especially wanted to challenge myself to use it on a project. We also used a range of new testing frameworks: Mocha, Chai, Zombie and Supertest. It took some time to figure out how to work with all of these frameworks in a cohesive way, but we managed to write feature tests using Mocha, Chai and Zombie, and server tests using Supertest and Mocha. Unfortunately due to time constraints we didn’t complete the Canvas, Idea and Line unit tests which was really frustrating.

Once I have a chance I’d like to complete these unit tests, add Travis CI and add our app to Heroku. I’d also like to work on some of the later user stories we didn’t get to involving saving the mind map data, as I think that would be a great learning opportunity to become more familiar with Express and Node.js.

In the meantime though I feel proud of what our group achieved in just one week! You can check the project out here and any feedback would be gratefully received.

Charlotte Fereday

Written by

Software Engineer @ThoughtWorks Co-organiser of Building an Equitable Tech Future 🚀 @codefirstgirls alumni 👨‍🎓

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade