Let’s build a Web3 Portfolio Management together from end-to-end with NestJS, NextJS, and Ankr: Part I — Overview.

Screenshot from this post

Hey there, fellow builders! 👋 I’m Dr. Pham, a tech enthusiast holding a PhD in AI, Mathematics, and Blockchain. Today marks a special occasion — it’s my first foray into the world of sharing knowledge through the written word, and I couldn’t be more thrilled.

As a firm believer in the philosophy that sharing is a form of learning, I’ve decided to kick off this series by delving into the creation of a Web3 Portfolio Management system. Why, you ask? Well, let’s talk portfolios — those digital diaries of our decentralized endeavors. We’ve seen the likes of Nansen, Zerion, and Klarda doing wonders, but why not craft one uniquely tailored to our needs?

This series isn’t just about code; it’s about demystifying the process, learning together, and contributing to the ever-evolving web3 community. So, buckle up as we unravel the intricacies of NestJS and NextJS, laying the groundwork for our bespoke Web3 portfolio.

Enough words! Stick around; this is going to be a long series worth your time. Therefore, I will split the series into three parts as: Overview, Backend, and Frontend. Stay tuned!

Table of contents for this article

1. How the Products Look
2. Prerequisites
3. Why Choose NestJS and NextJS Frameworks?
4. Web3 Node/API Services
5. Cloud services for Back-end and Front-end deployment

I. How the Products Look

Products unstructured UI and list of features

The web-based product is designed for efficient web3 portfolio management. Here is a simple version I've deployed for demonstration https://crypto-portfolio-management-tqdpham.netlify.app, featuring:

1. Market Summary: Aggregates key market metrics like total active coins, market cap, 24h volume, DeFi TVL, 24h trading, and BTC dominance percentage.
2. Balance and Daily PnL Chart: Visualizes your balance and daily Profit and Loss (PnL) per day, empowering you to monitor and optimize your portfolio performance.
3. Balance Distribution: Offers a quick overview of your portfolio diversity, including current balance, year-over-year change, and the ratio of native and ERC-20 tokens.
4. Transaction Count: Summarizes your wallet transactions, providing a snapshot of your overall activity.
5. Latest Token Transfers: Keeps you informed with the latest token transfers within your wallet.
6. Token Holding: Details all token holdings, showcasing balance amounts, related values, and current token prices.
7. NFT Holding: Similar to token holding, this feature highlights your top NFTs in the wallet.

Here we have it — the lineup of features we’ll construct together in this series. While they may be considered basic, they form a solid foundation for venturing into Web3 development. Feel free to infuse your own style and expand upon these features as you see fit! 😊

II. Prerequisites

To get the content of this series, a basic understanding of full-stack engineering and blockchain is beneficial. However, worry not; you can still deploy the product easily as I’ve structured the code in a user-friendly manner. Specifically, the following technologies are essential for building the product from scratch.

1. NestJS: Backend framework for theproduct.
2. NextJS: Frontend framework for the product.
3. Ankr: Blockchain node and API services for the product.
4. Coingecko API: Global market changes.

III. Why Choose NestJS and NextJS frameworks for Web3 Product?

Screenshot from this post.

Choosing the right frameworks for the backend and frontend of a Web3 product depends on various factors, including your project requirements, team expertise, and the specific features you want to implement. As per my knowledge, I normally use NestJS (Backend) and NextJS (Frontend) for my products for the following reasons:

1. NestJS (Backend): Modular architecture, Reusable and testable modules, Easy testing, Built-in support for common protocols, TypeScript supports.
2. NextJS (Frontend): Serverless functioning, SEO benefits, Well structured, Higher flexibility and customization.

In a nutshell, it highlights the advantages of these two frameworks for software development. While you can delve into more comprehensive details online, it’s worth noting that, especially in the realm of Web3 products, flexibility is paramount. Given the dynamic nature of Web3, where functionalities can be diverse, NestJS and NextJS emerge as particularly well-suited frameworks for crafting innovative and adaptable solutions.

IV. Web3 Node/API Services

In the realm of Web3 product development, establishing a reliable connection to a blockchain node for data retrieval is a must. With an array of web node/API services available — such as Ankr Node, Moralis, Quicknode, and more — making the right choice can be challenging. Drawing from my early days navigating the Web3 landscape, I, too, faced the challenge of selecting the ideal Web3 service. After experimenting with various projects, I discovered my go-to best friend 😊— Ankr Node. It has proven to be a steadfast ally in my Web3 endeavors for the following reasons.

Screenshot from this post

1. Proven by various big-name in the field, such as, Messari, Binance, Wormhole, etc.
2. Legitimate partner, including Google and Microsoft.
3. Provide a specifically-tailored collection of JSON-RPC API endpoints built to support the most popular Web3 scenarios on multiple chains at almost instant speeds.
4. Robust support and a user-friendly administrator UI for monitoring node performance.
5. Cost-effective pricing model with a pay-as-you-go approach.

Indeed, the third advantage resonates the most. It’s a lifesaver, sparing us the complexities of decoding raw data techniques that are pivotal for the products. But, working with decoding raw data is also fun. I will have another series tackle this problem.

V. Cloud services for Back-end and Front-end deployment

Now, let’s talk about hosting our backend and frontend code in the cloud. With the development of cloud services available today, from industry giants like Google and AWS to newer players such as Vercel and Cyclic Cloud, the options are diverse and generally effective for various scenarios. The deployment flow tends to be quite similar across these platforms.

For the demonstration of our Web3 product, simplicity is key. I’ve opted for a Free-to-use hosting service to ensure everyone can easily test the deployment. Specifically, here’s the one I’ve chosen.

1. Backend: Cyclic Cloud
2. Frontend: Netlify

In addition, you are free to use other cloud services that you may already have.

Thanks for joining me in this series of building a Web3 Portfolio Management system with NestJS and NextJS. We’ve covered the overview, laying the groundwork for an exciting journey ahead.

In the upcoming article, we’ll dive deep into the backend development, where lines of code will bring our product to life. Brace yourself for a coding adventure that will shape the core of our Web3 solution.

Stay tuned for the next installment, and feel free to share your thoughts and feedback. Your input is invaluable as we embark on this coding odyssey together.

Until then, happy coding and happy new year! 🚀