Integrating Stellar with Next.js, Nuxt 3 and SvelteKit

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

Your Tutorial

• https://soroban-js-docs.netlify.app/

What I Created

This tutorial covers integrating a Soroban smart contract with an app built with Next.js, Nuxt 3 or SvelteKit.

How to build the same app in Next, Nuxt and SvelteKit

Journey

It had been a while since I last tinkered with web3. This competition was good motivation to play around a bit. It was my first time hearing about Stellar and the SDF but I was impressed by their work, especially with the UNHCR.

What to build?

I had initially intended to make a dApp to find charities that can be supported with crypto and gamify the experience; sort of like a continuous giving experience in which users try to aid consistently and get rewarded with some character/EXP growth in the app. But work and life schedules didn't allow for this.

I pivoted to making a tutorial about integrating Soroban into an application. The tutorial had to be something that helped people get a hands-on approach to integrating with smart contracts. I make apps with React but I noticed there was a lack of resources for building with other frameworks in the space so why not try that as well?

It would be a tutorial that would appeal to more people, potentially grow the stellar community and enable me to learn about other frameworks.

The experience

I took inspiration from the soroban-example-app created by paltalabs and made an app using NextJS, Tailwind and DaisyUI. That was the easy bit, I now had to recreate the experience in Nuxt and SvelteKit...fireship would be proud 😉.

Having never used both frameworks it was all about the docs to understand how they work, especially state management, luckily it wasn't too hard to wrap my head around.

After which there was the integration to figure out; there were no out-of-the-box solutions like for react, so I had to look at how soroban-react did it and then create my implementation for each framework. After some later nights and weekends, it was all working and I was glad for the experience.

You can check out the tutorial built with docusaurus here: https://soroban-js-docs.netlify.app/

LINKS

• Next Demo: https://next-soroban.netlify.app/
• Next Repo: https://github.com/arndom/nextjs-soroban-app

 

• Nuxt Demo: https://nuxt-soroban.netlify.app/
• Nuxt Repo: https://github.com/arndom/nuxt-soroban-app

 

• Svelte Demo: https://sveltekit-soroban.netlify.app/
• Svelte Repo: https://github.com/arndom/sveletekit-soroban-app