Dreamboard

Landing Page
Dreamboard Maker
Sample Dreamboard

Inspiration

New Years Resolutions can feel like a chore, and many people skip out on them for this reason. We wanted to put a creative twist on setting resolutions to make it more appealing.

We've heard of the benefits of vision boards and decided to design an app around that. They're a great method for setting goals, and by enabling users to make them digitally, it's easy and accessible for everyone.

What it does

The app is a vision board creator. The vision board page has a menu with options, and a customizable canvas. Users can modify the background color and pattern, and add card or sticker elements. These can be clicked and dragged around the board.

Cards are styled like Polaroids, with an image and a caption. Users can upload their own images, or select from a library. We tried to offer images that were aligned with common resolution goals (Health and Fitness, Hobbies, Volunteering, etc.)

When users are happy with their creation, they can download the board and save it as a .png file.

How we built it

HTML, CSS, JQuery and JavaScript with many libraries to help with functions and modal elements. Vercel was used for hosting, and Figma for UI design.

Challenges we ran into

We wanted to make the cards resizable, but it was tricky as clicking on the cards activates the drag functionality and we couldn't get consistent behavior. This was removed from the project plan.

We also wanted to allow users to add text elements to the board, but ran out of time.

Accomplishments that we're proud of

An incredible front end design and a unique idea for an app that can help users plan their New Years goals.

What we learned

This was our first time using a JavaScript animation library and hosting with Vercel. It was also good practice incorporating popular UI elements such as modals and toast messages into the user flow.