Building a Secure Anonymous Feedback System with Django, Twilio, and Pinata

In this guide, I will walk you through building a Secure Anonymous Feedback System using Django, Twilio for SMS notifications, Pinata for secure media uploads, and TailwindCSS for responsive styling. By the end of this tutorial, you will have a fully functional feedback system where users can submit feedback, optionally upload media, and receive SMS notifications—all with security and privacy in mind.

Demo: Live Link

Key Features:

• Anonymous Feedback Submission: Users can submit feedback or support requests anonymously.
• Secure Media Uploads: Users can upload media files securely via Pinata, stored on IPFS.
• Twilio SMS Notifications: Automatically sends SMS confirmation to users via Twilio.
• Responsive UI: Styled with TailwindCSS for a seamless, modern design.

Technologies Used:

• Django: Backend framework for the feedback system.
• Twilio: Handles SMS notifications.
• Pinata: Provides IPFS-based secure media storage.
• TailwindCSS: For responsive frontend styling.

Step 1: Project Setup and Dependencies

1.1. Create and Set Up a Virtual Environment
Start by setting up your project environment. Ensure you have Python installed and set up a virtual environment:

python3 -m venv venv
source venv/bin/activate

On Windows:

venv\Scripts\activate

Install the necessary packages:

pip install django twilio python-decouple requests gunicorn

1.2. Start a Django Project
Initialize a new Django project and app:

django-admin startproject config .
python manage.py startapp feedback

Step 2: Build the Feedback Submission System

2.1. Create a Feedback Model
Define a model to store feedback submissions in feedback/models.py:

from django.db import models

class Feedback(models.Model):
    message = models.TextField()
    sender_email = models.EmailField()
    sender_phone = models.CharField(max_length=15)
    media_url = models.URLField(null=True, blank=True)
    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return f"Feedback from {self.sender_email}"

This model captures feedback, email, phone number, and optional media URLs.

2.2. Create Views for Handling Feedback and SMS Notifications
In feedback/views.py, create views to process feedback and send SMS notifications:

from django.shortcuts import render
from django.http import HttpResponse
from .models import Feedback
from twilio.rest import Client
from django.conf import settings
import requests

def upload_to_pinata(file):
    url = "https://api.pinata.cloud/pinning/pinFileToIPFS"
    headers = {
        'pinata_api_key': settings.PINATA_API_KEY,
        'pinata_secret_api_key': settings.PINATA_SECRET_API_KEY,
    }
    files = {'file': file}
    response = requests.post(url, files=files, headers=headers)
    return response.json().get('IpfsHash')

def submit_feedback(request):
    if request.method == 'POST':
        message = request.POST.get('message')
        sender_email = request.POST.get('sender_email')
        sender_phone = request.POST.get('sender_phone')
        file = request.FILES.get('media_file', None)

        media_url = None
        if file:
            media_url = upload_to_pinata(file)

        feedback = Feedback.objects.create(
            message=message,
            sender_email=sender_email,
            sender_phone=sender_phone,
            media_url=media_url
        )

        # Send SMS using Twilio
        client = Client(settings.TWILIO_ACCOUNT_SID, settings.TWILIO_AUTH_TOKEN)
        client.messages.create(
            body=f"Feedback received from {sender_phone}: {message}",
            from_=settings.TWILIO_PHONE_NUMBER,
            to=sender_phone
        )

        return HttpResponse("Feedback submitted successfully!")

    return render(request, 'feedback_form.html')

This view handles form submissions, uploads optional media to Pinata, and sends SMS using Twilio.

2.3. Creating the Feedback Form
Create an HTML form to submit feedback. In your templates folder, create feedback_form.html:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Submit Feedback</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-6">
        <h1 class="text-3xl font-bold text-center">Submit Feedback</h1>
        <form method="POST" action="" enctype="multipart/form-data" class="bg-white p-6 rounded shadow-md">
            {% csrf_token %}
            <div class="mb-4">
                <label for="message" class="block text-lg font-semibold">Your Feedback</label>
                <textarea name="message" id="message" class="w-full p-2 border rounded" required></textarea>
            </div>
            <div class="mb-4">
                <label for="sender_email" class="block text-lg font-semibold">Your Email</label>
                <input type="email" name="sender_email" id="sender_email" class="w-full p-2 border rounded" required>
            </div>
            <div class="mb-4">
                <label for="sender_phone" class="block text-lg font-semibold">Your Phone Number</label>
                <input type="tel" name="sender_phone" id="sender_phone" class="w-full p-2 border rounded" required>
            </div>
            <div class="mb-4">
                <label for="media_file" class="block text-lg font-semibold">Upload Media (Optional)</label>
                <input type="file" name="media_file" id="media_file" class="w-full p-2 border rounded">
            </div>
            <div class="text-center">
                <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">Submit</button>
            </div>
        </form>
    </div>
</body>
</html>

Image of the Front end

Image of Pinata Dashboard showing the files uploaded

Step 3: Configuring Twilio and Pinata

3.1. Set Up Environment Variables
Create a .env file in your project’s root directory to store sensitive information like Twilio and Pinata API keys:

SECRET_KEY=your-django-secret-key
DEBUG=True

TWILIO_ACCOUNT_SID=your_twilio_account_sid
TWILIO_AUTH_TOKEN=your_twilio_auth_token
TWILIO_PHONE_NUMBER=your_twilio_phone_number

PINATA_API_KEY=your_pinata_api_key
PINATA_SECRET_API_KEY=your_pinata_secret_api_key

Make sure to add .env to your .gitignore file so it won’t be pushed to GitHub:

.env

3.2. Update settings.py to Use Environment Variables
Use python-decouple to securely load environment variables from the .env file:

from decouple import config

SECRET_KEY = config('SECRET_KEY')
DEBUG = config('DEBUG', default=False, cast=bool)

TWILIO_ACCOUNT_SID = config('TWILIO_ACCOUNT_SID')
TWILIO_AUTH_TOKEN = config('TWILIO_AUTH_TOKEN')
TWILIO_PHONE_NUMBER = config('TWILIO_PHONE_NUMBER')

PINATA_API_KEY = config('PINATA_API_KEY')
PINATA_SECRET_API_KEY = config('PINATA_SECRET_API_KEY')

Step 4: Pushing to GitHub

4.1. Initialize Git and Push to GitHub

1. Initialize a Git repository in the root of your project:

git init
git add .
git commit -m "Initial commit for feedback system"

1. Add your GitHub repository as a remote and push your project:

git remote add origin https://github.com/yourusername/feedback-system.git

git push -u origin main

Conclusion

In this tutorial, you’ve built a secure anonymous feedback system using Django, Twilio for SMS notifications, and Pinata for media uploads. You’ve also learned how to push your project to GitHub and secure sensitive information using environment variables. This system ensures privacy while enabling users to submit feedback and receive SMS notifications.

Feel free to expand the system further by adding more features or enhancing security. If you found this guide helpful, share your feedback or questions in the comments!

The Repo to the Project can be found here: Repo