Our great sponsors
-
-
supabase-js
An isomorphic Javascript client for Supabase. Query your Supabase database, subscribe to realtime events, upload and download files, browse typescript examples, invoke postgres functions via rpc, invoke supabase edge functions, query pgvector.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
headlessui
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Now the backend is up and running, it's time to work on the user interface. The fun part, is the React part. I took the chance to use Vite for this project due to the fact I didn't really need all the bells and whistles that came with something like NextJs. Using Vite was a blast it's pretty simple to use and add on top of.
With the form and table more less coded up and looking good, it's time to populate the UI with some data. Supabase makes this super easy with supabase-js all that is required to get going is to create a connection client like so:
The UI itself is pretty simple it's just a table with a form that populates some data after the user has submitted it to the database. As I was already using Tailwind I wanted to bring some life to the form and make things look decent. This is where headless.ui came in allowing me to make decent looking form components. I went ahead a built a couple of Listbox components to give the form a better feel. The headless ui library was awesome to use and makes forms and other little components a joy to build. You're even able to combine certain components within each other.