Blaijon / code-challenge-fed

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)?

Answer: I installed certain packages for quicker implementation and I like the style provided with the package for example like react-select

• How long did this work take you?

Answer: 5 hours

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

Answer: The most difficult part was choosing a layout after my many wire frames because they are so good design.

• What was the easiest or fastest part?

Answer: The fastest part was the executing my wireframe into code. Like the color scheme, shadows, and aditional icons.

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

Answer: I would have implemented the addtoCart feature form to have error handling UI.

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

Answer: I looked up what was the best way to layout a check out page.