Walking Appwrite
I saw this Appwrite hackathon on dev.to and I guess I was taken in by the big numbers or the promise of a free t-shirt, but one way or another I thought “I could do that!” and so now I’m doing that.
While developing my current project I realised I could use a tool that lets you manage palettes at scale. A lot of the existing things out there let you work with one palette at a time in a very arty, considered way – I need to create, update, and delete palettes with a broad view. I want to import and export lots of JSON. And export CSS too. So this seemed like an opportunity to build that, and get rewarded at the same time.
It’s called ‘palace’ (palette ace, see).
Starting up Appwrite
Appwrite is a backend-as-a-service, and it’s delivered as a Docker… crate? Is that what they’re called? I played with Docker one time but I’m not confident with it, plus, I want to create an app that’s Truly Live On The Internet and I’m not gonna go through exposing my local PC and opening firewall holes, etc.
Appwrite is a one-click app on DigitalOcean. So, it seemed like a chance to try out DigitalOcean. I splashed $5 prepayment on a “small droplet” for a month – the hackathon deadline is a month away anyway. Nice.
Suddenly the amount of new information and details to remember was proliferating rapidly, bees circling my head, seeking a place to nest. I put the bees to bed in a tidy new Kinopio space (pictured) as it helps me group and organise details and useful links.
I’ve gotta say the one-click experience on DO was really easy. And after it comes up, you get a big button to take you to your Appwrite dashboard. It gets a public IPv4 address (a rare commodity!) and you can assign a custom domain if you want.
Looking at Appwrite features, I thought the instant account management would be fun to use. Accounts and auth are always a bit of a pain so this seems like a handy feature to leverage.
The thing that struck me right away was “Anonymous Sessions”. I love tools with anonymous sessions! You can just get to trying it without creating an account, and then promote your account into a real one later.
Frontend
I’m learning Vue3 with the Composition API, <script setup>, Typescript, etc. Appwrite provide a useful sample project called demo-todo-with-vue, so I keep the readme open in one tab and a GitHub Dev window of the source code open in another.
The most useful thing here was their api.js wrapper around the API. It made it simpler to understand how to use the underlying Appwrite library.
I had some trouble picking a good colour picker, and settled on vue3-colorpicker, but I had to do some CSS hacks to get it to display where I wanted.
Also troublesome was the npm color package, which doesn’t play nice with Typescript – fortunately someone made colord to solve this problem.
Lastly, I realised pretty quick I need some global state management. I usually steer away from a redux store unless it’s absolutely necessary, because of all the extra code you have to write. To my pleasant surprise, pinia (the replacement for Vuex as of Vue3) is simpler than it’s predecessor, and they’ve completely done away with Mutations, which were gross. So I’m really happy. Using it is a breeze! 🎑
I have a test instance on Netlify… URL secret for now 🙂
Progress
So far, I’ve got it to get or create an anonymous session, and I’ve investigated saving data back to Appwrite. I didn’t enjoy Appwrite’s interface for setting up “collection attributes” (database columns) - it is a pretty painful click-and-wait web UI. I can’t imagine architecting a large database with that tool, I guess (hope) there is some kind of bulk interface where you can upload a YAML or something.
I’m not sure whether I want to use the traditional “records” concept for each palette, or whether to store the user’s entire app state into an unstructured document and just sync that. The latter seems easier to acheive because my CRUD operations aren’t as clearly defined as in the trivial todo app sample.
So, I’ve got some technical choices to make and some work to do. But I’m having fun 😄 See you later!