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