Develop a DApp from scratch

Initiated a proposal

Before starting creating a MVP implantation, I initiated my proposal on Google Doc and discuss with my team. The proposal included the introduction/rule of our DApp, MVP and GTM strategy.

Screen Shot 2020-05-07 at 4.32.59 PM.png
If you want to learn more about our proposal please click [here]

Scrum Plan

After confirming our V1 proposal, I start putting all the things in backlog and then used this Trello board  for tracking our development progress. Basically our scrum plan was quite simple and agile.

Screen Shot 2020-05-07 at 4.31.35 PM.png

If you want to learn more about our scrum plan, click [here]

I planed to launch this DApp in 1 month, but actually I spend 2.5 months to launch the prototype.

UX Design V1

Screen Shot 2020-05-07 at 4.31.10 PM.png

After clarifying the timeline and the materials/tools we need, I start designing the game in Adobe Illustrator. I made a very simple wireframe because I am a role as UX/Frontend and PM(haha), so I basically could skip the wireframe part.

Stage 1 – Log in MetaMask

Screen Shot 2020-05-07 at 4.49.01 PM.png

The first stage in our DApp project is to integrate with MetaMask. I spend a lot of time to learn how to implement web3.js in my code base.  I also do a lot of research of how to guide users to learn more about the rules & FAQ, and then help them to understand how MetaMask works.

Screen Shot 2020-05-07 at 4.53.30 PM

This game is aim to teach those non-blockchain user to play their first DApp, so I spend a lot of time to design the FAQ & Rules page.

Screen Shot 2020-05-07 at 4.53.17 PM

I designed a interesting decentralized chat room for users to ask questions. Users could use 10 GUGU coins to message in the chat room.

Screen Shot 2020-05-07 at 4.58.59 PM.png

After logging via MetaMask, the player will be directed to player page. The page will show the player’s ETH & GUGU Coin, and then the player could choose to be a banker or a player.

Screen Shot 2020-05-07 at 4.59.17 PM.png If the player click “buy more" button then he will be directed to the MineShroomCoin page, to learn more about why should spend ETH to buy GUGU Coin and how to use it.

Screen Shot 2020-05-07 at 4.59.09 PM.png
The interesting feature of this game is that when users get GUGU Coin, they could decorate their avatar. It’s really cute!

Stage 2 – Play the game

Screen Shot 2020-05-07 at 4.59.27 PM.png

After you choose to be a player or a banker, you will be directed to a loading page, and it will show how many “blocks" you need to wait.

Screen Shot 2020-05-07 at 4.59.32 PM.png

If there’s no one want to play with you on the block, you will need to start a new game again.

banker_competitionPage

If you succeed start a game and you are banker, you will only see how much ETH you put in the pool and check the players progress.
competition_page

If you succeed start a game and you are a player, then you could check your team’s portfolio and how you could do to make more mushroom in the game. On the right side you could see what items you could buy, and also you could level up yourself to generate mushroom faster or extend your items’ time.

Stage 3 – Win or Lose

competiotion_Winner

If you win the game, you could claim your prize immediately.  You could check later in your wallet for the prize.

Competition_Loser

If you lose the game, you still could claim a “participating" prize. You could check later in your wallet for the prize.

Welcome to play my V1 prototype [here], and thanks for your patience to read the story of this project.

I also wrote a medium post about this game in Chinese. Actually I put a lot of effort in this project, and after this project I start a Journey as a Frontend engineer.  I am so grateful to build something cool and fun, and then always learn more about myself while learning/building something.