Assigned team number: 12

Brief biographies of all team members:

Matthew: Hi! I’m a passionate and self-driven JC1 student, currently taking the weird interested International Baccalaureate at St. Joseph’s Institution. In my free time, I enjoy drinking coffee, sleeping, and coding (not stereotypical). I’m currently learning Web3 and Cyber Security, and look forward to joining more hackathons in the near future.

Isabel: Hi, I am currently going to Year 2 of my degree in Data Science and Business Analytics with UOL! Besides learning different types of code and data analytics tools in my free time, I am usually found with a book in hand.

Rohith: Hello! I am also entering Year 2 of my degree in Data Science and Business Analytics at SIM UOL! I enjoy cycling long distances and catching up on missed tv shows in my free time. I aspire to bridge the gap between finance and technology in the future!

Choon Hup: Hello! I am transiting to Year 2 in SIM-UOL Data Science and Business Analytics. I enjoy listening to all music genres since music helps to stir emotions and memories that are relatable at the point of time. Aside from that I love to learn new things especially areas that link to Fintech and Big Data!

Zhan Foong: Hello, I am now going into my Year 2 of my degree in Data Science and Business Analytics in SIM UOL! I enjoy playing computer games and I enjoy learning new things and exploring the world. I am looking forward to learning more computing language and writing codes to help increase my knowledge on Data Science.

Chosen Problem statement:

Statement 1: Design and develop a decentralized app (dApp) that is targeted towards onboarding the next billion users into Web3 (not limited to a game).

Short abstract of the project

Blockchain. Web3. Crypto. Nowadays, these technologies are increasingly associated with unwarranted skepticism, thanks in part to the overwhelming amount of information and jargon available online. Our group believes that eliminating this friction will be key for user onboarding, and the future use of Web3 technologies.

As such, our project, BuildingBlock, aims to provide a means to build user confidence through deepened understandings of the terminology and basics of blockchain technologies, through the distillation and enhancements in the communication of relevant information. For example, our application places an emphasis on interactivity, through our hands-on quizzes, which awards users with freshly minted ERC-20 tokens (see below), and copyable code blocks. Our application also provides a means of frictionless communication with the Blockchain, through the use of the Binance Testnet, and Metamask, and our token, FlowerCoin (FC) https://testnet.bscscan.com/address/0xB9b9672B538C73d0DB061D08CEE4031044ff0553. This direct interaction addresses many potential prejudices of the users (i.e. blockchain is hard to use, insecure, unreliable), will thus motivate users to take their first (baby) steps into the promising world of Web3.

Development tools used to build the project

-VSCode for code editing -Heroku to deploy the backend -Nodemon for live updates -Sass for writing CSS.

APIs used in the project

N/A

Assets used in the project

-Placeholder images from Unsplash were used. -Font Awesome Icons were used. -Bootstrap components.

Libraries used in the project -Truffle and Solidity for smart contract testing and deployment -Custom-built Express.js + Node.js backend / RESTful API -Ethers.js, Web3 and Metamask for communication with the blockchain, and user authentication

Frontend:

React.js w/ React Router

Any components not created at the hackathon

N/A

Content

Level 1 Introduction to Web3.0 Aim of this lesson: learning the evolution of Web, relevance and drawbacks, misconceptions of Web3.0

Level 2 Using Crypto Wallet Aim of this lesson: learning about crypto wallets and its functions, how to get and use a crypto wallet

Level 3 Ether.js and Node.js Aim of this lesson: understanding how ether.js and node.js works

Level 4 Introduction and writing smart contracts Aim of this lesson: learning about smart contracts, learn about decentralized apps, advantages and disadvantages of dApps and how to write smart contract

Level 5 Deployment Of Smart Contract (Coming Soon)

Level 6 How to mint NFT/Cryptocurrency (Coming Soon)

Inspiration

