Develop a DApp from scratch

Initiated a proposal

Before starting creating an MVP implementation, I initiated my proposal on Google Doc and discussed it with my team. The proposal included the introduction/rule of our DApp, MVP, and GTM strategy.

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 the backlog and then used this Trello board for tracking our development progress. Basically our scrum plan was quite simple and agile.

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

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

 

Screen Shot 2020-05-07 at 4.33.22 PM
Document
Screen Shot 2020-05-07 at 4.31.35 PM
Feature Tracking

UX Design V1

After clarifying the timeline and the materials/tools we need, I started 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 skipped the wireframe part.

Screen Shot 2020-05-07 at 4.31.10 PM
Design V1

 

Stage 1 – Log in MetaMask

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

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

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

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.

If the player clicks “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.

The interesting feature of this game is that when users get GUGU Coin, they could decorate their avatar. It’s really cute!

Screen Shot 2020-05-07 at 4.49.01 PM
Landing Page
Screen Shot 2020-05-07 at 4.58.59 PM
Account Page
Screen Shot 2020-05-07 at 4.59.17 PM
Mushroom Coin Page
Screen Shot 2020-05-07 at 4.59.09 PM
Shroom Mall Page

Stage 2 – Play the game

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.

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

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

If you successfully 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.

Screen Shot 2020-05-07 at 4.53.30 PM
FAQ Page
Screen Shot 2020-05-07 at 4.53.17 PM
Decentralized chat room
Screen Shot 2020-05-07 at 4.59.27 PM
Waiting Page
Screen Shot 2020-05-07 at 4.59.32 PM
404 Page

competition_page
Game Page

 

banker_competitionPage
Game Page
Screen Shot 2019-04-29 at 10.56.46 PM
Latest Game Page

Stage 3 – Win or Lose

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

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 into 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.

competiotion_Winner
Winner Page
Competition_Loser
Loser Page