DEV Community: Nagy Szabolcs

Hugo - My DOHackathon submission

Nagy Szabolcs — Fri, 08 Jan 2021 19:53:22 +0000

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:

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

Hugo - sending hugs you really feel - Finishing touches

Nagy Szabolcs — Fri, 08 Jan 2021 19:51:53 +0000

So here we are, as of writing this post, I finally finished my submission. 🎉

The past posts have all been written today, because I did not have time to write them in the past. But I hope you enjoyed them nevertheless!

So here are some things I've been working on!

Issue nr.1 WebKit doesn't support the vibration API 📵

Well this is a bummer.
This really upset me the first time I read about it, but it didn't stop me from finding a workaround.
As you could see in the mockups there is a little checkbox saying "play sound instead of vibrating".

I initially intended to have this feature only available for desktops where vibration is not possible, but in the end I decided it should be available on all devices.
I also placed a warning each time an unsupported browser is being used.

Issue nr.2 People can't find the hug making page from the view page 🔎

I sent hugs to some of my friends, to test out if everything worked fine. Turns out, they couldn't figure out how to send a new hug, because there wasn't any indication of how to get to that page.
This was of course all my mistake, but I fixed it by placing buttons on the view page.

And just like that, you can get to the maker from every page, so I hope the number of sent hugs will increase. 🤗

Aaand the end. Or is it? 🤔

The application is available from here and I think even if I buy a domain for it, or change hosting, I will still keep this link active.

As of what comes after this, I don't know. I want to see what the reaction of the public is, because I think this has potential. This is my first project that actually more people could use, so I'm really excited to see how this turns out.

If you like the idea, the execution, or you just want to help me get my first app out there, go on and send a hug!

It's free, it's cute, and your loved ones will surely love it! ❤

P.S. As I did in my other posts, here is another hug, this time it's made with Hugo, and it never expires 💕
https://hugo-ptrq2.ondigitalocean.app/view?id=every1

Hugo - sending hugs you really feel - The backend

Nagy Szabolcs — Fri, 08 Jan 2021 19:51:42 +0000

The API 🤖

For the backend, I decided to go with a Node and Express combination.
My idea is to have 3 endpoints

Endpoint	Behavior
GET api/:id	responds with the given hug's data
POST api/?pattern={}&name=""	adds a new hug to the database
POST api/:id	increments the number of plays in the database

and to make calls from the HTML page to these.

Coding the backend was pretty straightforward because I worked with this kind of environment before.
The one issue I ran into multiple times tho was to do with CORS when connecting to the api from localhost. This time the api was on the DigitalOcean servers so I expected to encounter some issues.
I fixed these by adding this regex rule in the DigitalOcean panel .* which basically enables every source.

The database 🛢

I initially wanted to use a NoSQL database, but since I was running out of time quickly, I decided to go with PostgreSQL because that was the only option on the app platform.

I worked with SQL databases before, but one new thing I learned about was the JSONB Datatype. Turns out, you can conveniently store JSON data in traditional SQL databases. 😅
At first, I actually tried using JSON instead, but since I saved my patterns in a JSON array it couldn't be done.

Final thoughts 💭

Overall I managed to finish everything in a day or so!

Oh and, I haven't told you about the JavaScript behind the websites. Honestly they are pretty boring, just getting states from buttons and API calls, nothing fancy.

Anyways take care, and have a hug! 👻

Hugo - sending hugs you really feel - The frontend

Nagy Szabolcs — Fri, 08 Jan 2021 19:51:17 +0000

The mockup ✏

After writing down the initial ideas, I started making the mockups in Adobe XD.
First I made my mood board using Dribbble, and looked at some fonts from FontPair. I've also searched for some free graphics and found just the right ones on Storyset.
Here are the final mockups

Making the page 💻

First I set up Tailwind, following the instructions from the official documentation, and everything went smoothly!
Then I set up my custom theme by following the tutorial mentioned in the last post.

theme: {
    extend: {
      colors:{
        background: "#FF979E",
        primary: "#162A40",
        secondary: "#FFFFFF"
      },
      fontFamily:{
        header: ["Pacifico","cursive"],
        body: ["Cabin", "sans-serif"]
      }
    },
  }

And just like that I was ready to start making the webpage.

At first things seemed a bit out of hand, having really long class names like

class="block rounded-full bg-primary text-secondary px-10 py-2 text-base"

But then I remembered I can compress it down to a single class using the @apply directive just like this

.btn{
    @apply block rounded-full bg-primary text-secondary px-10 py-2 text-base;
}

Neat!

The layout is made using CSS grids, which I always found to be a bit complicated but Tailwind really made them simple with classes like grid-cols-1.
Making the whole page responsive was a breeze thanks to the responsive breakpoints, namely sm: md: lg: and so on.
So my responsiveness is driven solely by

class="grid grid-cols-1 md:grid-cols-2"

also very neat!

But there was one problem 🤯

The Tailwind stylesheet was hugee!
I knew I couldn't let this be that big in production, so I started searching again.

It turns out, I haven't read the documentation well enough, and I missed a crucial step: optimizing for production.

I quickly set up PurgeCSS as mentioned, making sure to include a safelist. This is to make sure my dynamically created classes get added to the final file as well.
So my tailwind config file needed the following lines

  purge: {
    content: ['./public/**/*.html'],
    options: {
      safelist: ["grid-cols-3","animate-ping"]
    }
  }

One last command later, everything worked and I can finally call it a day! 🎉

P.S. Take care, here's another hug! 👻

Hugo - sending hugs you really feel - First ideas

Nagy Szabolcs — Fri, 08 Jan 2021 19:50:59 +0000

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.

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.

🧠 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! 👻