How to make a quick and pretty PureScript web app

In theory, I’m a full stack developer, but in the last year or two, I’m on the backend, staring at the code, terminal, and google docs — not tinkering much with UIs (or anything like that).

But some weeks ago, I built a prototype for a PureScript web app and want to showcase what I did in a couple of hours… I’ve pretty much copy-pasted all of this and spent most of the time scaffolding all the configs and dependencies.

The idea is to demo how quick it is to have something nice running with PureScript (not single-handedly) and share a minimal interesting project that can be used to play around with PureScript (as well as save myself and other time in the future)

Overview

For this project, I used PureScript + React + Tailwind css + shadcn/ui components. I assume you’ve heard of the first two (if not, see PureScript overview). The other two are blessings for the copy-paste-driven development.

Tailwind is a CSS framework that provides classes for styling components:

<div class="font-medium">
  <div class="text-sky-500 dark:text-sky-400">
    Some text
  </div>
  <div class="text-slate-700 dark:text-slate-500">
    More text
  </div>
</div>

Honestly, this extra noise in the markdown was scaring me away before. I decided to try it (for the first time) because I heard it’s supposed to be quite composable and also that’s what shadcn uses.

From the shadcn website: “Beautifully designed components that you can copy and paste into your apps”. That’s all I ever wanted.

Let’s see the code

The purescript-shadcn-tailwind-copypaste repository also demos a few other things:

• routing with routing-duplex and web-router
• ergonomic FFI with undefined-is-not-a-problem
• copy-paste with web-clipboard
• basic usage of fetch, fetch-yoga-json, yoga-json
• primitive authentication with local storage (web-storage)
• service/handler pattern

---

Comments

[Konstantin K]

Unless I am missing something, I don't really see how to this "shadcn" may be useful. It's said to be a copy-paste code — okay, so I am opening an arbitrary component, switch "Preview/Code" slider to "Code" and I see a class text-sidebar-foreground/70. Now, such class isn't a thing in Tailwind, so it presumably defined in the code, right? No. And I have no idea where it's defined. The code doesn't provide CSS files for that matter.

On top of that, it's a TypeScript code and not PureScript. So the site just seems useless, you'd have to write components from scratch yourself anyway.

[Zelenya]

text-sidebar-foreground/70 uses tailwind opacity modifier.

You don't need to write all the basic components (tables, date pickers, dropdown menus, and so on). And it doesn't matter what language they are written in -- you can import and use TypeScript components from PureScript.