How to Build an Anonymous Feedback Website using Anyone SDK

Have you ever wanted a way for people to share their thoughts openly, without fear or hesitation? Let me introduce you to Anyone SDK. Anyone Protocol is a decentralized privacy infrastructure that enables any application to operate seamlessly on a privacy-focused network.

Unlike traditional VPNs, it employs onion routing to encrypt and forward traffic through multi-hop VPN tunnels, ensuring that no single node or destination site can infer a user’s request. In this article I will share a tutorial on how to create anonymous feedback with Anyone SDK.

1. Install the Tools You Need

First, let’s get your system ready. You’ll need:

  1. Node.js (to run the backend)
  2. VS Code (your coding environment)
  3. Tor Browser (to access .onion sites)

Once these are ready, let’s jump in.

2. Set Up Your Project Folder

  1. Open your terminal or command prompt
  2. Create a folder for your project and navigate into it: mkdir anonymous-feedback cd anonymous-feedback
  3. Initialize the project with this command: npm init -y
    This creates a package.json file to manage the project.
  4. Install the necessary libraries: npm install @anyone-protocol/anyone-client

3. Build the Backend

The backend is what processes and stores feedback.

Create a file named index.js in your project folder.
Open VS Code and add this code

const express = require('express'); // Import express
const fs = require('fs'); // To save feedback to a file
const app = express(); // Create an Express app

// Middleware to parse JSON and form data
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// Serve the HTML file (we'll create this later)
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

// Endpoint to handle feedback submission
app.post('/feedback', (req, res) => {
    const feedback = req.body.feedback; // Get feedback from the request
    if (!feedback) {
        return res.status(400).send('Feedback cannot be empty!');
    }

    // Save feedback to a file
    fs.appendFileSync('feedback.txt', feedback + '\n');
    res.send('Thank you for your feedback!');
});

// Start the server
const PORT = 3000;
app.listen(PORT, () => {
    console.log(`Server is running at http://127.0.0.1:${PORT}`);
});

4. Create the Frontend (HTML)

Create a file named index.html in your project folder.
Add this code to create a simple UI:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anonymous Feedback</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }
        form {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        textarea {
            width: 100%;
            height: 100px;
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        button {
            padding: 10px 15px;
            background: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <form id="feedbackForm">
        <h2>Send Your Feedback</h2>
        <textarea name="feedback" placeholder="Write your feedback here..." required></textarea>
        <button type="submit">Send</button>
    </form>

    <script>
        const form = document.getElementById('feedbackForm');
        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            const feedback = form.feedback.value;

            const response = await fetch('/feedback', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ feedback }),
            });

            if (response.ok) {
                alert('Thank you for your feedback!');
                form.reset();
            } else {
                alert('Failed to send feedback!');
            }
        });
    </script>
</body>
</html>

Open your terminal, navigate to the project folder, and type:

node index.js

5. Integrate Anyone SDK

Now, we’ll set up Tor to make your website accessible anonymously.

Create a file named anonrc
Add this configuration:

HiddenServiceDir ./anon_service/
HiddenServicePort 80 127.0.0.1:3000

In your terminal, run: npx anyone-client -f ./anonrc

After starting the client, run: cat ./anon_service/hostname This will show your .onion address.

6. Test Your Anonymous Site

  1. Open Tor Browser.
  2. Paste the .onion address into the URL bar.
  3. Submit feedback through the form.
  4. Check the feedback.txt file in your project folder to see if the feedback was saved.

Building an anonymous feedback website is a powerful way to encourage open communication while respecting privacy. The Anyone Protocol and Anyone SDK showcase the future of privacy-centric application development. By providing an intuitive framework for integrating anonymity and security features, these tools empower developers to create solutions that prioritize user privacy.

The SDK streamlines complex processes, making it accessible for developers of all skill levels to build secure and anonymous communication platforms. In an era where privacy is more critical than ever, the Anyone Protocol serves as a cornerstone for ethical and secure technology. By adopting this protocol, developers are contributing to a broader movement to protect user data and foster trust in digital interactions.

LEAVE A REPLY

Please enter your comment!
Please enter your name here