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…


This content originally appeared on DEV Community and was authored by Zelenya

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


This content originally appeared on DEV Community and was authored by Zelenya


Print Share Comment Cite Upload Translate Updates
APA

Zelenya | Sciencx (2024-10-01T00:10:54+00:00) How to make a quick and pretty PureScript web app. Retrieved from https://www.scien.cx/2024/10/01/how-to-make-a-quick-and-pretty-purescript-web-app/

MLA
" » How to make a quick and pretty PureScript web app." Zelenya | Sciencx - Tuesday October 1, 2024, https://www.scien.cx/2024/10/01/how-to-make-a-quick-and-pretty-purescript-web-app/
HARVARD
Zelenya | Sciencx Tuesday October 1, 2024 » How to make a quick and pretty PureScript web app., viewed ,<https://www.scien.cx/2024/10/01/how-to-make-a-quick-and-pretty-purescript-web-app/>
VANCOUVER
Zelenya | Sciencx - » How to make a quick and pretty PureScript web app. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/10/01/how-to-make-a-quick-and-pretty-purescript-web-app/
CHICAGO
" » How to make a quick and pretty PureScript web app." Zelenya | Sciencx - Accessed . https://www.scien.cx/2024/10/01/how-to-make-a-quick-and-pretty-purescript-web-app/
IEEE
" » How to make a quick and pretty PureScript web app." Zelenya | Sciencx [Online]. Available: https://www.scien.cx/2024/10/01/how-to-make-a-quick-and-pretty-purescript-web-app/. [Accessed: ]
rf:citation
» How to make a quick and pretty PureScript web app | Zelenya | Sciencx | https://www.scien.cx/2024/10/01/how-to-make-a-quick-and-pretty-purescript-web-app/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts