🌐 SafeVoice — AI-Powered Anonymous Support Platform

A secure, AI-assisted platform where users can anonymously share experiences, discover NGO support resources, translate content into regional languages, and communicate safely — without ever exposing their identity.

🔗 Live Demo · 🐛 Report a Bug · 💡 Request a Feature

---

📑 Table of Contents

• About The Platform
• Features
• Tech Stack
• Architecture
  • High-Level Overview
  • Platform Workflows
  • Security & Privacy
• Project Structure
• Getting Started
  • Prerequisites
  • Installation
  • Environment Variables
  • Running Locally
• Usage Guide
• API Reference
• Contributing
• GSSoC'26 Participation
• Contact & Maintainers
• License
• Support The Project

---

📌 About The Platform

SafeVoice is a privacy-focused web platform designed to give people a safe digital space to anonymously share experiences related to harassment, abuse, discrimination, emotional distress, or other social issues.

The platform combines:

• 🔐 Secure authentication
• 🧠 AI-powered text enhancement
• 🌍 Multilingual translation
• 🖼️ Media upload support
• 📚 NGO resource discovery
• ⚡ A serverless backend

Its architecture is built around:

• Privacy-first design — identity stays separate from published content
• Scalability — serverless functions scale independently
• Performance — fast, CDN-backed delivery via Netlify
• Modularity — clean separation between frontend, backend functions, and data layer
• Beginner-friendly contribution — approachable for first-time open-source contributors

---

✨ Features

Feature	Description
📝 Anonymous Publishing	Create, edit, and manage content without exposing identity
🌍 AI Translation	Translate content into multiple Indian languages
✏️ AI Grammar Enhancement	Improve text quality before publishing
🖼️ Media Uploads	Attach audio recordings and images to a post
🔐 Secure Authentication	Firebase-based sign-up and login
📚 NGO Resource Hub	Browse verified support organizations
⚡ Serverless APIs	Lightweight backend powered by Netlify Functions
🛡️ Abuse Protection	Rate limiting and secured API access

---

⚙️ Tech Stack

Layer	Technology
Frontend	React + TypeScript + Tailwind CSS (Vite)
Backend	Firebase + Netlify Functions
Database	Firestore
Authentication	Firebase Auth
AI Integration	Google Gemini AI
Deployment	Netlify
Storage	Cloud Storage / external storage

---

🏗️ Architecture

High-Level Overview

flowchart LR

A[👤 User] --> B[⚛ React Frontend]

B --> C[🔥 Firebase Authentication]
B --> D[📦 Firestore Database]
B --> E[⚡ Netlify Serverless Functions]

E --> F[🧠 Google Gemini AI]

B --> G[🖼 Media Storage]

D --> H[📚 Content Collection]
D --> I[👥 Users Collection]
D --> J[🏢 NGO Resources]

F --> K[🌍 Translation Output]
F --> L[✏️ Grammar Corrected Output]

Loading

Backend-to-frontend detailed view

flowchart TB

subgraph Frontend
A[Home.tsx]
B[Auth.tsx]
C[ShareStory.tsx]
D[Stories.tsx]
E[Resources.tsx]
F[AdminDashboard.tsx]
end

subgraph Backend
G[Firebase Authentication]
H[Firestore Database]
I[Netlify Functions]
J[Google Gemini AI]
K[Media Storage]
end

A --> B
B --> G

C --> I
I --> J

C --> H
D --> H
E --> H
F --> H

C --> K
K --> H

J --> I
I --> C

Loading

Frontend routing structure

flowchart TD

A[🏠 Home] --> B[🔐 Authentication]
A --> C[📝 Create Content]
A --> D[📚 Explore Content]
A --> E[🏢 NGO Resources]
A --> F[❓ FAQs]
A --> G[📞 Contact]
A --> H[⚙️ Admin Dashboard]

Loading

Platform Workflows

1️⃣ Authentication lifecycle

sequenceDiagram
    participant User
    participant Frontend
    participant FirebaseAuth
    participant Firestore

    User->>Frontend: Open Login / Signup Page
    Frontend->>FirebaseAuth: Send Credentials
    FirebaseAuth-->>Frontend: Authentication Token
    Frontend->>Firestore: Store User Metadata
    Firestore-->>Frontend: User Profile Created
    Frontend-->>User: Redirect to Dashboard

Loading

• Firebase Authentication validates credentials
• Session tokens are generated securely
• User metadata is stored in Firestore
• Public content remains detached from identity

2️⃣ Content creation lifecycle

flowchart TD

A[👤 User Creates Content] --> B[📝 ShareStory.tsx]

B --> C{Use AI Grammar Enhancement?}

C -->|Yes| D[⚡ correct-grammar.cjs]
D --> E[🧠 Gemini AI]
E --> F[✏️ Enhanced Text]

C -->|No| G[Continue Original Text]

F --> H[📦 Submit Content]
G --> H

H --> I{Attach Media?}

I -->|Yes| J[🖼 Upload Audio/Image]
I -->|No| K[📄 Store Text Only]

J --> L[☁ Media Storage]
L --> M[🔗 Media URL Generated]

M --> N[🔥 Firestore Database]
K --> N

N --> O[📚 Content Published]

Loading

3️⃣ AI translation lifecycle

flowchart LR

A[📚 Existing Content] --> B[⚡ translate.cjs]

B --> C[🧠 Google Gemini AI]

C --> D[🌍 Selected Language Translation]

D --> E[⚛ Frontend Display]

Loading

Benefits: regional accessibility, cross-language communication, and better outreach for support systems.

4️⃣ Content retrieval workflow

sequenceDiagram
    participant User
    participant Frontend
    participant Firestore

    User->>Frontend: Open Feed Page
    Frontend->>Firestore: Fetch Content
    Firestore-->>Frontend: Return Content Data
    Frontend-->>User: Render Content Cards

Loading

Retrieved data includes anonymous content, media URLs, timestamp metadata, and translation versions.

5️⃣ NGO resource hub workflow

flowchart LR

A[👤 User Searches NGO] --> B[⚛ Resources.tsx]

B --> C[🔥 Firestore NGO Collection]

C --> D[📚 NGO Resource Cards]

D --> E[📞 Contact Information]

Loading

Security & Privacy

Privacy principles

• Anonymous publishing
• Minimal personally identifiable information
• Secure authentication flow
• Protected backend APIs
• Firestore security rules
• Abuse prevention mechanisms

Security workflow

flowchart LR

A[👤 User Request] --> B[🔐 Firebase Authentication]
B --> C[🛡 Auth Validation]
C --> D[⚡ Serverless Function]
D --> E[🔥 Firestore Rules]
E --> F[📦 Database Access]

Loading

---

📂 Project Structure

SafeVoice/
├── .github/
│   └── ISSUE_TEMPLATE/
├── netlify/
│   └── functions/
│       ├── correct-grammar.cjs
│       ├── subscribe.cjs
│       └── translate.cjs
├── public/
│   └── _redirects
├── src/
│   ├── components/
│   ├── context/
│   ├── lib/
│   ├── pages/
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── .env.example
├── CONTRIBUTING.md
├── CODE_OF_CONDUCT.md
├── LICENSE.md
├── README.md
├── package.json
├── netlify.toml
└── vite.config.js

---

🚀 Getting Started

Prerequisites

Make sure you have the following installed before you begin:

• Node.js (v18 or later recommended)
• npm
• Git
• A Firebase project (for authentication and Firestore)
• A Google Gemini API key (for AI translation and grammar enhancement)

Installation

1. Clone the repository

   git clone https://github.com/Piyushydv08/SafeVoice.git
   cd SafeVoice

2. Install dependencies

   npm install

3. Install the CLI tools used for local development

   npm install -g firebase-tools
   npm install -g netlify-cli

Environment Variables

Copy the provided example file and fill in your own credentials:

cp .env.example .env

The .env file expects the following keys:

VITE_API_BASE_URL=https://your-deployed-site.netlify.app
VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
VITE_FIREBASE_PROJECT_ID=your_firebase_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
VITE_FIREBASE_APP_ID=your_firebase_app_id
VITE_FIREBASE_MEASUREMENT_ID=your_firebase_measurement_id
GEMINI_API_KEY=your_gemini_api_key

⚠️ Never commit your .env file. It's already excluded via .gitignore.

Running Locally

Start the development server (this runs the frontend together with the Netlify Functions backend):

netlify dev

The app will be available at the local URL printed in your terminal (typically http://localhost:8888).

Other useful scripts:

npm run dev       # Vite dev server only (no serverless functions)
npm run build     # Production build
npm run preview   # Preview the production build locally
npm run lint      # Run ESLint

---

▶️ Usage Guide

1. Open the platform in your browser.
2. Sign up or log in securely using Firebase Auth.
3. Create anonymous content.
4. Optionally attach media (audio or images).
5. Improve your writing using the AI grammar enhancement tool.
6. Translate content into a regional language.
7. Browse the NGO resource hub for support organizations.

---

⚡ API Reference

SafeVoice's backend is implemented as Netlify serverless functions:

Endpoint	Purpose
correct-grammar.cjs	AI-powered grammar enhancement
translate.cjs	Multi-language translation
subscribe.cjs	Newsletter / email subscriptions

---

🤝 Contributing

Contributions are welcome from developers of all experience levels! Please read CONTRIBUTING.md for detailed setup and contribution guidelines, and our CODE_OF_CONDUCT.md before participating.

Workflow at a glance:

flowchart LR

A[Fork Repository] --> B[Create Branch]
B --> C[Make Changes]
C --> D[Test Changes]
D --> E[Commit Code]
E --> F[Push Branch]
F --> G[Create Pull Request]

Loading

1. Fork the repository and clone it locally.
2. Create a new branch: git checkout -b feature/your-feature-name.
3. Make your changes and test them locally.
4. Commit with a clear message: git commit -m "Add: short description".
5. Push to your fork: git push origin feature/your-feature-name.
6. Open a pull request describing your changes.

---

🌟 GSSoC'26 Participation

SafeVoice is officially part of GirlScript Summer of Code 2026.

Contributors can:

• Improve frontend UI/UX
• Build backend APIs
• Add AI integrations
• Improve accessibility
• Enhance documentation
• Optimize performance

---

📧 Contact & Maintainers

Maintainer	GitHub	LinkedIn
Piyush Yadav	@Piyushydv08	piyushydv08
Aditi Raj	@aditiraj2006	aditi-raj-890358329

Support channels: GitHub Issues · Pull Request Discussions

---

📄 License

This project is licensed under the MIT License.

---

⭐ Support The Project

If you found this project useful:

• ⭐ Star the repository
• 🍴 Fork the project
• 🧑‍💻 Contribute improvements
• 📢 Share it with others

"Creating a secure space where voices can be heard safely, anonymously, and without fear." 💙