Coin Backpack: thirdweb, next.js and sanity to help you with your first steps in crypto
Tags: thirdweb, nextjs, web3, cryptocurrency
Published: 2022-01-31 08:25:29

Mid of 2021, I was trying some stuff to get a better overview of the web3 environment: understanding the main concepts, trying to take part in some projects, minting NFTs...
After a while, I switched my experimentations to the technical part: how to build some solidity contracts, building some [buildspace](https://buildspace.so/) projects, understanding how to set up a DAO...

Believe it or not, the last step (for now!) brought me the [Hashnode Hackathon](https://townhall.hashnode.com/thirdweb-hackathon)!

I read the article mostly by curiosity but I found out this hackathon was the occasion to set up a real application, get a little challenge and test some capabilities of [thirdweb](https://thirdweb.com).

At this time, I only knew thirdweb from some Twitter posts and I was really curious about how it could make the developments easier.

I started to think about an interesting idea and I got some about NFTs, DAO...
I finally choose to build an opensource Coinbase-like prototype...

A few days after I started to develop a first draft on my spare time, this idea moved to building an open source educational project to help newcomers get a better understanding of how to deal with crypto tokens.

## The links

The project is open source, open for contributions (even if I still need to improve the repository to help newcomers to contribute) and available on GitHub:

https://github.com/Flolight/Coin-Backpack

Find the deployed application here:

https://coin-backpack.vercel.app/

![Coin Backpack application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0gndm7x9uoes19su7xj5.png)
 

## The first steps

Here is a list of some key ideas I followed to build this project.

**Requirements:**
* Coinbase-like design
* Connect with Metamask wallet
* Display all known tokens with their information (Name, Symbol, USD Price...)
* Display current wallet detailed balanced per token
* Display current wallet total balance
* Display wallet total balance evolution

**Next steps:**
* Implement the tutorial part to guide users through their first "fake" transaction
* Improve documentation
* Improve repository management to make it easier for people to use the project and contribute
* Display NFTs linked to the wallet

## The Tech stack

The project is built using **Next.JS** framework and currently hosted on Vercel [here](https://coin-backpack.vercel.app/).

For my first time trying this stack, I must admit it was super easy to start and deploy this way!

The **database** part is supported by [Sanity.io](http://sanity.io/). Again, this is a very "easy-to-set up" solution, definitely sufficient at the current step of the project and most of all, quick to use to generate the needed requests for Coin Backpack.

I created some contracts in **thirdweb** to represent tokens and be able to interact with them through the thirdweb SDK. This way, my application is able to retrieve the information about tokens, transactions...
Of course, I also used the thirdweb Web3Provider to connect the user wallet.

It was really helpful not to have to develop totally from scratch the modules provided by thirdweb.
If I had a remark to push after trying their solution, it would be that the documentation could probably be improved (but I guess it will be soon) to make it easier to find some technical details, without having to go through the guide articles (which are more tutorials than reference documentation).

Beside this point, I feel like thirdweb is probably going to become one of the references about building web3 projects fast, with ease and designed the right way.

## The future of the project

I'm still working on the tool in order to dive deeper into the web3 topics and to develop the educative part.
Currently, this point is, indeed, still in construction and will need some more time to be implemented and improved by users' feedbacks.

Again, if you like the project, feel free to suggest features, create issues or fork/send pull requests to [the repository](https://github.com/Flolight/Coin-Backpack).

## Conclusion

Thank you Hashnode team for setting this hackathon up, this was the trigger I needed to get started!

I have to admit that thirdweb help was really appreciated to simplify the development process and to abstract some highly technical operations.

I still need to spend some additional time testing more in details the NFTs related capabilities, but from what I read in the guides, it should be quite as easy to set up as the modules I already used.

I look forward using the other thirdweb capabilities in Coin Backpack or any other web3 projects in the future.

Feel free to reach me on Twitter [FlolightC](https://twitter.com/FlolightC) to share your thoughts about Coin Backpack project or to ask me questions ! I’m always happy to discuss with you!

For reference, here are some resources I used to develop this project:

* [thirdweb guides](https://thirdweb.com/portal)
* [Sanity](https://www.sanity.io/create)
* [Build a Coinbase clone tutorial](https://www.youtube.com/watch?v=frCsGK4cKks)
* [Deploy your Next.JS app with Vercel](https://nextjs.org/learn/basics/deploying-nextjs-app)