Frontend Case Study.md

Frontend Developer Case Study

HI POTENTIAL FRONTEND DEVELOPERS!

I'm Tom, I run development of the WindQuest and Bézier webapps. If we end up working together, I'll be responsible for mentoring and training you as well as overseeing your work on WindQuest.

Right now, if you're willing, I'd like you to complete this small case study so I can get a sense of where your skill level is at.

At WindPioneers and our partner company Octue.com, we're keen on helping our employees and candidates improve themselves continually. With that in mind, I've designed this case study so that most developers can learn things while doing it - put a little time in and you'll come out of the other side a better developer.

I've noticed that a lot of applicants have few public demos, so once you're done, well, it's your code! So you're welcome to keep the repo on your github account to show off your work.

Background

We all use dozens - often hundreds - of web forms each and every day. But, even basic web forms are surprisingly difficult for developers to master.

The devil is in the details: providing sensible placeholders, labels, help text, error messages and field focusing in subtle and non-invasive ways makes the difference between a really broken, frustrating user experience and a quick and helpful tool.

To make matters worse, form data has to be submitted to a server somewhere, meaning that we have to deal with the asynchronous process of submitting data while the user is waiting.

The Task

Make a form work.

Make a single page with one text input field and a single submit button... it's as "simple" as forms get but we're looking for you to turn these two basic HTML elements into something that's high quality, user-friendly and production-ready.

You can use third-party libraries to help you achieve great user experience!

I've prepared an API endpoint to receive and validate the submitted data.

You'll need to:

• Create the basic page with the form
• Manage submission of data to the API
• Handle API responses, both Success 200 and BadRequest 400
• Make the form look nice
• Manage form state and workflow. Decide and implement:
  • What should happen while the form is submitting
  • What should happen after failed and successful submissions

Using AI

By all means, have ChatGPT do this for you. OpenAI's v5 is definitely capable of this task, as are similar offerings from Anthropic and Google! But I probably wouldn't, if I were you... I might ask you how it works in the technical interview!

Getting started

Create a repository on your own github account, make it public so we can see it - you can use it as part of your portfolio later if you wish.

First, scaffold a react app - use something like vite (recommended for a small project like this!) or nextjs to get a starting page up.

Second, add a form - here's something basic so you get the idea, but you'll want to replace them with more useful handlers and components (either your own or from third party libraries).

function App() {
  // Throw this away, and make your own submission logic :)
  const handleSubmit = ({ ...args }) => {
    console.log(
      "Form submitted... so I'm printing a log. Instead, you'll need to POST the form - check the 'API' section below for more."
    )
  }
  
  return (
    // You'll probably want to use a third party form handler instead of this raw HTML form element
    <form onSubmit={handleSubmit}>
      {/* Raw HTML elements?? Make this look nicer by using a component library instead! */}
      <input id="message" />
      <button type="submit">Submit</button>
    </form>
  )
}

Third, test out the API (see below) to be familiar with that.

Then... you're on your own! Well, not quite: check out our "Expectations" and "Resources" below :)

The API

There's no auth or permissions to worry about... simply POST json data to the endpoint. The data you POST should look like this:

{
  "message": "the-contents-of-the-text field"
}

Why not try it yourself right now? Open a terminal and type:

curl -X POST https://europe-west1-octue-amy.cloudfunctions.net/frontend-developer-case-study -H "Content-Type:application/json"  -d '{"message":"thisworks"}'

This should return the original message back to you, with a SUCCESS 200 code (a common pattern for OK submissions).

The API can also return errors... You can see the kinds of errors you might get by doing:

curl -X POST https://europe-west1-octue-amy.cloudfunctions.net/frontend-developer-case-study -H "Content-Type:application/json"  -d '{"message":"error"}'

Expectations

• Do NOT do this purely in raw JS, CSS and HTML. Please use react, and make use of libraries to help you with styling and form state management.

• DO use typescript. We're moving our frontend code all to typescript and are big believers that it helps with clear code!

• DO keep it clean. If you choose to add your own components, then the rule is one-per-file, which helps keep things understandable. Look for other ways to keep your codebase clean too.

• DO Use the docs of the libraries, StackOverflow and even ChatGPT. Smart and quick frontend developers don't reinvent the wheel, they find good examples and tutorials they trust, then copy/paste code to accelerate the only thing that matters: a well functioning, user-friendly and attractive end product. In fact, we've chosen the libraries we have precisely BECAUSE there are LOADS of examples for you to copy-paste.

• DO NOT Use ChatGPT to do the bulk of the task. Yes, we know it's perfectly capable of doing this entire task itself. It will become painfully clear during the technical interview if you do.

• DO Use libraries and tools you're familiar with. We've recommended some below but they're not mandatory so change if you want!

• DO Make it look attractive. Look, we know you're not a Designer, but the ability to know together internal admin tools or prototype features that aren;t total eyesores is an important part of the job. It's fine to end up with a pretty standard, fairly clear, modern look - easily achieved right out of the box with any component library. If you want to do more customisation then feel free!

HINT: If you think something's taking way too long, and it should be easier... it probably is! Take a little rest and clear your head :)

Resources Available

I've chosen these libraries from years of PAINFUL experience with React, and I think they're the best that the ecosystem has to offer (although of course the choice of component library is pretty subjective depending on your taste). They all have excellent documentation with loads of examples, too.

• react-hook-form is really powerful for managing form state, has GREAT docs/website and examples for use with MUI TextFields.

• axios is the simplest way of posting to the API. Again, loads of examples on the net and in the docs about how to use axios to submit data in a react component.

• zod is a library for client-side form validation that plays nicely with typescript

• ShadCN is a component library. It looks pretty safe-but-boring these days but provides a good basis.

• TailwindUI is a group of beautifully designed components and templates for inspiration

How to really impress

If you really want to show off your experience, here are some extras that really add a touch of professionalism, and are learning points in themselves. We definitely don't expect all of these, that probably would take too much time!

• Use a semantic commit practice as you progress through development

• Use available tools like biome to audit and improve your code

• Use Functional Components, not Class Components. They're much easier to read, and the lifecycles are easier to understand.

• Demonstrate awareness of code performance with appropriate use of useCallback and useMemo. ONLY if appropriate though, don't just scatter them in there. I see you.

• Make it responsive / fluid. We don't actually do much on mobile, but being able to succinctly design for responsive grids demonstrates a good appreciation for how components get laid out on a page.

• Demonstrate the desire to ease the load on the backend API by pre-validating the form contents client-side. Take care of those onFocus and onBlur handlers though - it's bad UX to have errors show before user entry or after correction ;)

• Create a hook to manage form submission.

• If you make extra components, demonstrate the need to have clear component APIs using their type interfaces.

Oh, and one last thing...

There's a bug in the API code which someone carelessly wired to a small amount of dynamite 🧨, which is placed under the fridge in the ice cream place down the road from Wind Pioneers' office. If anyone uses your form to submit a message containing a ! character, the bug will trigger the dynamite, there'll be vanilla choc chip everywhere 🍦💥, and you'll be the least popular person in the office. Beware.