Take-home technical exercise for a Developer Experience Engineer role.

A Next.js app showcasing Clerk authentication with a polished, branded UI — custom fonts, color palette, and accessibility-first implementation matching Clerk's design language.

Company: Clerk

First, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

• Custom font added (Display and body text taken from Clerk website)
• Custom color palette added (Primary color taken from Clerk Website)
• Users can tab through the different elements and interact with just their keyboard
• Text can be read by users who use screen readers
• Mobile-friendly and fully responsive
• Loading state with spinner
• To save the eyes of users, color contrast is maintained between text and background as the background color is updated
• Cookies are set to remember the user's background color choice

• Used React Hooks to manage state
• Used the latest versions of TypeScript, React, Next.js, and TailwindCSS

• Tested accessibility issues using Axe DevTools
• Tested responsiveness using Chrome DevTools
• Tested performance using Lighthouse
• Tested different browsers (Safari, Firefox, Chrome, Edge) - my primary browser is Chrome, so learned that the color picker experience is different when testing on Safari & Firefox, but functionally everything works as intended

• Comments added (also JSDoc comments for essential functions)
• Code styling and formatting using Prettier

• I would have added tests using Cypress
• I would have documented the components using Storybook
• Broken up pagination into reusable buttons
• Added error visual state for when the API call fails
• Added caching for the API call