/code-challenge-fed-test

Primary LanguageJavaScript

FED Code Challenge

Your goal in this code challenge is not to fully style the entire microsite, though you're free to do as little or as much as you'd like. The only requirement is that you should not spend more than 4 hours on this.

What we'll be reviewing is how to add animations and effects to user interactions, and how you style the checkout form to make it a more delightful and intuitive process for the user. You should:

  • animate the Nav component to appear and hide when the menu icon is clicked
  • animate something to let the user know a product was successfully added to the cart (how and what is up to you)
  • format the checkout form, optionally including masks or custom components for selects, phone inputs, etc

What's Included. What's Not.

The project has normalize.css and react-icons. We use styled JSX to set up some base styling, but how you proceed is your call. You are free to continue with styled JSX, to bring in SCSS modules, or whatever makes you comfortable.

You are also free to bring in any package you like to help you with your animations and transitions. They should be well-tested and proven packages.

How To Install & Run

The project uses Next.js. To get up and running, you simply need to fork the project to your own repo, and then run:

# Install the project dependencies
$ npm i

# Begin development locally
$ npm run dev

When you're done, push your changes to your repo and send us your answers to the following questions/provide your rationale:

Questions & Rationale

  • Why did you choose the packages you installed (or why did you not use any)?
  • How long did this work take you?
  • What did you get stuck on or what was the most difficult part?
  • What was the easiest or fastest part?
  • If you had more time, what would you like to have implemented?
  • What did you have to research or look up to complete this?

Why did you choose the packages you installed (or why did you not use any)?

  • I chose to install a package called next-sass that is designed to work with Next.js.

How long did this work take you?

  • About 4 hours. I set a timer and stopped when it hit 4 hours.

What did you get stuck on or what was the most difficult part?

  • I didn't really have a blocker except for the part where I had to use a scss file. I needed to use a loader for it to work. Also styling can take some time -- you sometimes don't realize that it's eating a lot of time.

What was the easiest or fastest part?

  • The easiest part was probably running the website -- running the local server.

If you had more time, what would you like to have implemented?

  • I wish I could have styled it more or added prettier stylings. I also wish that I had more time to add form validations.

What did you have to research or look up to complete this?

  • On how to add a sass loader in the webpack config.