←

Boilerplate - React SPA, TypeScript, styled-components & Vite

Mar 20, 2025

TL;DR

You can find the code on GitHub. Don’t hesitate to add an issue if you feel its missing something!

I was recently interviewing for a job and was asked to complete a frontend take-home assignment, which I’m very glad to do, really (🫥).

The stack was simple: React, TypeScript, styling of my choice.

The thing with those tests is that you never really how much time it will take. The recruiter always gives you an approximation like: “Don’t worry, it should take only a few hours, 3 hours top”. Fine! Ready to burst this in 30 minutes once I get the exercise!

Unless…

Well, unless I have to set up the project from scratch and the last time I did it was years back when I started working at Scaleway.

Recent times have seen the rise of frameworks built on top of “core” UI library. While its true that Next.js, SvelteKit, Astro, Remix or Nuxt goal is to abstract and simplify how we build things for the web, ignorance could rise when developers forget what powers them.

Those tools stripped away manual configuration of the client-side stack, leaving me with a non-confident “Ok, easy… I think” when I have to create a raw SPA with React.

What about CRA (Create-React-App)?

The React Dev team has recently deprecated Create-React-App and favours the use of said frameworks for various (and valids) reasons. Thus, its still relevant to be able to do full client-side web app.

I’m pretty confident that the “3 hours top” approximation of the recruiter didn’t take into account the choice of the build tool, the eslint config (which can become cumbersome with the new flat config), making sure the style that you choose is working and is “TypeScript-compliant”, add or not some tests (and if yes, what kind?)…

For moment like that, I created a SPA React boilerplate repository, available on GitHub. It features:

You can find the repository on GitHub. Please open an issue if you have trouble using it or if you feel it lacks something useful!

Hopefully it will help you burst your take-home assignment in less than 30 minutes, for real (not like me).

Happy coding!

Thanks for reading! It is my very first blogpost!