Image manipulation SPA (https://mosaic-test.herokuapp.com/)
(1)
Development started with a simple quick proof-of-concept prototype focused
on core image-related routines without any additional features and UI.
The solution was a simple page with vanilla JS and some JQuery.
Prototype's core features (/image-lab.html):
a) upload and image resizing to fit predefined maximum size
b) mosaic effect generation
c) mosaic upload to Imgur
(2)
Today I designed the UI using material components from 'vue material'. The user flow
is simple. The entry screen contains an file upload input and a gallery to pick
images from. When the image is selected and uploaded a 'light-box' window pops up with
the original and the processed mosaic image.
(3)
Today the Vue app was created. Completed features are: upload, mosaic creation and imgur upload.
(4)
Today the gallery has been added and some async parts have been changed to es6 promises.
(5)
Today the Gallery has been finished. Travis CI has been connected along with Heroku and
Selenium e2e/regression testing via Ghostinspector. Github readme contains "badges" with
live build status info (next to the title) Every time code is pushed to master
test,build and deploy are triggered.
The selenium test contains the whole user path:
click for selenium test script details
Heroku live version:
http://mosaic-test.herokuapp.com
(6)
The app is ready for presentation. The whole solution a single Vue component. Parts like
thumbnail generation, mosaic generation and the gallery have re-use potential and could
be made both separate Vue components and Vue-agnostic JS modules. The source code uses some
es6 features like Promise, Let, Const, ... thus making PhantomJS (test runner) report errors due to its
current es6 incompatibility. It was fun yet challenging due to various configuration glitches
in Webpack, Heroku, PhantomJS and other libs :)
(the code is leaking CLIENT-ID)
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm start
# run all tests
npm test