React Coding Challenge Wednesday - Build A Pixel-Perfect Header (Incl Screencast)

Every Wednesday for the next few weeks I'll share a new React coding challenge with increasing difficulty.

Many new developers struggle with CSS. Understandably they rather use UI frameworks. But for a frontend developer working with designs and writing custom CSS is an important skill. Especially when they work on customer-facing products that don't use any of the polished UI libraries.

So today, let's practice our CSS skills with a simple challenge. This (and all following challenges) are based on this professionally created project on GitHub and these designs on Figma:

The Challenge: Make A Header Pixel-Perfect

This challenge is a simple UI task: You build the header component for the application's landing page based on Figma designs.

Here is the current state of the website and below is the design.

• Skills tested: CSS
• Difficulty: Easy

Tasks

• Implement the header based on the designs.
• The navigation links should point to /, /products, /documentation, and /pricing.
• The "Open Dashboard" link already exists but needs to be adjusted to match the designs.

Resources

• The repository
• The design on Figma.

To run the app on your local machine use the following commands:

git clone https://github.com/profydev/prolog-app.git
cd prolog-app
npm install
npm run dev

Hints

• The file you need to edit is pages/index.jsx inside the repository.
• Currently, styled-components is used for the CSS. I’d recommend using it as well for your code, but alternatively, you can use CSS modules or inline styles. The library doesn’t matter much here.
• The project itself is written in TypeScript but the file for this challenge is plain JSX. Feel free to change the file type to .tsx if you’re comfortable with that.
• If you need help because you’ve never worked with designs or you want to make them pixel-perfect, you can get additional resources when you drop your email in the form at the bottom of the page.

If you want a tougher challenge you can try to

• Integrate your code into the existing codebase.
• Add a Cypress test for the header to the existing test suite.

Solution

Here is the solution to this first task. This is basically what I'd expect a Junior candidate to build for such a challenge (maybe without making the CSS pixel-perfect). All the code is in a single file and not divided into separate components.

Advanced Solution

Here you can watch me refactor the above solution to fit into the existing codebase. It uses the feature-based folder structure, the existing styled-components theme, and adds a Cypress test for the header.

I wouldn't expect this of a Junior candidate. Especially not in an unknown codebase. Still, it might be interesting to watch.