Developer Applicant Challenge – Part 2​

As part of the application process for a full-stack developer, you’ve been requested to complete the following additional portion of the Rymera developer challenge.

If you have any questions please respond to the last email you received from our team.

Challenge: Create front end Javascript App​

Overview:

In Challenge #1 you created a “Movies” plugin with a private API endpoint. In Challenge #2 you will be creating a simple javascript based “movies” app for the front end of the site, sourcing data from the API you created and presenting it to the user.

Since this challenge is a front end interface for the plugin you developed in challenge #1, if you haven’t done that challenge, please go back and complete it now.

YOUR TASK: Create a frontend javascript “Rymera Movies” app that lets users save a list of movies to a list.

App requirements:

• This front end app should utilize the movies API you created in challenge #1.
• You should use a modern JS framework. We suggest either React or Vue since we use these libraries in our company.
• Load the app in the context of WordPress. Meaning, only people that are logged into WordPress should be allowed to use the React/Vue app.
• The app should be presented on a WordPress page called “Movies” located at [site url]/movies/
• You can insert the app on that page any way you like. Just let us know the set up instructions when you submit.
• The header of the app should have a text heading “Rymera Movies”
• The header of the app should have two links:
  • “Show All Movies”
  • “My List”

Displaying movies:

• When the app loads, it should query the API endpoint and display a grid listing of all the movies.
• Movie listings throughout the app should be paginated to 10 movies per page.
• Each movie should have a “heart” button that, when clicked, will add the movie to the person’s “My List” list.

Maintaining a “My List”:

• Maintain in the session data a “My List”, this list should persist across the app. 
• The “My List” should be persisted even if you refresh the whole page.
• The app should have a “My List” page to view/manage their list.
• The “My List” page should show a grid of the current movies in the “My List”.
  • Each item should have an action to remove the movie from the list.

Data/API source:

• You must use the API endpoint you created for the movies in Challenge #1 to retrieve and show movie data in the grid.

Notes:

• The code you submit should not be built with/by/from nor use boilerplate or tutorial example project templates. It has to be fully created by you.
• Use modern javascript development approaches/architecture, state management (example: React, Redux, Vue, Vuex/Pinia, etc).
• Feel free to use a UI library such as Ant, Bootstrap, or other.
• Your submission should be a fully functional React app meeting the requirements listed above.
• Do not rush! Your code will be used to measure your abilities and your ability to labor for simplicity (one of our core values).