Vue.js sample mini-application

I need a technology proof-of-concept small application written in Vue.js. It's a very small and simple image viewer, the idea of this project is to write a very clean, simple, beautiful and documented code. If all goes well this will be developed further into a full scale app, so prove that you can write perfect code.

We have Categories and Images. In the /data folder there is a [login to view URL] with a basic structure:

<category name="CATEGORY TWO">

<image name="[login to view URL]" width="1200" height="797" />

<image name="[login to view URL]" width="1200" height="800" />

</category>

so each category has a name, and contains a list of images, each of them having the name of the file + the width and height of the image. The images are found in the /data/[CATEGORY_NAME], and the thumbs in the /data/[CATEGORY_NAME]/thumbs, so for instance /data/CATEGORY TWO/[login to view URL] and /data/CATEGORY TWO/thumbs/[login to view URL]

The app has a left sidebar with the list of categories. When you click a category, a horizontal strip with the thumbs in that category opens on the right side. When a thumb is clicked, the large image loads, with left/right arrows to go forward/back. That's all.

Notes:

- app has to have relevant route urls: categories have category name: "/category-two" and images have the image index (not name), so: "/category-two/1"

- app needs to behave very smooth - show light gray placeholders for images, and fade in image/thumb when it's loaded

- when you switch from one screen to the other (eg. from thumbs to large image), use fade effects, so fade out the thumbs, then fade in the large viewer

In the Files section you'll find wireframes + the /data folders with sample data. If something is not clear don't hesitate to ask for details.

When you bid, please provide at least 3 examples of Vue.js apps you built.

Android HTML5 JavaScript jQuery / Prototype Mobile App Development

Project ID: #16956608

About the project