Next.js + tRPC: Best practices for dApp development. Issuing new Assets + Freighter Wallet integration

Jose Carlos Toscano - Aug 19 - - Dev Community

This is a submission for the Build Better on Stellar: Smart Contract Challenge : Create a Tutorial

Your Tutorial


Create T3 App

This is a T3 Stack project bootstrapped with create-t3-app.

What's next? How do I make an app with this?

We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary.

If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our Discord and ask for help.

Learn More

To learn more about the T3 Stack, take a look at the following resources:

You can check out the create-t3-app GitHub repository — your feedback and contributions are welcome!

How do I deploy this?

Follow our deployment guides for Vercel

By the end of the tutorial we should be able to mint new assets through our dApp by signing transactions with the Freighter Wallet Browser Extension:

Screenshot from turotial

You may be wondering why I chose that as my cover image. It’s actually the randomly generated image I created for my tutorial, representing art pieces as Stellar assets. I thought it would be fitting to use it here as well

What I Created

My submission is a comprehensive tutorial that guides developers through building a decentralized application (dApp) using Stellar's API and Freighter's web wallet, while promoting best practices in software development. The tutorial covers essential concepts such as issuer and distributor accounts, the asset minting process, and Trustlines, providing detailed explanations to ensure a deep understanding. I also emphasized secure management of environment variables and encapsulated wallet integration in a custom useWallet hook to promote modularity and reusability. By using modern tools like create-t3-app, Vercel's v0, and Shadcn's components, the tutorial helps developers efficiently build secure and scalable applications, with best practices and core Stellar functionalities at the forefront.

In the tutorial, I aimed to leverage all the tools available to us as developers, from quick component development and image generation to powerful frameworks for rapidly getting an app up and running. My goal was to demonstrate how seamlessly web development can integrate and incorporate these new advancements, including those in decentralized applications.

Journey

I became deeply involved in building a dApp on that used the Stellar and Soroban Smart Contracts. Before diving into development, I first had to familiarize myself with the essential concepts, terminology, and challenges associated with Stellar's technologies. It was challenging at the beginning, with a steep learning curve, but once I grasped the core concepts, I found myself thriving in the development process.

After completing and submitting my app, I realized just how much I had learned. This newfound understanding and excitement made me eager to share my knowledge with others. I wanted to create a straightforward, easy-to-follow tutorial that highlights the exact steps I took—something I wish I had when I was starting out. This tutorial is designed to save developers hours, if not days, of deep research and trial-and-error by providing a clear path through the complexities of Stellar and Freighter Wallet integration. I would have loved to inclued a section to showcase the use of Soroban Smart Contracts, but I just didn't have enough time to cover it.

I’m particularly proud of how I managed to distill these complex ideas into accessible content, making it easier for others to get started with Stellar. What I hope to do next is continue building on this foundation, further explore the possibilities within Stellar’s ecosystem, and create more educational resources to help others navigate and thrive in this space.

Take a look at my submission if you haven't yet:

. . .