MoodCloud

About the project

This is a Vue-based Moodboard application that allows users to creatively collect and arrange various types of elements—images, songs, text, and colors—on a customizable board. With intuitive drag-and-drop functionality, each item can be freely positioned, enabling users to build visual narratives, plan concepts, or simply express moods in a flexible and inspiring space.

The implementation is built with Vue and enhanced using VueUse for reactive utilities and DaisyUI for clean, consistent styling. For lightweight and efficient backend functionality, PocketBase is used as the database solution. This stack provides a fast, modern, and developer-friendly foundation that supports both creativity and performance.

Tech Stack

VUE, TAILWIND, DAISY UI, POCKETBASE

Check it out

Problems & Solutions

A key challenge in this project was making the board elements truly draggable—not just visually, but in a way that their updated positions could be accurately captured and stored in PocketBase. Synchronizing user interactions on the frontend with persistent backend data turned out to be more complex than expected, especially when dealing with reactivity and state changes in real time. The solution came through integrating VueUse, which provided powerful and flexible composables to track element positions and reactively bind them to state. This allowed for seamless updates and ensured that any changes users made through drag-and-drop were reliably saved in the database.

Instagram LogoGithub LogoLinkedIn Logo

Created by Claudia Pemmer © 2025

Imprint & Data Protection