DEV Community

loading...
Cover image for Hugo - My DOHackathon submission

Hugo - My DOHackathon submission

szhabolcs profile image Nagy Szabolcs ・2 min read

What I built

I build a website that helps you send special hugs to your loved ones! You're no longer limited by sending a gif of a hug, with Hugo you can send hugs they will actually feel!

Category Submission:

Program for the People

App Link

https://hugo-ptrq2.ondigitalocean.app/

Screenshots

Mockups

Hug making pages

Hug viewing page

Description

How do you go by doing something like that? you may ask, well it's simple, haptic feedback (more specifically vibration).
You can record a hug, and send it to anyone you'd like, then all they have to do, is place their phones on their chest, and feel your special hug! And don't worry if you're on desktop, the hugs can be played with sound too!

Link to Source Code

GitHub repo

Permissive License

Apache 2.0 with Commons Clause

Background

Well being stuck at home, far away from my friends, made me use the following gif more and more:
hug gif
Then one day I stumbled upon this Hackathon and started thinking about ideas.
I knew right from the start that I wanted to do something in the second category, because helping someone, or bringing someone a smile is one of my favorite things to do!
So the idea of virtual hugs came into my mind, and I was thinking about ways I could make them better than a gif. They had to be something more than just a text on a screen.
And then I remembered the times I hugged my phone whenever someone sent me something sweet, aaand bingo! 💭

The idea of hugs you can feel came to life! 🎉

How I built it

Using the platform was really really easy!
Being a young and not that much experienced fellow in all the hosting setup stuff, starting off with App Platform was a breeze!

First of all I made the frontend using the static site component. Setting it up was easy, I just had to type in my npm script and done!
Then I added a PostgreSQL database, which worked surprisingly well with JSON data.
And finally I added a node web service component for my API.

And just like that, I connected them all and voila!
You can read more about how I built the application from this series

Additional Resources/Info

Notable resources:

  1. Tailwind tutorial by The Net Ninja
  2. Graphics from Storyset and Vecteezy
  3. Icons from Font Awesome
  4. Tone.js for audio management

Discussion (8)

pic
Editor guide
Collapse
jonathanbossenger profile image
Jonathan Bossenger

Awesome idea mate!

Collapse
szhabolcs profile image
Nagy Szabolcs Author

Thank you! 😁

Collapse
tharindadilshan profile image
Tharinda Dilshan Piyadasa

This idea is really creative. Amazing project!

Collapse
szhabolcs profile image
Nagy Szabolcs Author

Thank you! 😄

Collapse
spiritbro1 profile image
spiritbro1

need this in my life for sure also real hugs

Collapse
szhabolcs profile image
Nagy Szabolcs Author

Nothing beats real hugs, but at least you can make someone's day, as I hope I can make yours! Check out the forever hug if you didn't already!

Collapse
geobrodas profile image
Georgey

How did you deploy it I mean I did too using tailwind on the DO cloud but it's showing error 404 since yesterday and it's working fine with GitHub pages too

Collapse
szhabolcs profile image
Nagy Szabolcs Author

Basically I have a src folder, where I import Tailwind and a public folder where I generate my file.
I use PurgeCSS to minify my file size, so my build command looks like this

cross-env NODE_ENV=production npx tailwindcss build src/styles.css -o public/styles.css
Enter fullscreen mode Exit fullscreen mode

If you want to use the very same command you have to have cross-env and purgecss installed from npm.
And after building is finished, I reference the file like so:

  1. public/index.html: styles.css
  2. public/view/index.html: ../styles.css
  3. public/send/index.html: ../styles.css

It's also worth noting that as far as I know, if you have let's say your styles and html inside a folder like so:
public/view/index.html
public/view/styles.css
you can't reference the styles with simply styles.css from the html even tho they are in the same folder. It's best to have all your css and js files in the root of the folder:
Folder structure

I hope this helps, you can check out the GitHub repo if you want too, or send me a message on dev if you have any more questions.