Repository

https://github.com/mktcode/the-magic-frog

About the Project

the-magic-frog.com

The Magic Frog is a Bot/Website utilizing the STEEM blockchain to reward everyone involved in a collaborative storytelling project. By submitting small pieces of text (and even images), that the community can vote on everyday, the story evolves and sometimes takes quite strange, funny or interesting turns.

The Magic Frog is currently available in English, French and German and more languages will follow!

Vuex Store

I realized that the websites became very slow with increasing length of the stories. This is because all data was fetched before serving the page, in the asyncData method of the Nuxt framework. Here's the former code: https://github.com/mktcode/the-magic-frog/blob/15ce394f223919b6a97a9c7dc14750f3fd4144c7/pages/index.vue#L270

The solution could have been to simply move all this data fetching to Vue's mounted method, so that it happens after the page has been served.

But since I learned a lot more about Vue.js in general, since the beginning of this project, I wanted to implement this new knowledge. Namely making use of Vuex, Vue's state management.
So I started with creating a Vuex store and moving the user authentication to it.

For this I also made use of my (still very simple) VueSteemconnect plugin for Vue.js.
There's a plugin file to integrate it with Nuxt.js and then it is used in the store to connect the user and fetch the account details.

To have a better separation of code I moved the getters, mutations and actions to their own respective files.

Then I started to move more and more data fetching and handling to the store.

• https://github.com/mktcode/the-magic-frog/commit/07880da67ddfe847d2e56b9809d1a42b3d74335f
• https://github.com/mktcode/the-magic-frog/commit/d1ff6773913aba048ea2563bc139325749ad68d1
• https://github.com/mktcode/the-magic-frog/commit/69966441cc1945dad0b13d21152865620826a3b5

All data is now handled by the store, making the page and component files much smaller and removing the hassle of passing global data through components, like here.

The page now loads much much quicker. Before, you had to wait up to 30 seconds, depending on the network. Now the page shows up almost immediately!

Other Fixes/Changes

First of all I want to say Thank You to @ienrikex for his awesome work on the graphics for the project. You can already see the new frog and the new pot of gold on the website. More new graphics are being made and they already look so good. Honestly, @ienrikex... THANK YOU!

Comment Length Bugfix

I noticed that for some reason someone was able to submit a comment through the website longer than the allowed 250 characters. To better prevent this to happen I added a few more checks.

https://github.com/mktcode/the-magic-frog/commit/35dfd72a759797fb05903478eaf9a9d80f47d519

Loading Animations

Since the data is now fetched after page load, I added some more loading animations to the Hall of Fame and the Archive.

https://github.com/mktcode/the-magic-frog/commit/b49dd681f7e752eee72ff52be3f5db3aafeab98e

"Read More" Bug Fix

I recently decided to show only the first 10 parts of the current story, so that you don't have to scroll endlessly to the bottom of the page to make your submission.
There was a bug in that, preventing the story to show at all, if the story still has less then 10 parts. I fixed it by making the parts to show a computed property instead of using this ugly range method in the for loop.

https://github.com/mktcode/the-magic-frog/commit/e0fbf0b7e6057d700956ddb702d0024906b607a6

Changed Env Vars For Steemconnect Login

Before, there was an env var for the SCHEME, HOST and PORT. From that, the Steemconnect redirect URL was build and the locale was fetched from the HOST's subdomain.

Now there's only a SC_REDIRECT_URL and a LOCALE env var.

https://github.com/mktcode/the-magic-frog/commit/4dc69c57cb363efa4df80619d1b4f306bb3ee53b

Next Steps

The next steps will include more visual updates, maybe a complete redesign, based on the new graphics.
There will also be more focus on promoting the project and launching more languages. I hope to launch a Russian and Chinese version soon.

Get In Touch

If you want to participate in the development or promotion of the project or if you want to be the community manager for the Russian or Chinese version (or basically any other language) of The Magic Frog, get in touch with us on our discord server: https://discord.gg/dAMca9