React Engineer

Assignment

React 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 React code using WordPress APIs.

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

  • React source repo ➞ If you have already worked on some React project which uses WordPress APIs, please send us a public source code repo link.
  • Gutenberg blocks ➞ If you have already created some custom Gutenberg blocks using React, please send the link to your source code repo.

Not Acceptable

  • React work samples which do not make use of WordPress in any way. Please check sample challenges below to see how React and WordPress can be used together.
  • 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.
  • 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 Challenges for Assignment

Since you are reading this, we are assuming that you would like to proceed building something for fun and for the application purpose.

We have two sample challenges listed below. Pick either.

You need to complete any one. If you wish to complete two, we won’t mind. 😉

#1: React App for WordCamp Schedule Viewer

Problem Statement

Please create a React App which fetches data using WP REST API using WordCamp Central site. The lack of links to WP REST API documentation is on purpose. You should be able to find your way to documentation and a bit of how WordPress works (hint: custom post type).

Regarding functionality of your app, display upcoming and past WordCamps in:

  1. calendar view. Something like Google Calendar.
  2. (optional) map view. You may need to use another API for maps. You can ignore this feature if you are short on the time.

Your app will be view only as there is no write operation.

For design as in UI/UX, be imaginative.

For CSS feel free to use frameworks.

Submission Guidelines
  1. Write test cases using JEST or Enzyme. Your code should have min 60% test coverage.
  2. You should set up the project from scratch and not use any toolchain, including create-react-app.
  3. Source Code Hosting ➞ You must use Github (recommended) or Gitlab for source code hosting.
  4. App Hosting for demo ➞ As your app work doesn’t have any server-side component development — besides WordCamp site which is already publicly hosted — you should be able to use Github pages. You can even try Vercel or any other hosting of your choice.

#2: Gutenberg Block for WordCamp Schedule Viewer

Problem Statement

Please create a Gutenberg Block for WordPress using React which fetches data using WP REST API using WordCamp Central site and displays it on WordPress site.

To control how data will be displayed, please provide bunch of options below:

  • Select “View Type” (hint: Use Block Styles API to implement this)
    • a calendar view (something like Google Calendar)
    • a map view (you may need to use another API for map)
  • A checkbox to include “Past Events” in the Block Settings. By default, the block will only show “Upcoming Events”

For design as in UI/UX and CSS, try to stay close to WordPress styling so your block feels like part of WordPress core.

Submission Guidelines
  • Write test cases using JEST or Enzyme. Your code should have min 60% test coverage.
  • Source Code Hosting ➞ You must use Github (recommended) or Gitlab for source code hosting.
  • WordPress Hosting for demo (optional) ➞ Technically, you can render Gutenberg and a custom block outside WordPress as a standalone JS app. If you like to take this route, you should be able to use Github pages for hosting. If not, you can Google for a bunch of WordPress hosting options. Pantheon allows dev sites to be created freely. Just in case figuring out WordPress hosting is tedious for you, just send us the source code repo link. We will do the needful!

Have Questions?

We request you to read FAQ here.