What is this?

You join or create a lobby, and a CSS challenge is generated for that lobby. The first one to complete it wins!

Why is the challenge different each time?

I wanted to prevent people from copy-pasting a previous challenge and instantly winning. It's a little bit rudimentary at the moment, but I hope to get some more complex and interesting challenges going.

Any tips and good things to know?

The sanitise function I run is based on a whitelist, so if I have missed any tags or attributes that you typically use, please let me know!

The only base style I've added is margin: 0; background: white; on the body.

In the generated CSS, the pixel values will always be divisible by 5.

What's the tech stack?

Next.js + Typescript with Styled Components on the front-end.
Node.js + Express + Prisma + Typescript on the back-end.

I use Puppeteer to screenshot the rendered CSS on the server, and use a library called Resemble.js for comparing the image to the challenge.

Overall I've been really happy with it. With Prisma it's easy to make schema changes and the migration seems great (so far). With personal projects I am always figuring it out as I go, and so the data structure is inevitably going to change heaps as I dream up new features and better ways to do things. And the added bonus of Typescript on both front and back-end, with shared types between them keeps the project pain-free and enjoyable to work on in my spare time.