DEV Community

loading...

Vboard - visual solution for goal setting

alexxozo profile image Simion Alex ・2 min read

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
Alt Text
Alt Text
Alt Text
Alt Text

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://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

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.

Discussion (0)

pic
Editor guide