I was inspired by one of the best websites in the internet with funny content: 9gag.com. My goal was to build similar but decentralised web application on Blockstack with the following improvements: simpler interface, no ads, open-source code, better ranking mechanisms. Also I wanted to implement additional AI features (I call it "live emotions"), so users can enable access to their camera and AI algorithm recognise their emotions, calculating time of having fun on the website and liking (it is configurable) posts simply by smiling.
The unique point of the product I've created is that people can share their real emotions, so the posts ranking will be much more honest and real. I intentionally didn't implement standard like/dislike mechanisms to make fake liking and fake promoting more difficult :)
Also, I just wanted to learn how to implement AI algorithms that don't require any servers and can work directly in users' browsers without sending data anywhere. I think AI is cool, but there are not to many websites that offer this technology to users (and even less websites that do it in a secure way), so I decided to make one :)
What it does
It is a dApp built with Vue.js. It serves free and categorised fun. Every user can see or post funny images on the BlockGAG. Every posted image is saved to user's Gaia storage without encryption, link to the image with some additional information (date, title, tags, categories....) is saved to Radiks and is publicly accessible. It also can analyse your emotions through webcam (of course if you give access), calculating the time of having fun on the website (this information is private) and liking posts simply by smiling (it's also private by default, but you can make it public in settings)
How I built it
I have used Vue.js, Blockstack.js (For authentication and file storage), Radiks (for real-time and public database that could be easily integrated with Blockstack), faceapi.js (for client-side emotions analyser) and Material Design For Web (to make nice customisable design much faster and easier), WebRTC protocol (for being able to work with users web camera from web-browser layer)
Challenges I ran into
There were a lot of challenges, I will describe only the biggest ones:
- I wanted to create public source of information (with link to images). This problem was solved by using radiks.
- I wanted to make my app usable even for not signed in users. I've solved this problem by using localStorage and automated data syncing for authenticated users with their special private files on Gaia storage.
- Sharing posts (problem with OG meta-tags, OG can't be set with JS, because Facebook and Pinterest analyse static files and don't run JS on shared pages). I've not solved this problem, but I've created the solution idea. For every post I also can generate Html file with the special OG tags and also save it to Gaia storage. Then I can use the link to this html file for sharing posts to Facebook and Pinterest.
Accomplishments that I'm proud of
I am proud that the app is completed, ready to use and that every person (who saw it) said that they like it (even my mom: It's the first my app she likes :-) ). I am also proud of the app design.
What I learned
I learned a lot about ML, WebRTC, and Radiks. I've already had some experience with Blockstack and Gaia so this part was quite easy for me. I also learned how to use IntersectionObserver for being able to get current visible element (funny post) programmatically.
What's next for Blockgag
Get users' feedback, improve the app based on their feedback. . Add comments mechanism, implement sharing to facebook and pinterest, implement page to manage users posts. I'll think more about bounties for adding new posts to the website and generally about the app promotion. Also, I would like to implement push- and email- notifications to increase users retention. Also, currently likes are private, I will implement settings, where people can make their reactions (like likes) public.