Skip to content

Latest commit

 

History

History
101 lines (61 loc) · 4.3 KB

File metadata and controls

101 lines (61 loc) · 4.3 KB

front-end-dev-test

Hello there,

I really liked this take home assignment, it made me explore many areas that I haven't looked into yet!

I hosted the website on netlify, please see this link for live demo: Demo

To run locally, please cd into client folder and run npm ci to install react and package dependencies

Then, npm start and react will start development and show in the broswer

cd client && npm ci && npm start

The 3 discussion answers is here: discussion.md

Strapi Update 9/9/21

Backend with Strapi CMS is just completed. React client fetches data from Strapi CMS to display. This is built after the deadline, so it will be in a different branch.

If you would like to check it out, please vist strapi branch


Intro

Congratulations on making it to the testing phase of the hiring process! For this part, we would like to learn about your creativity, how well you code, and how well you follow instructions.

You will need to have knowledge of some key things before you start:

  • how to run a local server
  • how to connect your markup to your scripts and styles
  • front end web development

We have supplied an optional development server and some development dependencies for this project, but feel free to use the development framework of your choice (e.g. create-react-app, vue cli, etc). You are not required to use the codebase provided in this repository, but feel free to use it! If you choose to use this codebase, you can run the development server using the commands found below:

  npm install
  npm start

NOTE: You will need node and npm on your machine if you choose to use the supplied server, also for hosting you will need to set it up yourself.

Instructions

The goal of this project is to create a client website that has some key features requested by the client (i.e. Rooster Grin as the client).

Please clone this repo and submit a link to the new project's repo along with any instructions for viewing the final product. It is not required to host this project anywhere, but it would be nice to view your project via a link rather than having to run the build locally.

A .jpg of the mockup and the assets are in the provided .zip folder.

Requirements

Please read through ALL the requirements before starting your project

Below are the design requirements:

  1. Mockups are followed
  2. Carousel in last section
  3. Attention to detail
  4. Mobile Responsive
  5. Animations

Though the main requirement is to follow the mockups, we don't require that it to be pixel perfect. We encourage you to be creative as well with this test, you have some design freedom with the assets provided and feel free to add as many animations as you like. We usually face a lot of ambiguity when developing and designing for our clients so we have left some things up to you to see how you design.

Below are the technical requirements:

  1. Modular and concise code
  2. Fully functional capabilities of built features
    • We should not be seeing errors when we click on buttons
  3. Understanding best practices of web development
    • Naming conventions and styling
  4. Best use of images and assets
  5. Use of a grid system

As for the technology that you should use its up to you. 😎

Required Features:

These required features are requested specifically by the client and should be implemented.

  1. Fade In Effect for the hero title
  2. Subtle animation on the four icons
  3. Fully Functional Site

Bonus (optional) Features:

  1. Use of dev server
  2. Front end framework
  3. Dynamic backend from a CMS

Please also submit a small write up discussing (leave answers to a sentence or two):

  1. What you technologies you used and why (if you only used html, css, and js please explain any templates or frameworks you may have used i.e. bootstrap)
  2. Any struggles you faced when developing with technology you chose
  3. What you enjoyed the most and why

If you have any questions please feel free to email me (Matt) at [email protected]