Web Development and Design Coding Challenge

Hi 👋 ! Thanks for considering Bigeye! We're excited you've decided to interview with us.

For this portion of your interview, you will be live-coding a product page. The designs for these pages will be in a Figma document sent to you separately from this repository.

Overview

We're making a product page for our fictional friends at Soundz. This page showcases their new product, the Soundz MC-002. Your job is to make the product page for this.

Running the environment

This project is a create-react-app scaffold. To set up the project, install all project dependencies with npm install. You should then be able to work on the code with the command npm run start.

We've already scraped out a few images from the design, and they are in the public/images folder:

• soundz-logo.png is the company logo for the top menu
• mc-002.png is the product picture with the dotted background
• play.svg is the play icon

As this is create-react-app, you can use CSS and CSS Modules. If you wish to use Sass, you can install it with npm install sass. More info about Sass can be found in the CRA docs.

Your task

Your task is to create this page. You will have to create the following pieces:

• The menu at the top
• The product header with microphone image
• The product details and technical specifications