Technical Assessment - Round 2

A more advanced Vue component to build, and sample components to code review. Used at Funkhaus as a Technical Assessment test for prospective engineers.

Task

1. Build a complicated Vue component to the required design.
2. Written code reviews of 3 components.

Design

The XD file can be seen in browser here: https://xd.adobe.com/view/91370cf5-0ce3-46c4-94e1-f0033df25fa3-c464/

The XD design prototype is limited, please see this movie for a better explanation of the required motion and timing: https://www.dropbox.com/sh/1oc5bccnky06l7a/AABiiOkGr7WGSyljFU2RLTtZa?dl=0&preview=Funkhaus+Slideshow+Component+Sample+-+Animation.mp4

This is a good reference site using a similar slideshow: https://mamaggroup.com

Notes

1. XD does allow you to see the specs of all the elements. Click the </> button in top right corner.
2. You can download assets (images, SVGs, etc) from XD.
3. Please use your best judgement to make this design responsive.
4. Take note the hover state when hovering over the title in the center of the screen.
5. Fonts can be found here.
6. The text in the corners have a hover state (see the XD link), but they don't need to link anywhere.

Requirements

Imagine this design is the home page to an entire website. So setup basic structure and any sub-components as you would if you were going to be building out a site from this starting point.

1. Please use the Nuxt framework.
2. Please keep SEO in mind when you build this. We want to see that you understand HTML semantics.d.
3. No CSS frameworks please.
4. Please no Vue plugins, we want to see you know how to build complicated UI from scratch.

Hints

1. Please read this a guide for our best practices.
2. Please see this sample component for an expectation on quality style.

Mock data

The included /db.json file should be used as your mock API, but accessed via this URL:

https://raw.githubusercontent.com/funkhaus/technical-assessment-round-2/master/db.json

1. The list of slides can be generated from the pages array.
2. Note the siteMeta and page objects, those can be used for SEO.
3. The menu array can be used to build the the top-right corner menu.
4. Use the Nuxt fetch method to read the JSON file from GitHub.

Deploy & Submit

Please deploy to Netlify or Vercel. The free tier is fine.

Please share a repo of your code to the GitHub user drewbaker (or email to [email protected]).

Component Code Reviews

The /components directory includes 3 sample Vue components. Please review them and provide feedback as you would to the programming team at Funkhaus. You can do these using GitHub issues (or PR's if you're comfortable with that) on the repo you submit. If you have a better way you like to handoff code reviews, please feel free to do them that way.

You don't need to review the components in /components/includes. Those are only included as they are used by the other components, so you can use them for your review.

These are Nuxt components, so it will easy for you to just add them into a Nuxt project. See the /pages/review.vue which you can drop into a sample Nuxt project.

Design

The components are shown in a design here: https://xd.adobe.com/view/25432a7d-5913-4280-6fe8-27ff9e88b2d1-5372/

Contact [email protected] for the design password.

Hints

1. Please read this a guide for our best practices.
2. Please see this sample component for an expectation on quality style.
3. This is another good sample component, although the await on line 32 should use try/catch block not a then() promise chain.
4. Please see this for an overview of our CSS philosophy.