A Palace of Palettes with Appwrite

Overview of My Submission

My submission for the Appwrite Hackathon is Palace, a palette organising playground for people dealing with colour at palatial scale 😎🤪

• 🐙 GitHub Repo
• 🏯 Live Demo

This is borne out of my need for a tool to let me import, tweak, and export lots of palettes. And I thought it would be a great opportunity to try out the auth and database features of Appwrite for this hackathon!

The Appwrite features it uses are:

• Anonymous sessions
• Accounts
• Database

I can tell I've only scratched the surface, as there's a lot of backend support in Appwrite too, which was just outside the scope of this project.

But it was great to be able to add server-backed save features for relatively little effort.

Submission Category:

Web2 Wizards

Link to Code

SteGriff / palace

Palette Ace

palace

Palette Ace - Build, curate, and export colour palettes

Resources

• Appwrite http://134.122.50.123/console
• Demo todo with vue
• Built from Ste's Vue3 starter
• Kinopio board (private)

Dev

• Install dependencies with npm i
• Run with npm run start

Prod

• Build for prod with npm run build
• Deploy to e.g. Netlify with the output from build directory

View on GitHub

Additional Resources / Info

I wrote about the creation process in a previous post, but the tall and short of it is:

• Built with my Vue3 starter and Pinia
• Made lots of use of the great Appwrite demo-todo-with-vue
• Used packages like vue3-colorpicker and colord
• Deployed the backend on DigitalOcean with the Appwrite one-click droplet
• Deployed the UI on Netlify

Challenges

I wanted Palace to have import/export to JSON and CSS, but didn't have time inside the hackathon. Those will come later 😊

AI had to use a spare domain to get the backend talking to the frontend over HTTPS; that was an unexpected challenge but it worked eventually.

Palace has one really big bug which is that data isn't isolated per user... everyone can edit everyone's data 😅... I set everything up as I thought I should in appwrite, and manually set permissions with user:$userId but still, the data leaks. Maybe somebody will comment and tell me what I did wrong!

Thanks for reading my entry -- happy hacking 😊