Web3 frontend
Help people to track wallets (talking about NFTs) and earn money.
- my role
Product designer / Developer - company
WBS School Diploma Project - team
1 Frontender/Designer, 2 Backenders - problem
Traders in NFTs seek to identify current trending collections and track wallets that hold these collections. - solution
Develop an easy-to-use web3 app featuring continuously updated collections and wallets side-by-side. - live link
My git
Project git
Tech discovery
Initially, we explored suitable APIs for collections and wallets to meet our requirements. We compiled a list of necessary endpoints and thoroughly investigated each one through their respective APIs, understanding how to retrieve them. Some components proved more complex than anticipated, requiring custom calculations. I then took the list of endpoints into the design process.
Brainstorming & lofi
We expanded our dashboard with additional components, adopting a broader approach. Throughout ideation phases, we experimented with adding and removing elements, considering various ideas. Ultimately, we chose to simplify interactions on the page, focusing only on the login flow and add/remove wallet functionality. This decision was intentional, recognizing the constraints of our deadline.
Developing components
With consensus on design and data requirements from different APIs, I transitioned to the frontend. I refined designs, prepared code, and built components from scratch. Meanwhile, my colleagues focused on backend development and endpoints. Maintaining consistent naming conventions and delineating frontend and backend tasks were crucial.
Making mistakes
Being on this level of development for the first time, I welcomed mistakes as learning opportunities. Indeed, errors occurred, particularly with the tracking wallet system. Consequently, we returned to the design table to overhaul its frontend and interactions.
Connecting web3 wallet and crafting logo
Integrating the MetaMask wallet into our app presented a significant task. While seemingly straightforward, we invested time in testing and ensuring its proper functionality. In parallel, we deliberated on naming for the app and logo, with me ultimately handling the logo design.
Last check-ups
A day before the deadline, we conducted a thorough status check. Results were not that optimistic, so we pointed out what is a must to have and what might be postponed after the release. Luckily we could’ve finished almost everything. However, calculating sales and sales floor on the frontend became a significant issue, only semi-resolved in the final stages of development.
Launch and great success
As we approached completion, we encountered challenges but also made significant progress. The final improvements were implemented, all branches were pushed to the main repository. We extend our gratitude to our teachers' team for their invaluable assistance. Since this project was part of our school curriculum, we participated in a competition with judges and criteria. And guess, we’ve won! 🎉 Thanks to everyone involved!
Next steps and learnings
Completing this project provided an opportunity to delve deeper into the technical aspects of product development and gain a better understanding of the daily struggles faced by developers. I became a more proficient designer equipped with technical skills. While some believe that a technical background may constrain creativity, I discovered that it often provides a sense of direction and freedom. Throughout the course, I successfully learned frontend development, including various JavaScript and CSS tricks. Although I briefly considered changing my career path during the program (since the school was amazing), I ultimately realized that a developer's role isn't exactly I was looking for. However, leveraging my coding knowledge has become one of my strengths in my career journey.
Thanks to amazing Nina and Sven for the teamwork!
