Front-End Development Task for Frontier Techworks

In this task, our intention is to test your skills as a front end designer, and for you to become more familiar with component design principles and Gatsby. You will find below a brief of how the folder structure exists and what we are looking for.

Where to find the design

The design (both mobile and desktop) can be found in Zeplin. Please go to https://zeplin.io/ and enter the following credentials

• Username - [email protected]
• Pass - PassWord1

Once logged in, you will find the desktop and mobile versions of designs. Incase it is not inquitive enough, you can find the desktop version here - https://zpl.io/awo46jg and the mobile version here - https://zpl.io/angpkPr

About Zeplin

Zeplin is a very useful took that gives you CSS and sometimes HTML automatically generated based on the design. This helps designers immensely and saves a lot of time.

What you will be judged on

1. Accuracy to the design and code style/efficiency.
2. Use of Styled Components
3. Responsiveness

Component styling

To give you a reference on how to style the component, we have styled one component out of the complete design. Please check the UberEmmora folder to understand how component level styling works.

To make it easier for you, we have also designed the folder layout, and imported the text and images of all the components. Your task is to style each of the remaining components in the same style as the UberEmmora folder.

How to submit the completed task

You can submit the final submission by uploading it on your personal github in a new repo and sharing the link with me on [email protected].

If you have any questions you can always contact me.

🚀 Quick start

1. Setup a site.

   Use the Gatsby CLI to start a site running. Follow the docs of Gatsby to Setup and running. Gatsby tutorial.

1. And you ready to start.

   Navigate into your new site’s directory and start it up.

   gatsby clean
   gatsby develop

🧐 What's inside?

A quick look at the top-level files and directories you'll see in a project.

.
├── node_modules
├── src
├───── components
        -Header
        -Footer
        -AboutUs
         ├──── Header
         ├    ├── index.js
         ├    ├── styled.js
         ├    ├── data.js
         ├──── UberEmmora
         ├    ├── index.js
         ├    ├── styled.js
         ├    ├── data.js
         ├──── Wirbringen
         ├    ├── index.js
         ├    ├── styled.js
         ├    ├── data.js
         ├──── DasSind
         ├    ├── index.js
         ├    ├── styled.js
         ├    ├── data.js
         ├──── UnsereWerte
         ├    ├── index.js
         ├    ├── styled.js
         ├    ├── data.js
         ├──── DieEmmora
         ├    ├── index.js
         ├    ├── styled.js
         ├    ├── data.js
         ├──── FolgeUns
         ├    ├── index.js
         ├    ├── styled.js
         ├    ├── data.js
         ├──── WerdeTeil
         ├    ├── index.js
         ├    ├── styled.js
         ├    ├── data.js
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md

1. /src: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. src is a convention for “source code”.