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.
- Displaying movies:
- 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.