Preview of the Anonywall anonymous wall and forum app

ANONYWALL

An anonymous wall and multi-board forum with Firebase auth, reporting, and admin moderation.

The Anonymous Wall (AnonyWall)

On This Page

Project Overview

Overview

AnonyWall is a privacy-first community app that blends an anonymous Freedom Wall with a multi-board forum. Users can browse or post anonymously, sign in with Google for a persistent profile, and report content for moderation. Admins review reports, resolve issues, and keep an audit trail.

Features

  • Freedom Wall: themed, mood-tagged shoutouts with instant UI updates.
  • Forum: board-based feeds, likes, replies (with optional reply-to), and post detail pages.
  • Auth: Google Sign-In and anonymous login; admin role via VITE_ADMIN_EMAILS.
  • Reporting and moderation: users report posts/messages; admins resolve/dismiss with logs.
  • Profiles: Firestore-backed profiles; username changes backfill authored content.
  • Seed data: demo Freedom Wall messages populate when Firestore is empty for first-load UX.

Project Structure

  • src/App.jsx - routing shell (header, footer, back-to-top, auth wrapper).
  • src/pages/ - Home, About, Browse/Freedom Wall, Forum, ForumPost, Profile, AdminDashboard, policy/contact.
  • src/components/ - submit/report/login modals, forum UI, footer/header, helpers.
  • src/contexts/ - AuthContext, MessageContext.
  • src/backend/ - Firebase config, controllers, Firestore models.
  • src/data/ - board definitions and metadata.
  • src/utils/ - constants, name generator, avatar helpers, formatting utilities.

Architecture

  • Routing: React Router v7 in src/App.jsx covers Home, Freedom Wall (/browse or /freedom-wall), Forum, ForumPost detail, Profile, Admin, and policy/contact pages with a shared layout shell.
  • State: AuthContext manages Firebase auth (Google + anonymous), profiles, and roles; MessageContext seeds demo Freedom Wall posts when Firestore is empty and mirrors new submissions for instant UI updates.
  • Backend services (src/backend/controllers): messageController, postController, replyController, reportController, moderationController, userController.
  • Models (src/backend/models): builders for Message, Post, Reply enforce consistent fields, timestamps, and avatar seeds.
  • Config/data: src/backend/config/firebase.js bootstraps Auth/Firestore; src/data/boardConfig.js defines boards, colors, icons, rules; src/utils contains copy, name generation, and helper APIs.
  • UI components: submit/report/login modals, forum post modal, stats blocks, theme/mood pickers, dicebear avatars, back-to-top, footer, and header navigation.

Navigation & Screen Flows

  • Home landing.
  • Freedom Wall browse/submit at /browse or /freedom-wall.
  • Forum list + board filters; post detail at /forum/:postId.
  • Profile: view/update profile data.
  • Admin Dashboard: review/resolve reports; view moderation logs.
  • Policy/Contact pages. Routing lives in src/App.jsx.

Data & API Integration

  • Firestore collections: messages (Freedom Wall), posts (forum posts + replies subcollections), reports (content reports), moderation_logs (admin actions), users (profiles/roles).
  • Controllers (src/backend/controllers): handle CRUD, likes, report status changes, audit logging, and profile management.
  • Models (src/backend/models): builders for Message, Post, Reply enforce required fields and timestamps.
  • Config/data: src/data/boardConfig.js defines boards, colors, icons, rules; src/utils supplies copy, name generation, and helper APIs.

State Management & Data Flow

  • AuthContext: wraps Firebase Auth (Google + anonymous), syncs profile/role, exposes auth actions and role flags.
  • MessageContext: hydrates Freedom Wall feed, seeds demo data when Firestore is empty, mirrors new submissions for instant UI updates.
  • UI subscribes to Firestore reads; submit/report modals write via controllers and update local state optimistically.

Styling & Theming

  • Vanilla CSS with custom properties for theme colors.
  • Theme and mood pickers tint Freedom Wall cards and composer backgrounds.
  • Responsive layout; modals adapt for mobile with slide-up behavior.

Roadmap

  • Future enhancements:
    • Add richer moderation tooling (bulk resolve, filters, exports).
    • Offline-friendly caching for read flows.
    • Additional auth providers and optional email verification for Google accounts.
    • Improved analytics on board engagement and report resolution.

Build & Ops

Tech Stack

  • React 19 + Vite (rolldown-vite) + React Router v7.
  • Firebase (Auth + Firestore).
  • Vanilla CSS with CSS variables; FontAwesome icons.
  • ESLint for linting; TypeScript typings for editor support.

Environment Configuration

Create .env in the project root:

VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project_id.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id
VITE_ADMIN_EMAILS=admin1@example.com,admin2@example.com

Firebase is initialized in src/backend/config/firebase.js. Admins are recognized when their email appears in VITE_ADMIN_EMAILS.

Usage

  • Prerequisites: Node.js 16+ and npm.
  • Local dev: npm install, then npm run dev (http://localhost:5173).
  • Scripts: npm run dev (serve), npm run lint (lint), npm run build (bundle), npm run preview (serve built bundle).
  • Quality checks: recommended smoke tests:
    • Google + anonymous auth, admin link visibility.
    • Freedom Wall submit/report and instant update.
    • Forum create/like/reply/report.
    • Profile update and username backfill across owned posts/replies.
    • Admin report resolution and audit logging visibility.
  • Accessibility & performance: semantic headings and labels, alt text on imagery, Vite bundle kept lean; Firestore reads batched through controllers; avoid unnecessary re-renders by relying on context selectors where applicable.
  • Deployment: static build in dist/; vercel.json rewrites /* to index.html for SPA routing; ensure .env variables are set in the hosting environment (Firebase keys + VITE_ADMIN_EMAILS).

Troubleshooting

  • Admin link missing: confirm email is listed in VITE_ADMIN_EMAILS.
  • Empty Freedom Wall on first load: ensure MessageContext seeding is active and Firestore rules allow reads.
  • Auth failures: verify Firebase Auth providers (Google + anonymous) are enabled and env keys match the Firebase project.
  • Firestore permission errors: check rules for messages, posts, reports, users, and moderation_logs.

License

MIT License (see LICENSE).