MindBody Front End Engineer Homework

When applying at MB, they asked they're applicants to do some "homework". When I received the repo containing what I was supposed to build, I was excited. I saw plenty of potential.

They gave me a desktop design and said use whatever tools you need to do the job. At the time I had built a few apps using the framework called hyperapp, which I decided to use for this homework.

Navigation

I immediately hit the drawing board and thought out what the mobile view might look like.

I came up with an idea of how to share the same navigation structure, because I only wanted to define the nav once. The tabs would open up in a dropdown and the subnav would stay where it was at and just slide to the left/right as you needed to scroll in it.

Click around the tabs and sub nav to see the state of the active item change. That's stored in state and persists across mobile due to the structure I implemented here.

Data Structure

I made sure to save the content in state so when I added new programs, they would opperate in the same fashion. You could add any number of new programs and delete any number of programs (all stored in locally in state).

The state held on to whether the card details were opened or closed and shared that with the "All Programs Overview" at the bottom of the page.

Hover over the pencil to see the trashcan and click delete to see the card disapear as well as the program overview below.

New Program Modal

After clicking on the "Add Program" button you are presented with a modal. There are three sections that can be interacted with and in order to create the new program two sections are required. It has an interactive validation on it.

The first section is choosing a program type. This essentially is a radio button selection as it can only be of one of the types. But in order to proceed the the next section you must choose one.

The second section is the Program name. On blur of the input field you it validates and either enables the third section or disables it if there is no text. Try adding some text, change some values, go back and remove the text and see that the validation as you hover won't allow you to create the program. (You can still tab through and change the options but can't create the program).