Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 8, 2021 07:53 pm GMT

Hugo - My DOHackathon submission

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

Original Link: https://dev.to/szhabolcs/hugo-my-dohackathon-submission-1aj6

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To