At Warpwire we build complex multidisciplinary software for web-based video streaming and delivery.
Your challenge is to design and build a javascript application where you can view a listing of items that can be added and removed from an order cart. We want to see how you design and architect a dynamic application like this. While the aesthetic is important, we are more interested in your ability to efficiently scaffold and style a webpage as well as how you manage the various states that may exist.
- Show a list of order items, we'll leave it up to you which types of items you want (there must be at least 10)
- Clicking an item adds it to your ‘cart’
- Show a list of the items in your cart
- All level 1 requirements
- Include a mechanism for removing the item from your cart
- Include a mechanism for adding multiples of the same item in your cart
- All level 1 & 2 requirements, but instead of a list, display the food items in a dashboard/grid view.
- When an option is clicked, show a detail view of the food item as well as options for adding it to your cart ( cancel button, how many of that item you want, and a button to add it to your cart)
- Show the cart as a dropdown menu that can be opened and closed by clicking a button on the page.
The properties on an order item should include
- An item name (string)
- The amount of times the item is in the cart (number)
- A description of the order item (string)
Here's an example of how the data model would look:
{
itemName: 'Hamburger',
count: 3,
description: 'Juicy and full of meaty goodness'
}You're more than welcome to add more properties as needed (such as an order id).
You can spend as much time as you need in order to create something that you are happy with before the deadline. Our hope is that this is a fun and not too difficult project for you! :D
- It is not required that you use Vue, you are welcome to use whichever frontend framework or library you are most comfortable with in order to best demonstrate your skills.
- It is not required for this app to make any api calls or be connected to a databse. It just needs to manage local state. It's ok if the state is removed on a page refresh.
- We want to see how you would represent these features. Feel free to find some inspo online and make something fun and beautiful!
- Your project will be code reviewed by our engineers at Warpwire, so be prepared to talk about your choices.
- Please provide a public URL to the code and instructions for how to run the project.
- Write some automated tests!
- Typescript!
- Get creative! Add some cool features that you think would make this project stronger.
- Some Ideas:
- Enforce cart limits. Maybe you have a set amount of money you're allowed to work with.
- Add item availability, maybe some things are sold out, or become sold out when you add too many to your cart.
- Create a checkout screen that shows an itemized list of your order with a total.
- Create a search or filter option for the items.
- Show us some mastery over CSS. We want to see some flexbox and maybe some complex absolute positioning. Grid isn't necessary as it's uses can be specific, but it would definitely look good on you!
- The more organized your project the better. Efficient, self documenting code is great for a team environment. But don't worry too much, we understand that there's not a lot of time so do your best.
- Checkout Dribbble for some inspo if you need some 😎