Mark Collis

JavaScript developer. Find out more about me and my work below.

About Me

Welcome! I am a JavaScript developer based in Prague, Czech Republic. On this page you can find out a bit more about me and some of the projects that I have worked on.

Inspired by the impact that having easy access to vast amounts of information and interactive services has had on the modern world, I enjoy developing tools that provide effective access to these, whether for work, study or just fun.

Before becoming a developer, I worked as a technical consultant for over 10 years, gaining experience of capturing, analysing and documenting requirements, project scoping, planning, resourcing and delivery, options evaluation and procurement support, and information security considerations. As a result I have a good understanding of how software development supports wider business objectives and the importance of close engagement with the user community.

Project Portfolio

Here are some examples of projects that I have developed. In each case, I have described the high level requirement and summarised how I approached developing a solution to meet it. There are also links to the live sites and source code.

MapOholic

MapOholic is my largest recent project and I am an active user as well as its developer. It is an online database of orienteering maps, together with routes, detailed information about the the races and cross-references to other users, events and clubs.

code (client)code (server)

live site

Requirement:

I have a large collection of orienteering maps from more than 20 years of competing regularly in the sport. These are neatly filed away in folders but such a library isn't easy to search, doesn't have much other information about the events and can't be shared easily with other people.

I wanted to move to an interactive online map collection, so set out some key requirements and started to develop one. Firstly, it needed to be multi-user to enable people to share their routes, make comments and exploit common background information about events. Secondly, while the focus of the application is on scanned maps, each of these could be associated with routes (e.g. from GPS tracking), course details, results, and so on. Thirdly, the collection needed to be easily searchable in a variety of ways, including on an overview map of all event locations. Finally, for Czech events there is an API providing access to some event information and results which could be exploited to quickly and accurately populate relevant fields.

Solution:

MapOholic was developed from scratch as a modern SPA to meet my requirement. It has separate front-end and back-end components, both written in JavaScript, which communicate using a REST API.

The front-end user interface is based on React and Redux. Other packages used include Leaflet (location maps), Formik (forms) and LinguiJS (i18n).

The back-end is based on Node.js and Express to implement the REST API for managing users, events and maps with MongoDB used to store the data. For certain functions the back-end reaches back to another, external, API for event data.

Slug and Snail Stories

The Slug and Snail Stories site was developed as a landing page for a fictional business, to practice core HTML and CSS skills. The stories that inspired it really do exist, but the only customers are my own children.

code

live site

Requirement:

Telling stories has always been a great way to entertain children and stimulate their imagination. But not every parent is a natural storyteller.

So why not make life easier for them by offering a storytelling service available as and when you want it... Before launching the service, my fictional customer wants a mock landing page for the business.

Solution:

The Slug and Snail stories landing page is a single page designed to quickly convey the key sales messages of the business and entice potential customers to engage further. It is mostly plain HTML and CSS and is simple and responsive.

Face-Finder

Face-finder analyses images either on the web or uploaded locally to detect faces (using the face-api.js library running in the browser). If faces are detected, they are overlaid on the original image and their coordinates can be shown.

code

live site

Requirement:

Face-finder is based on an interesting project within an online course. Although the basics of the original user interface have been retained, I wanted to rewrite it to use an open source face recognition library rather than a commercial API, and to expand and improve the way in which the results were presented.

Solution:

The front end is based on React, making use of face-api.js for the number crunching. There is also a simple back end built using Node.js, Express and PostgreSQL that provides a simple API to register users and keep track of the number of images that they have analysed.

Oxford Street-O Series

For many years before pursuing web development full time, I developed a number of different websites either as personal projects or for clubs and societies of which I was a member. Most of these have been retired or replaced, but the site I created for the Oxford Street-O Series is still being actively used almost 10 years on.

live site

Requirement:

Soon after moving to Oxford, I came up with the idea of organising some evening orienteering training events around the city streets. In addition to planning the events themselves, I needed a website for publicity and to provide event details and results to competitors. If the idea was a success I would be recruiting other event organisers so it was important to support multiple content editors.

Solution:

The site I developed was based on a customised Wordpress template to provide support for an event calendar and results section consistent with expectations of the orienteering community. Both the site and race series are still active today.

Contact Me

I have recently joined Salsita Software as a Full Stack Developer, so I am not currently looking for new opportunities. But if you are interested in finding out more about me and my work, feel free to get in touch by email or using the form below.