Welcome!

Thanks for your interest in joining the SavedBy team! If you're reading this, you're on the right track! This take-home project will assess the skills we're looking for in our next dev hire. This is not timed, but aim for 3-4hrs. In other-words, don't go overboard!

In this project, we're going to make a simple product collection page for a mock e-commerce store. The boilerplate includes a prebuilt server (/src/server) to host your static files (/src/static). Below you can find everything you'll need to get started and an outline of the objectives. After completion, we will review your code and let you know about the next steps! Keep in mind this is the first half of the interview process. We will be holding a live interview session to add another feature to this project. Let's get started!

What skills are we looking for?

• Proficiency in JavaScript, CSS and DOM manipulation
• Git comprehension
• Mockup-to-UI development
• Clean, documented code
• Ability to use vanilla languages without the use of 3rd-party modules.
• Balance between Functionality and quality
• Mobile-first development (i.e. responsiveness)
• Resourcefulness

The Project

Using the boilerplate, develop the product page from the mockup images located in /resources. Build the logic that handles fetching and rendering the products. Implement a search bar feature for products.

Prerequisites

• NPM
• NodeJS
• VSCode

Starting

• Fork the repo (https://github.com/SavedBy/interview)
• Move to the "dev" branch
• Create a new branch called "feature/product-page". Use this branch for your commits.
• Install the dependencies
• Run npm start to start the mock server
• View your work at localhost:3000
• ONLY EDIT THE EXISTING FILES LOCATED IN /src/static

Key Notes:

• The API is located at the same host (http://localhost:3000/)
• Make the product grid mobile responsive. 2 columns on mobile and 3 on desktop. Breakpoint at 430px.
• Link font from https://fonts.googleapis.com/css?family=Mina
• Retain all JavaScript logic in the app.js file
• Retain all CSS in the index.css file
• Sort products by price (low to high)
• Overall browser compatibility
• Match your UI as closely as the mockup as you can
• Search bar results should filter on input

HELP!

If you get stuck, or our instructions are unclear, no worries! Shoot us an email at [email protected]!

Finished?

Just shoot us an email at [email protected] with your name and link to your GitHub repo! Please make sure it is public. At this step, we will review your code and inform you if you've made it to the next step!