Skip to content

A simple webtool for generating and converting UUIDv4

License

Notifications You must be signed in to change notification settings

osalinasv/uuid-webapp

Repository files navigation

UUID Tools

A simple webtool for generating and converting UUIDv4

See the tool live!
https://uuid.osalinasv.dev/

This project was built as a proof of concept for integrating HTMX and Astro for a straightforward development stack using only JavaScript.

The purpose was to not use any front-end frameworks and avoid using custom JavaScript and CSS files as much as possible. Why?

  • Proving that apps can still be interactive without using a bloated framework
  • Simplifying state management, by using HTML as the state itself
  • Delegating rendering to the server to avoid unnecessary in-memory DOM representations
  • Because its fun to try stuff

This project attempts to emulate some of shadcnui's components using only HTML and Hyperscript. While I would't necessarily recommend doing this in an actual product, its a fun experiment.

Build With

  • Astro: SSR and HTML templating
  • HTMX: Swapping HTML request results
  • Hyperscript: Defining component behavior in HTML
  • Tailwind: Styling with utility classes

For a list of all dependencies used check out package.json

Getting Started

Install all dependencies with your favorite Node package manager.
Make sure you have Node v18.14.1 or later installed.

pnpm install

Build & deploy

To start a development instance with Astro run the dev command:

pnpm dev

The live version at https://uuid.osalinasv.dev/ was deployed using Cloudflare's adapter for Astro. To build and deploy on Cloudflare run the build command:

pnpm build

You can also check out Astro's various guides on SSR adapters if you want to deploy somewhere else.