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.

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.

Objective: Create a frontend javascript “HeroThemes Movies” app that lets users save a list of movies to a list.

Requirements:

  • API Integration: Utilize the movies API from Challenge #1.
  • Framework: Use a modern JavaScript framework (React is recommended).
  • WordPress Integration:
    • Load the app in the context of WordPress. Meaning, only people that are logged into WordPress should be allowed to use the 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 “HeroThemes Movies”
    • The header of the app should have two links:
      • “Show All Movies”
      • “My List”
  • App Features:
    • 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.

Development Guidelines:

  • Originality: Code must be your own, without using boilerplate or tutorial templates.
  • Modern Practices: Employ current JavaScript practices and state management (e.g., React with Redux).
  • UI Library: You may use any UI libraries you like.
  • Submission: Deliver a fully functional React app that meets all requirements.
  • Quality over Speed: Focus on simplicity and clarity, as your code will reflect your skill and alignment with our core values.

Note: Complete Challenge #1 before starting this if you haven’t already.

Please enable JavaScript in your browser to complete this form.
Click or drag a file to this area to upload.
Please upload your code a ZIP file.
If the code is hosted on GitHub or a similar platform, this allows for easy access and review.
Add any additional comments about your challenge submission