DEV Community

Simion Alex
Simion Alex

Posted on

Vboard - visual solution for goal setting

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.

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up