Build a Nada Playground Web App

[oceans404]

Bounty Objective

Build an open source “Nada Playground” web app that provides an interactive environment for developers to write, run, and share Nada code. The playground should be user-friendly and serve as a resource for learning and experimenting with Nada programming.

Here are some examples of awesome open source language playgrounds for inspiration

• Circom playground
• Miden playground
• Noname playground
• Go playground
• Rust playground

Additional resources

• https://pyscript.net/
• https://codemirror.net/

Bounty Requirements

Build an open source Nada Playground web app. This bounty submission should include a live working link to your Nada Playground web app. We built a proof of concept Nada Sandbox that you can use as inspiration, but require that your bounty submission is built with a modern JavaScript framework (React, NextJS, etc.)

Your Nada Playground must include these core components:

Nada code editor

• Provides a code editor with syntax highlighting for Nada programs
• Allows users to write and edit Nada program code

Inputs section

• Provides a way to add each Nada program input by name, type, and value corresponding to the Nada program
  • input name
  • data type (PublicInteger, PublicUnsignedInteger, SecretInteger or SecretUnsignedInteger)
  • input value
• Has a “Run” button that starts program execution (compile and run) with the inputs

Outputs section

• Shows the returned outputs after a computation is run

Program Executor

• Compiles the Nada program using the jsnadac script
• Runs the compiled Nada program with the values from the input section using the nada_run script

Nada Playground Feature Wishlist

• A “reset” button that clears the code editor
• The ability to “share” a Nada Playground link with a custom program
• The ability to link to a Nada program in the Nada Playground with 2 Github files
  • Nada program via Github link: https://github.com/NillionNetwork/nada-by-example/blob/main/src/addition.py
  • Nada inputs via Github link: https://github.com/NillionNetwork/nada-by-example/blob/main/tests/addition_test.yaml
• Preloaded example programs to choose from that load into the playground with input values
• A “store program” button that uploads the Nada program to the Nillion Testnet

How to Submit

Review the Terms and Conditions for Nillion Builder Bounties here.

Open source your repo and submit your bounty by creating a new discussion in Nillion’s “Show and Tell” Github Discussions Forum. For project type, choose “Builder Bounty Submission”

[yashmangal112]

Hi @oceans404, I'm working on building the Nada Playground Web App, but I'm facing a problem because the Nada package is only available for Python and not as an NPM package. This means I might need to incorporate Python into my project. What steps should I take to address this issue?

[thekumbhaj]

Hi @oceans404 i'm start working on the project

[neeraj542]

Working on model designs to build the editor with an interactive features mentioned above

[RohitSathya]

Hi @oceans404 im started to work on this project!!!

[Bhavye2003Developer]

Hello @oceans404,

I hope you're doing well. I wanted to inform you that I have submitted my project on the Builder Bounty page. Please feel free to review it at your convenience. You can access the live version through the following link: Nada Playground.