Vboard - visual solution for goal setting
Tags: dohackathon, dreamboard, visionboard, goals
Published: 2021-01-09 15:31:08

---
title: Vboard - visual solution for goal setting
published: true
description: My submission to the DigitalOcean App Platform Hackathon!
tags: dohackathon, dreamboard, visionboard, goals
---

## What I built
A web app that can be use to create a dreamboard, a collage that reminds you of goals with the help of representative images.

### Category Submission: 
Random Roulette

### App Link
https://dreamboard-do-igqyl.ondigitalocean.app

### Screenshots
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bi8vhdz5n9gec1y0992p.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jnn96cz9xbu419iekc45.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/itryjk18ymqmvn5tgjst.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0vxljk7u80lnv3m7hlbe.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/td3q99tiz7nfyy74lie0.png)

### Description
Setting goals and milestones is a great practice, unfortunately more often then not we get so caught up in our day-to-day activities we forget our main vision. It turns out putting your goals on paper in a visual format can actually help you achieve them. It takes literally around 5 minutes but it can really have an impact on your day to day decisions.

### Link to Source Code
https://github.com/alexxozo/dreamboard-do

### Permissive License
Apache License Version 2.0, January 2004

## Background
I was scrolling twitter one day and I saw this post

 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jt9bh3r3xxrmuv9668db.png)(https://twitter.com/florinpop1705/status/1343458330535206913)

I never heard about a dreamboard before but I was intrigued. I usually set up some goals at the start of the year and try to refresh the list throughout the year. Sometimes I stick to them, sometimes not, but I feel good that I least have a direction and that's extremely important for me. 

Ok but how do I create a visual representation of my goals? I started searching google, no instant response. I went back in the tweet comments hoping that I'll find there the tool used by Florin to make it.
I found this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4b4qn368t4hf1gtlg71l.png)

Ok so the current solution is to use some kind of app for editing photos, canva, figma, photoshop etc.

Can there be a easy way for people that don't know or don't want to use those?

The rest is history...😂

That's how I started working on it 🤩🤩

### How I built it 
The app core functionalities was build in around 2 days using Konva JS for the canvas rendering of the images and Unsplash API for the searching functionality. I integrated all of these in a VueJS app that uses vuetify for the visual components. It's not using different components and best practices but I wanted to get a prototype out there as quickly as possible, then I can improve on the codebase as much as I want.

DigitalOcean's App Platform was pretty simple to use, almost plug and play. I selected my repo, set up the api key for unsplash in the env variables. Also I added .do folder as in the example vuejs app from DigitalOcean docs.