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
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
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:
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:
- Tailwind tutorial by The Net Ninja
- Graphics from Storyset and Vecteezy
- Icons from Font Awesome
- Tone.js for audio management
Top comments (8)
Awesome idea mate!
Thank you! 😁
This idea is really creative. Amazing project!
Thank you! 😄
need this in my life for sure also real hugs
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!
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
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
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:
styles.css../styles.css../styles.cssIt'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.cssfrom 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: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.