Flintstone is a high-performance web app that refines the document editing process. I designed it with a clear, responsive interface for changing data, text, and styles in real-time.

Initial users have told me they felt more in control of their documents than ever with something so simple and powerful.

Flintstone handles secure individual user accounts through Netlify's GoTrue API. I designed the user experience to be seamless and unobtrusive, while authentication is handled nearly instantly in the background.

The interface is modeled after a text-editor, where the majority of real-estate is reserved for the long form text. Data auto-completion (sometimes called “intellisense”) was one feature I was excited to integrate.

Rich text features have been shown to frustrate many users, so I opted for a richly-applied style editor. This approach makes consistent styling a no-brainer, and doesn't require knowledge of CSS or HTML to use.

Technologies

GoTrue API

I used the GoTrue API to handle user signup, authentication and custom user data. GoTrue is based on OAuth2 and JWT.

Lit

I used this templating library from Google's to render a reactive user interface.

esbuild

The source code was split up into components and templates, so esbuild was the fastest way to bundle and minify the application.

Netlify

I'm hosting the app on Netlify and deploying from its GitHub repository.

Try the demo
Check the source code

Related Posts:

Big List

State Management, Downloads, Productivity

New