About the Project
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!
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.
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!
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.
Since the data is now fetched after page load, I added some more loading animations to the Hall of Fame and the Archive.
"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.
Changed Env Vars For Steemconnect Login
Before, there was an env var for the
PORT. From that, the Steemconnect redirect URL was build and the locale was fetched from the
Now there's only a
SC_REDIRECT_URL and a
LOCALE env var.
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