Following the recent crash in cryptocurrencies, and an atmosphere of skepticism surrounding blockchain technologies, many people are extremely apprehensive in their adopted of related technologies, such as NFTs, and most importantly, Web3.

Through an unconventional tutorial, we hope to tackle the three main points of friction with adoption:

  1. The use of complex jargon and buzzwords, which often intimidate new users.
  2. The barrier to adoption, due to the implied costs and complexity of cryptocurrencies
  3. The lack of understanding of the underlying infrastructure, results in Web3 misconceptions

We aspire to remove their doubts and concerns by providing a platform for them to learn about web3 from A to Z.

What it does

To accomplish this, our application takes a three pronged approach:

1. Simplify

Our regularly updated tutorials (aka levels) place renewed emphasis on the use of the Feynman technique, through simplified, easy-to-understand and intuitive explanations. This is also the motivation behind our design theme, which places emphasis on simplicity and minimalism.

2. Interact

Our application employs a hint of gamification, through the use of interleaved, interactive quizzes, where users receive our own ERC-20 token, FlowerCoin (FC), as a reward. This hands-on experience will be complemented through direct interactions with the blockchain, through the use of Solidity, Metamask, and ethers.js. While this brings its own set of obstacles, our use of copyable code blocks will motivate and guide users through every step of the process. In the future, we also hope to provide certificates of accomplishment for those who have completed the full course.

3. Ease

Our application uses a testnet to provide users with an experience with no upfront costs, eliminating the associated monetary risk with most cryptocurrencies. Our application also integrates Metamask to allow for direct interaction with the blockchain with relative ease.

How we built it

Our application used a MERN tech stack, with:

  • Metamask
  • Express.js
  • React.js
  • Node.js

Challenges we ran into

While working on the project, most of us had no background in web development and were eager to take on this challenge to learn something new. However, initially this lack of knowledge stunted our progress. Furthermore, coming up with an innovative approach to the statement problem of onboarding users to web3 was difficult as we have to consider the difference in proficiency of the users. While discussing ideas to make our Dapp more appealing, we had faced the problem of contrasting views and overflowing ideas on how to incentivize users to use our Dapp to learn more about blockchain versus other websites and apps.

Accomplishments that we're proud of

Although we had a time constraint due to many members of our group having more hectic schedules, where some of us are working and others are studying, we had managed to overcome our limitations in terms of knowledge and time by actively seeking out help from each other and using our own time to learn more about the backend and frontend of web development. We also did so by setting deadlines and forcing ourselves to step out of our comfort zone to stay overnight and managing time efficiently to ensure set deadlines are met. In the end, we managed to complete our project ahead of schedule, and were able to write clean code with these novel libraries, and create a design we are proud of.

What we learned

During our time working on this hackathon, we have learnt more on the process of building a website, both backend and frontend. In addition, as we are creating an onboarding process for new users, we went above and beyond through our understanding of key terms, and the concepts surrounding blockchain and web3. On the technical side, some of those focusing on frontend and backend learned Solidity, Truffle and React for the first time, and web3 libraries (i.e. Metamask, ethers.js, Web3.js) were new to us all.

What's next for BuildingBlock

Working on this project, especially with people from varying backgrounds and experiences, has certainly allowed us to gel together as a unit. Building on this, we aim to take part in more hackathons in the future to not only hone our skills, but to gain more exposure and experiences and to also prove ourselves. In addition to that, we also plan on furthering our skills and knowledge in the time being and also aim to individually specialize in at least one aspect.

We also hope to refine our product through the feedback achieved during the judging phase, potentially developing it into a production-ready project, which we could cultivate in a startup.## Inspiration

Seeing how several people nowadays are apprehensive towards adopting new technologies and discoveries such as cryptocurrency and NFTs due to its nature has also made them to think of blockchain and web3 as such. We aspire to remove their doubts and concerns by providing a platform for them to learn about web3 from A to Z.

Built With

Share this project:

Updates