Hello and welcome to the briefing of the 2021 Technical Test for our Front-End internship position.
This test will focus on the main tasks we will ask you during your internship: React logic & CSS integration.
That's why you will work on a small Cart for a fictional fast-food app. There's two sides in this briefing: design & logic.
For the design, we will use the McDonald's app concept from veno for Overlap Studio (don't forget to credit them if you make this public on GitHub).
We ask you to follow the design as close as possible.
For the icons, use the free ones from FontAwesome (if you can't find the exact one, use some close proposition).
For the images… use Google 🙃
We only ask for a mobile screen, but it must be perfect. 🧐
The app has three "pages": the listing page (not on the design), the order page (right part of the design) and the details page (left part of the design).
-
The listing page will show a listing of products to add to your order. The design is exactly the same as the order panel of the design, without the "edit" & "delete" button, without the "quantity" buttons, but with an "add to cart" button (in short: image, name, price, add to cart button). The available products are listed at the end of this briefing.
-
The order page will show the content of your order, same as in the design. The only thing to add is, after the cost value, a prepare time indication that should be correct for the whole order.
-
The details page will show the details of a product, the ingredient it uses & the quantity/add to cart buttons.
Of course, every button must be usable and adapt the total values on the order pages, according to the given values.
We ask you to use React, with hooks, a store mecanism (redux or native context) and the solution of your choice for CSS (we have a preference for chakra, but it's up to you: css-in-js, emotion, sass, postcss…).
We want to see the source with the instructions to build it locally. You can join an URL if you want, but we will use the source on our side for the review.
If you think something's missing in this briefing… be creative!
Also, please try to track your time: we are interested to know how long you worked on your project.
Enjoy and keep up the good work!
Here's the products to list:
- Description: Big burger with 2x beef, barbecue sauce, cheese, pickle, onion & salat.
- Price: 4.80$
- Discount: 20%
- Size: Big
- Weight: 500g
- Prepare time: 8 mins
- Description: Medium burger with 1x beef, triple bycky sauce, cheese, pickle, fried onion & salat.
- Price: 4.15$
- Discount: none
- Size: Medium
- Weight: 370g
- Prepare time: 5 mins
- Description: Medium burger with 1x beef, bacon, triple ketchup sauce, cheese, salat.
- Price: 4.00$
- Discount: none
- Size: Medium
- Weight: 380g
- Prepare time: 6 mins
- Description: Big burger with 2x beef, bacon, andalouse sauce, onion, salat.
- Price: 4.60$
- Discount: 10%
- Size: Big
- Weight: 425g
- Prepare time: 8 mins
- Description: Big burger with 3x beef, pickle sauce, fried onion, salat.
- Price: 5.00$
- Discount: 33%
- Size: Big
- Weight: 475g
- Prepare time: 8 mins
- Description: Small burger with 1x beef, cheese, ketchup sauce, pickle, salat.
- Price: 2.00$
- Discount: none
- Size: Small
- Weight: 175g
- Prepare time: 3 mins
- Description: Medium burger with 2x beef, camembert cheese, tartare & wine sauce, pickle, salat.
- Price: 4.33$
- Discount: 15%
- Size: Medium
- Weight: 250g
- Prepare time: 6 mins