Busy Friends Make Scheduling Hard ... but quando.events makes it easy! Ever tried planning an activity with three or more busy friends? You know how hard it can be. It inevitably takes a dozen messages going back and forth, trying to find out where your schedules align.
That’s why I created www.quando.events, a simple & free website that makes it easy to schedule meetings with friends.
How it works:
- Create a new meeting
- Select your free time slots
- Share the link with your friends
- Meet in the overlap
Try it out now: Create a new meeting.
If you want to read about the concept and background, read my blog post.
I went from the idea to release in just 10 days. Usually, I work with React, Flutter, or static websites, but for this project, I wanted to try out a new stack. I went with Nuxt, a meta-framework that bundles Vue with a backend and some other helpful bits into one compelling package. It offers great DX and enables extremely fast iteration.
Stack:
- Frontend
- Vue 3 for all UI. Includes server-side rendering with hydration.
- Typescript, because if I have to use JS, I'd like to have types, please.
- Tailwind CSS, for maintainable styling.
- Pinia, for managing state and persisting to local storage.
- Backend
- API: Nitro with Websocket support, for sending real-time updates.
- Database: Redis as a simple key-value store for the meeting data.
- Plausible Analytics because it's privacy-friendly and can be self-hosted
- DevOps
- Hetzner for my cheap VPS. It powers all my services, including this website, quando.events, my Four in a Row game, and more.
- Traefik to proxy requests to the service.
- Docker Compose to easily build and deploy the bundled Nuxt app, Redis, and Plausible.
Honestly, working with Nuxt was really pleasant. I've read that "opinionated products breed passionate customers" and this certainly rings true in the case of Nuxt. If you follow the conventions, everything just works.
Routing is based on directories by default. Server-side rendering works out of the box, which is important for good SEO and fast page loads. Of course, you still get all of Vue's reactivity after the page is hydrated, enabling highly interactive pages.
Vue offers a lot of useful built-in components, like transitions. Adding dialogs with Headless UI was a breeze.
Funny enough, the hardest part wasn't building the rather complicated calendar UI. Instead, it was getting Google's approval for the 'import events' functionality. There are lots of rules to follow. Some are obvious (add a privacy policy), and some aren't (make sure to show the 'AppId' in the browser's URL bar in your demo video).
To try it out, head over to www.quando.events now, and schedule a meeting with friends.
- Learn more about me.
- Check out my other blog posts.
- Find me on LinkedIn.