For this exercise, you'll create a simple form that allows users to purchase tickets to a concert for a given band.
You'll find included in this repo:
1. Three JSON files that represent the data structure that the form should be able to accommodate
NOTE: These are located in `src/band-json/`
2. A Wireframe ("BandTickets_Anonymous.png") that should help guide you as a loose representation of what the form should be structured like
3. A starter React project (optional)
There's a react project included that has been scaffolded using create-react-app but you can use whatever framework or technology you are most comfortable with. However, it's worth noting that we use React at Act Blue, so if you aren't familiar with React, this might be a good opportunity to get some hands on experience! Feel free to add any javascript libraries that you typically use or think are a good fit for this project. For styling, you're welcome to write custom CSS, use a component library, or do some combination of both.
The acceptance criteria for this exercise is that after consuming any of the JSON objects from the band-json directory, the form should include:
1. The band name, description, location, date, and image to learn about the concert
2. A list of ticket types that includes their metadata and the ability to add any number of tickets of each type
3. A total amount section that adds up the ticket prices
4. Some basic inputs for adding credit card and personal information
5. A button to purchase the tickets
Don't worry about any actual transaction being fired - it's enough to just fire a console log when the purchase button is clicked.
The tour date cost is listed as cents, so 500 would be $5.
The wireframe is a rough estimate of the layout of the form that we expect, but it's not necessary to match it exactly. The most important parts are the general page structure (two columns, with the description area on the left), and an approximate location of where the various page elements should be.
This exercise is specifically geared towards candidates applying for a Front End focused role at ATS, which is why we aren't asking for any data persistence or API development.
Doing a technical exercise on top of having all the other stuff you have to do during a week can be a challenge, so first off: thank you for taking the time to give this a shot.
In general, we recommend spending about 2 hours on this exercise, the first chunk of which is likely just reading through this document and choosing an approach. If you can't find that amount of time because of work or life or anything else, get through as much as you are able to (and please feel free to reach out to get additional time!). We'll take a look at your submission no matter how far long you've made it in the process.
If you complete the core acceptance criteria, and want to get creative with the exercise, then you might consider 1 or 2 of the following options:
1. Styling the forms so they look fabulloooussss
2. Persist the transactions in a data store in some way
3. Write some tests using Jest (or any library you prefer)
4. Add types
5. Deploy this somewhere (we use Heroku, so that might be a good option to learn about!)
If you have questions about this assignment, from the specific to the broad, please don't hesitate to reach out to your recruiter point of contact or to the hiring manager. Good luck!
To submit your solution, please upload a text file or README to Greenhouse that includes the following:
- A link to your code that we can access, such as a Google Drive folder or a Github repo
- A description of how to run your code
- Anything else we should know
If you're having any trouble at all with Greenhouse, feel free to email us the file instead.