Frontend Training

1. eventbrite | Confidential & Proprietary
Front nd Training
Exercise

2. eventbrite | Confidential & Proprietary
Create a new event visualization app, using
the proposed project.
This app will have a checkout component and
will reduce the tickets quantity after purchase
it.
Download the project and install all the
dependencies necessaries to execute it.
2
Project
July - 2020
https://drive.google.com/file/d/11zZTw
Mpj0K8_U9q2Zev2Qi0qVcKisNlN/view
?usp=sharing

3. eventbrite | Confidential & Proprietary
01
API Data
STEP
Use the data in data.json to get all events
information
Retrieve the data using the method
getEventData in the eventService.js
file, using Promises and returning
the result after 3 seconds

4. eventbrite | Confidential & Proprietary
02
Initial
Screen
STEP
Create this screen

5. eventbrite | Confidential & Proprietary
TO CONSIDER
- Create CSS classes to use in each component. Try to maintain the design
- Display events by date
- Consider event date format using user location. Consider the Today and
Tomorrow date. Date is in UTC format
- When user click in “heart” icon, add 1 to followers avoiding duplicates and
maintaining format number
- Please consider the different prices / format to display in the card
- Range
- Only 1 price
- Free
- When user click on the event image, open a modal with event and prices option
(Next step)

6. eventbrite | Confidential & Proprietary
03
Checkout
Screen
STEP
Create this modal on user clicks

7. eventbrite | Confidential & Proprietary
TO CONSIDER
- Create CSS classes to use in each component. Try to maintain
the design
- Consider the fee value that can be fixed or a %
- Complete the right column with totals
- When user clicks on Checkout close the modal and open a new
one with a Thanks message
- The tickets quantity must be subtracted from the total and, if
user clicks on a sold out event, we must display this message
in checkout screen.

8. eventbrite | Confidential & Proprietary
04
Testing
STEP
Create testing using Jest and React testing library:
- Check events quantity displayed
- Check prices format
- Check followers addition
- Check image click open a modal
- Check checkout maths
- Check event quantity discounted after
checkout.

9. eventbrite | Confidential & Proprietary
Thanks!