Assignment

Front End Engineer

If you have directly landed here, and have questions about this whole “assignment” thing, you may read this first!

Now you are settled, the purpose of this assignment is to check if you can write the quality Front End code and have a little understanding of WordPress.

Assignment Alternatives

If you have existing work samples to show and you missed them to submit during the application process, you can still submit them by replying to the email you receive upon your application.

Acceptable

You can send us Github/Gitlab or other link to a public source which contains:

  1. WordPress theme ➞ If you have already worked on a WordPress theme project, even when the PHP portion of theme is not developed by you.
  2. Front-end source ➞ If you have already worked on some project which uses CSS & JS. The JS portion can use WordPress using REST/GraphQL or even XMPRPC API.
  3. Gutenberg blocks ➞ If you have already created a custom Gutenberg block that also works.

Not Acceptable

  1. Any work sample which does not make use of WordPress in any way.
  2. Sending links to public sites! It doesn’t tell us anything about your code quality or if you have followed the coding standard or written test cases.
  3. Sending zip files either as an attachment or via dropbox or some public link. Zip files do not give us visibility into your commit history over the time which tells a lot about your thought process when building stuff.

Sample Challenge for Assignment

Since you are reading this, we are assuming that you would like to proceed with building something for fun and for the application purpose. Please complete the following slideshow assignment.

JS Slideshow for WordPress Posts

Problem Statement

Please understands you must do this assignment using core JS & CSS. No frameworks. Not even jQuery. Not even for AJAX. You are free to Google as much as you want!

Now please accomplish following:

  • Please create a Single Page App using CSS/JS which fetches data using WP REST API using a WordPress site. You can use WPTavern (REST API endpoint).
  • Once you fetch data, please display data as a slideshow. Make sure your slideshow covers post title, post featured image, post date, and any other meta-data you can find. Clicking on title/image should open the original post link.
  • Every slide in slideshow must wait for 5 seconds before automatically moving to next slide (post). Besides, please add “buttons” to move to the next and previous slide.
  • The slideshow must support keyboard navigation. The right arrow key to move to the next slide and left arrow key to move to the previous slide.
  • The slideshow must be responsive.
  • Further, on mobile devices, a viewer should be able to swipe with a thumb to move between the next and previous slides.
  • When your page loads, it will display a slideshow for the latest WPTavern’s post, but the interface must provide a text-field to accept any website URL and be with a click of button change slideshow content from this website. As an example, we will input rtcamp.com and click-a-button which should change slideshow to display rtCamp’s latest blog post.
Submission Guidelines
  • Source Code Hosting ➞ You must use Github (recommended) or Gitlab for source code hosting.
  • Web Hosting for demo ➞ As your app work doesn’t have any server-side component development — besides using data from WordPress sites which are already publicly hosted — you should be able to use Github pages for hosting. You can even try Vercel or any other hosting of your choice.

Have Questions?

We request you to read FAQ here.