Inspiration
The inspiration for this web application was the very first moment of the opening ceremony. What had happened at the ceremony was a scavenger hunt on the Wafflehacks website where we, the attendees/participants, savage for clues in their cozy/chill theme website. As I start to get my brain thinking and trying to solve the clues, I got the time to check out the tracks for this hackathon. What caught my interest was the art & music track because I was listening to the website's playlist while solving/looking for clues. I also stop by the sponsor's page and took a look at digital ocean. This was the sign for me to create a web app that is deployed from a cloud service provider. However, I wanted to follow the theme of cozy and the track, art & music, which led me to come up with Inuchi.
What it does
Inuchi is a front-end web application created by React. This website allows its user to listen to chill music and draw doodles on one website.
How I built it
This website is built entirely by React. I created separate components for the Canvas and Music Player that utilizes React Hooks for them to work. The canvas is mainly created using HTML5 canvas and the useRef Hook. The music player, on the other hand, was created by Digital Ocean Spaces, as well as, HTML5 canvas. The components of this website were heavenly created by React Hooks.
Challenges I ran into
Over the past 48 hours, I encountered a variety of different issues. I had a difficult time figuring out how to use the Ref Hook, which was entirely new to me. Another challenge was learning the HTML5 canvas element. However, the biggest challenge I faced in this hackathon was deploying a website in a cloud service provider. As that was my first experience, I ran through a lot of trial and error. I even had a major setback where I had to restart my project entirely due to the frustration of trying to deploy a website. Nevertheless, I came through this obstacle and managed to deploy my very first website on a CSP. I am also grateful for how Digital Ocean's UI is really easy to navigate. It helped me a lot.
Accomplishments that I'm proud of
I am proud of the fact that I managed to create a working deployed website, despite the fact that I was by myself working solo in this hackathon. I learned so much during the past 48 hours, especially through the different workshops, the countless reading, and binge-watching tutorials of React Hooks. Although nothing can compare to the enjoyment I felt as I learned how to deploy a website using Digital Ocean. In the past few hackathons, I never got the gist of how to deploy a website using a CSP, but I overcame it and can now say that I know-how. (Well only for Digital Cloud, for now)
What I learned
Prior to this hackathon, I had no clue or idea of what to do for my project. I had many setbacks, and countless times of frustration, however, I managed to pull through those challenges. What I learn from this hackathon is to keep going. Even though the many obstacles a person can face or the countless self-doubt that comes by ever so often. Nevertheless, I learned a lot. I learned new skills such as useRef Hook from React, Digital Cloud, and a bit more of Git.
What's next for Inuchi
My very vision of Inuchi was for users to fully interact with the website. One way to do this was for users to send their doodles to friends or family members. This could improve the dynamics of the website to a whole extent. Another implementation I could create in the future is for users to create a different playlist to match their mood in what they are doodling. Overall, they are a huge amount of potential for Inuchi for their users to connect with one another through doodles as well as connect themselves with music.
Log in or sign up for Devpost to join the conversation.