Secret Developer Workshop: Delivering good UI/UX for users

Learn building shiny frontends for dApps using Secret's private smart contracts - standing out guaranteed! Open to developers of all levels.

💡 What you’ll learn

With Secret Network’s private smart contracts, you can build apps with encrypted input, output, and state that are still auditable. This protects users and opens up new use cases like private NFTs, B2B invoicing, private on-chain voting, decentralized certification platforms, and more.

Superior technologies can get forgotten fast in the market if they aren’t easy and fun. Therefore it is crucial to deliver a welcoming frontend for dApps, so that people from all backgrounds can utilize these things fast. Also, who doesn’t like shiny cutting-edge website designs, right?

So let’s build, discuss, and enhance a great user experience with Secret Network so that you can build better dApps!

🧑‍💻 The workshop will go as follows:

(1h) You’ll get an introduction to Secret Network and the initial problems, which we will tackle together

(30m) We’ll walk you through the first part of the application codebase

(1h) You’ll have multiple 15 to 30-minute break room sessions in small groups to discuss, write and enhance the frontend. You will also learn how to interact with the Secret SDK secret.js

(30m) We’ll summarize the experience and pinpoint all aspects to consider while building a frontend. We will also use the created dApp UI to interact with a SNIP-20 smart contract in the pulsar-2 Secret testnet.

(30m) You’ll get to use and test the private dApp UI you just built!

(1h) Networking & drinks in the bar across the street

After the workshop ends, we’ll stick around to talk about Secret UI/UX development in general and answer any questions you might have.

❗️Setup

1. Install Node.js LTS including NPM and yarn if you want to do local development. You can also use our Stackblitz.

2. Follow these instructions to set up your Keplr wallet, add the Secret Network testnet, and fund your testnet wallet with tokens.

3. We will hook you up with the git repository during the workshop.

4. If you’ve never worked with Secret Network smart contracts and/or Secret.js before, you might find it helpful to complete our Secret.Js tutorial prior to attending the workshop.

Interested to dive in a bit more before the workshop? Check out our Secret University

Running the app

The good ol' classic way

To get the app up and running, run:

npm start

The App runs on port 3000.

Docker

To get the app up and running inside Docker, run:

docker compose up

The App runs on port 3000. For further information check the Dockerfile and the docker-compose.yml.