Development and design of a drawing reference web application

Abstract

Tavoitteena oli toteuttaa verkkopohjainen sovellus, joka ratkaisisi seuraavat ongelmat: Google Street View -linkkien intuitiivinen näyttäminen ja niiden tehokas etsiminen, sekä laajennettavissa oleva käyttöliittymä. Käyttöliittymän tuli kuitenkin olla pelkistetty ja yksinkertainen. Sovellus oli henkilökohtainen projekti ja tuli kirjoittajan omaan käyttöön. Google Street View on referenssikuvien etsimiseen hyödyllinen työkalu, mutta sivuston oma kirjanmerkkijärjestelmä ei sovellu kuvamateriaalin tallentamiseen.

Sovelluksen perusidea oli näyttää linkit kartalla, sillä koordinaatit sai helposti suoraan Street View -osoitteesta. Linkin sisältöä kuvaavat kategoriat auttoivat eri linkkien toisistaan erottamisessa, erityisesti silloin kun ne olivat hyvin lähellä toisiaan.

Web-sovellus käytti ReactJS-kirjastolla toimivaa frontend-koodia sekä Firebasen Realtime Databasea REST APIa hyödyntäen. Figmaa ja Inkscapea käytettiin käyttöliittymäprototyypin sekä kuvakkeiden luomiseen.

Tuloksena oli toimiva sovellus autentikaatiolla ja kategorioilla, riittävän hyvin suunniteltu käyttöliittymä, vaikka jotkin suunnitelluista ominaisuuksista jäivät tekemättä ajan puutteen takia. Sovellus päätyi toimimaan hyvin, erityisesti verrattuna Google Mapsin omaan kirjanmerkkityökaluun. Linkkien näyttäminen kartalla oli toimiva ratkaisu, sillä usein Street View -näkymä on helppo muistaa maantieteellisen sijainnin perusteella.

The objective was to develop a web application that would solve the following challenges: displaying Google Street View -locations intuitively and make finding specific locations efficient, as well as designing an application UI that caters to simple needs but is expand-able. The application was a personal project of the author and would've been used by the author himself. Google Street View had proved to be a great source of art reference material for the author, who, as a result, had been accumulating hundreds of Google Street View -links.

The basic idea of the application was to display the Street View -locations on a map. Categories that showed the contents of the imagery would define the colour of the marker placed on the map, which would help the user distinguish between different locations that were geographically close to each other.

The web application utilized a ReactJS frontend, a Firebase Realtime Database working through a REST API, while using Figma and Inkscape to complete a prototype before developing the application itself.

The result was a working application complete with authentication, categories, a complete UI, albeit with some features that couldn't be completed on time. The map solution ended up working very well when compared to keeping the links in a list. Placing the links on a map proved to be a good way to display the Street View -links, since the author could always remember where the views were from.