Developer Applicant Challenge – Part 2​

As part of the application process, you’ve been requested to complete the following 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).

Submit Your Code​