DEV Community

loading...
Cover image for Hugo - sending hugs you really feel - First ideas

Hugo - sending hugs you really feel - First ideas

szhabolcs profile image Nagy Szabolcs ・2 min read

If you ever wanted to send someone a hug online, you most likely have come across this gif. It's a cute and kind way of sending some love, but it lacks the feel part of a hug.
hug gif

This is where Hugo comes in place!

The idea behind it, is sending a hug that you can really feel.
How? you may ask, well it's simple, haptic feedback (more specifically vibration).
You can record a hug, and send it to your loved ones, then all they have to do, is place their phones on their chest, and feel your special hug! 😄

Well, let's get started! 🚀

First of all, I started my project on paper, sketching and writing down ideas.
sketch of the design
🧠 I came up with an editor that's made out of toggleable boxes, each representing a step. These can be either a pause o or a vibration ~, and they also add up, meaning if you have the following pattern:
~ ~ o ~ ~ ~ the phone will vibrate for 2 seconds, pause for 1 then vibrate for 3 more.

🛠 I did not want to overcomplicate the layout, so it's really simple, being one column on mobile, and two on desktop.
Also, I usually build websites using Bootstrap, but I thought it would be overkill for this project, so I started looking for alternatives.

🌟 Somehow Tailwind popped up in my YouTube recommended, and I thought I'd give it a try. After watching this series by The Net Ninja I decided it would be fun to try it out! (I really encourage you to check out his videos if you're interested, they're great!)

Woho! you made it to the end!

This is my first ever post in here, so any kind of feedback is appreciated, take care, here's a hug! 👻
hug gif

Discussion (0)

pic
Editor guide