Bandada Boilerplate - Feedback App

Create your unique identity, join a group and provide your feedback anonymously.

This application shows Bandada usage with Semaphore in order to signal anonymously inside a Semaphore-compatible offchain groups. You will be able to access one group without any restriction (manual) and the other only if you have a minimum required number of followers in your GitHub account. You can remove the association between your GitHub account and the Bandada application at any time, as indicated here.

This project was created using create-next-app and is based on Next.js, a framework for building React applications.

To learn more about Bandada and different types of groups, please visit the repository and documentation. Also, you can learn more about the differences between Semaphore and Bandada here.

⚙️ Live Demo

The Feedback App is already deployed and configured with a manual offchain group and a credential offchain group.

You can begin interacting with both immediately without any additional configuration. Alternatively, you can watch a step-by-step walkthrough of how to use each application.

• Manual offchain group (demo, video)
• Credential offchain group (demo, video)

🏛️ Architecture

Use manual offchain group locally

Please make sure you are on the main branch.

• NodeJS >= v18.17.0
• A supabase free tier project
• A local copy of Bandada

1. 🪶 Running Bandada locally

Clone the Bandada repository and follow the README to run it locally and create your first manual offchain group:

git clone https://github.com/bandada-infra/bandada

2. 🗄️ Preparing Supabase

Supabase is an open source Firebase alternative. You can either use it online or self-hosted (no sign-up needed).

• Supabase online: create a Supabase account and a free tier project with basic configuration.
• Supabase self-hosting: follow self-hosting using Docker.

Creating tables

Once your project is ready, access the Table Editor from your project dashboard (you can use the Supabase CLI if you prefer) and create the following tables with the columns as shown in the image:

• Store all feedback in the feedback table, which will store all feedback (= signals) sent from users (= identities).
• Store all nullifier hashes in the nullifier_hash table to prevent double signaling. Refer to the Semaphore documentation for more information.
• Store all Semaphore group roots in the root_history table to fix the Merkle Tree (= Semaphore groups) roots expiration challenge. Refer to the conversation on GitHub for more information.

• When you are creating the tables make sure to uncheck the Enable Row Level Security (RLS) checkbox so that you can easily write to the database. If you have already created the tables, you can disable RLS by clicking the Disable RLS button. That's the quickest solution for working with the database but a real world application would have Row Level Security policies. You can learn more about it in the Supabase docs.

3. 🛠 Boilerplate Installation

Clone this repository running the following command in your terminal:

git clone https://github.com/bandada-infra/boilerplate

and install the dependencies:

cd boilerplate && yarn

4. 🔧 Boilerplate Configuration

Copy the environment variables for the development environment, run this command:

cp .env.development.local.example .env.development.local

Update their values:

# These can be retrieved from the Bandada dashboard (e.g., https://<dashboard_url>/groups/off-chain/<group_id>).
NEXT_PUBLIC_BANDADA_GROUP_ID=<bandada-group-id>
NEXT_PUBLIC_BANDADA_ADMIN_API_KEY=<bandada-admin-api-key>

# If using Supabase online, retrieve from dashboard (Project -> Settings -> API -> URL & Project API keys).
NEXT_PUBLIC_SUPABASE_API_URL=<supabase-api-url>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<supabase-anon-key>
# If using Supabase self-hosted, these are the default parameters:
#NEXT_PUBLIC_SUPABASE_API_URL=http://localhost:8000
#NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJzZXJ2aWNlX3JvbGUiLAogICAgImlzcyI6ICJzdXBhYmFzZS1kZW1vIiwKICAgICJpYXQiOiAxNjQxNzY5MjAwLAogICAgImV4cCI6IDE3OTk1MzU2MDAKfQ.DaYlNEoUrrEn2Ig7tqibS-PHK5vgusbcbo7X36XVt4Q

5. 📜 Usage

To start the applications in a development environment, run the following command:

yarn dev

The Feedback and other apps will be deployed at the following URLs (without any changes to the default configurations):

• Bandada API: http://localhost:3000
• Bandada Dashboard: http://localhost:3001
• Feedback App: http://localhost:3002

👨‍💻 Contributing

Code quality and formatting

Run ESLint to analyze the code and catch bugs:

yarn lint

Run Prettier to check formatting rules:

yarn prettier

or to format the code automatically:

yarn prettier:write