DEV Community

Cover image for My Journey Building Apps with Coinbase SDK and Daytona
Ayush Singh
Ayush Singh

Posted on

My Journey Building Apps with Coinbase SDK and Daytona

As 10x developers, the biggest productivity killer we face is the hassle of setting up our developer environment. It is a process where things can go wrong without any notice which leads to frustration.

I was searching for a solution to this problem when one day I came across Daytona at their Developers Club Tour meetup in New Delhi. Excited, I saw their Creator Quest on Quira.

I decided to attempt the 023: Take Daytona for a spin challenge and in this blog, I will be sharing my experience with Daytona.

What is Daytona?

Daytona is a self-hosted and secure open-source development environment manager.

Daytona GitHub

It is a simple, no-hassle, CLI tool that cuts the extra steps like downloading libraries, building, updation, compiling, and testing from the development process and lets you start coding with a single command.

Learning Daytona

To get a basic idea about Daytona, I first opened their GitHub repository and read the README.md. I was impressed by the active development and 13.5k stars. After that, I went through their documentation and blog.

I then chose a theme to build on for the quest from the ones provided by the Daytona themes.

Building the App

For the quest, I built a template for connecting to a React app with Coinbase Wallet, using Coinbase Wallet SDK.

Coinbase Connect

I set up a React + Vite project, utilized TypeScript, speed read the Coinbase SDK documentation. Within one night, I had an MVP ready. I styled it with shadcn/ui and TailwindCSS and deployed it on Vercel.

Though it's focused on Web3 projects involving connecting Coinbase, this can be used as a shadcn/ui boilerplate too lol.

Joining The Community

After my project (Coinbase Connect) was submitted on the Quira platform I received a mail with a slack invitation and instructions to progress further.

Mail

I was thrilled and joined their Slack community. I introduced myself and my project and waited for further instructions.

Slack

One day later, Ivan created an empty repository for me on the Daytona organization. I migrated my codebase there and raised a PR.

Now here's the first hurdle, I forgot to --signoff my commit so it had an error. With some revision, my first PR was accepted. In the next two days, I did my second PR where I removed all the hardcoded constants and my third PR with some README.md changes.

Overall the experience with the community was great with Ivan and Jafa guiding me wherever necessary.

Using React with Coinbase SDK with Daytona

This should be the most comprehensive section of the blog but because of the ridiculously simple nature of Daytona, there isn't much you have to do.

FIrst of all, Installing Daytona is a breeze, even on Windows. It's a single command installation and you're done.

$architecture = if ($env:PROCESSOR_ARCHITECTURE -eq "AMD64") { "amd64" } else { "arm64" }
md -Force "$Env:APPDATA\bin\daytona"; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.SecurityProtocolType]'Tls,Tls11,Tls12';
Invoke-WebRequest -URI "https://download.daytona.io/daytona/v0.50/daytona-windows-$architecture.exe" -OutFile "$Env:APPDATA\bin\daytona\daytona.exe";
$env:Path += ";" + $Env:APPDATA + "\bin\daytona"; [Environment]::SetEnvironmentVariable("Path", $env:Path, [System.EnvironmentVariableTarget]::User);
daytona serve;
Enter fullscreen mode Exit fullscreen mode

If you happen to be on Linux or MacOS, then you can install Daytona with this command:

(curl -sf -L https://download.daytona.io/daytona/install.sh | sudo bash) && daytona server -y && daytona
Enter fullscreen mode Exit fullscreen mode

To run it locally, make sure you have Docker installed and running on your machine. Then run the following command to create your workspace:

daytona create https://github.com/daytonaio/sample-react-coinbase-connect
Enter fullscreen mode Exit fullscreen mode

Terminal

Start the Application:

npm install
npm run dev

# Building for Production
npm run build
npm run preview
Enter fullscreen mode Exit fullscreen mode

Daytona in action

GitHub (Do give it a ⭐)
Live

Conclusion

That sums up my experience of taking part in the Daytona Quest. I had fun building with and for Daytona and will be using it in my future projects.

The Daytona Quest still has two weeks left for submissions. It is a good opportunity to get started with Open Source. Don't miss it.

Thanks for reading!

Top comments (0)