Thanks for your interest in joining the Wonderschool engineering team! Before we proceed with more formal interviews, we ask that all candidates submit a coding challenge. The coding challenge is a foundational piece of our process and it's referenced later in our process during the technical interviews.
For an experienced full stack developer, the coding challenge should not take longer than 2-4 hours to complete.
If at any point you have questions concerning the coding challenge and/or interview process, please do not hesitate to email engineering@wonderschool.com.
The coding challenge revolves around building a task list. Tasks belong to groups and can have dependencies on one another (i.e. if task X depends on task Y, task X cannot be completed until task Y is completed). The challenge includes 3 components:
- Build React-based UI
- Design database schemas to store todo's using Ecto
- Implement GraphQL resolver logic in elixir
The UI consists of 2 screens:
-
Overview: Displays a list of all the groups along with their completion status. Clicking on a group should render the detail screen.
-
Detail: Displays a list of all the tasks in the selected group and allows the user to toggle the completion status of unlocked tasks.
The screens should look like this:
The data you should use to populate your implementation is available via a simple GraphQL query which is already included. SVG assets for the icons used in the design can be found in the public/ directory.
Some things to keep in mind:
- Locked tasks cannot have their completion status toggled
- Tasks remain locked until all of their dependencies have been completed
- Marking a task as incomplete should lock the corresponding tasks for which it is a dependency
- Your implementation should resemble the above design
- Please don't introduce any new dependencies, you should have everything you need to complete the challenge
- We value well structured code that follows best practices
Design a schema to store the task list data. You should use Ecto migrations to create the tables needed. The schema should define all tables, columns, and constraints needed to store the task list data.
Implement the corresponding schema modules for each new table designed in the previous step (structs or emedded schemas are permittable, as well, depending on your database implementation). Typespecs with Dialyzer are definitely favored.
Write a context that manage's your todo's and interacts with the repo. Please be wary of naming and director structure conventions.
Build a schema using Absinthe's schema notation to dictate object and input object structures. Please include queries and mutations for managing todo's from you UI.
The backend implementation has a stub implementation for the all todo's resolver. Replace this stub with an actual resolver that calls to the context that you implemented in the previous step.
Depending on your environment you might have to fist have to install all dependencies to run the elixir backend. Please see the phoenix getting started documentation for more details. Once you have all needed dependencies installed start the server by standing in the /backend folder and run:
mix phx.server
To get started, clone this repo to your local machine. Next you'll want to install the dependencies and fire up the app:
yarn install
yarn start
At this point, the app should be running in development mode and any local modifications you make will be automatically detected and result in the app to reload.
To submit your coding challenge, commit all your changes to the master branch and run the
following commands:
# Make sure all changes were committed
git diff-index --quiet HEAD -- || echo 'You have uncommitted changes!'
# Create bundle to submit
git bundle create coding-challenge.bundle HEAD master
Email the generated coding-challenge.bundle file to engineering@wonderschool.com. We do our best to review and respond to submissions within 1-2 business days.
Thanks for taking the time to do this coding challenge and here's hoping we talk soon!
- Typespecs for Elixir code are appreciated
- Testing is favored if time permits, but given possible time constraints, we understand if this is cut short
- Using modern React conventions is preferred, e.g. dumb components, hooks, etc
- Please avoid using Phoenix generators for context functionality; we'd rather see your code and your patterns :)
- Have fun with it! We understand that coding challenges are a pain, but we really appreciate your participation in this process!
- If you have any you any questions or special circumstances, we are more than willing to work with you on having the best possible interview process.