Logo

dev-resources.site

for different kinds of informations.

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

Published at
8/19/2024
Categories
devchallenge
stellarchallenge
blockchain
web3
Author
josectoscano
Author
12 person written this
josectoscano
open
Next.js + tRPC: Best practices for dApp development. Issuing new Assets + Freighter Wallet integration

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:

stellarchallenge Article's
30 articles in total
Favicon
Stellar (XLM) Price Predictions,2025 to 2030
Favicon
🚀 FASTBUKA: Transforming Food Delivery in Nigeria!
Favicon
Yes, I'm in
Favicon
Stellar Wallet
Favicon
ASAWAVE TUTORIAL ON STELLAR
Favicon
Step-by-Step Guide to Perform a Token Swap on Soroswap.Finance
Favicon
Dev challenge
Favicon
Deuces9ersgold
Favicon
Startup on the Stellar network
Favicon
Stellar Wallet For Indian Audience With Soroban Integration For Coupon Distribution
Favicon
kosmos
Favicon
Congrats to the Build Better on Stellar: Smart Contract Challenge Winners!
Favicon
Blue
Favicon
HelpChain: Securely Empowering Change with Stellar Blockchain, Transparent Donations, and Carbon Offset NFTs
Favicon
Navigating the crowd funding smart contract workflow in an open financial network - stellar
Favicon
Decentralized Wallet dApp for Stellar Blockchain
Favicon
Pay Picker: Fun way to decide who's paying | #BuildBetterOnStellar
Favicon
Silicore -- Dev.to's Smart Contract Challenge
Favicon
Non-Custodial Smart Wallet dApp
Favicon
Step-by-Step Guide to Creating a Donations dApp with Stellar SDK
Favicon
Soroban by Example
Favicon
Entry•X | Decentralized Ticketing Platform
Favicon
A Guide to Quickly Deploying and Interacting with Smart Contracts Using the Stellar CLI
Favicon
stellar-TUI a terminal user interface for Horizon Stellar
Favicon
The Ultimate Stellar Supreme Tutorial
Favicon
Next.js + tRPC: Best practices for dApp development. Issuing new Assets + Freighter Wallet integration
Favicon
Hermes: Decentralized Perpetual Exchange on Stellar
Favicon
Stellar Wallet App: A Step-by-Step Guide from Zero to Hero
Favicon
Stellar Wallet App: A Step-by-Step Guide : Smart Contract Challenge
Favicon
Integrating Stellar Payments into a Django Web Application

Featured ones: