Unfiltered

A minimal, anonymous posting and discussion platform built as a static website with Firebase as the backend. Readers can browse posts, read full articles, and engage in threaded discussions without creating an account. Administrators manage content through a separate protected dashboard.

---

Table of Contents

• Overview
• Features
• Project Structure
• Prerequisites
• Step-by-Step Setup Guide
  • Step 1: Create a Firebase Project
  • Step 2: Enable Firestore Database
  • Step 3: Enable Email Authentication
  • Step 4: Get Your Firebase Configuration
  • Step 5: Add Your Admin User
  • Step 6: Configure the Application Files
  • Step 7: Deploy the Site
• Using the Platform
  • For Readers
  • For Administrators
• Security Considerations
• Technologies Used

---

Overview

Unfiltered provides a clean, distraction-free space for anonymous reading and discussion. The platform consists of two parts:

• Public Site (index.html) -- A responsive, dark-themed blog where visitors can browse posts, search content, read articles, and leave comments with replies.
• Admin Dashboard (admin.html) -- A password-protected panel where administrators can create, edit, and delete posts, as well as moderate all comments and replies.

No server-side code is required. The entire application runs in the browser and stores data in Google Firebase.

---

Features

Public Site

• Responsive grid layout for browsing posts
• Real-time search filtering
• Full article view with reading progress indicator
• Anonymous commenting with nested replies
• Hash-based routing for shareable post links
• Skeleton loading states and toast notifications

Admin Dashboard

• Email/password authentication
• Post creation, editing, and deletion
• Comment moderation across all posts
• Mobile-responsive sidebar navigation
• Draft compose interface

---

Project Structure

admin.html      -- Admin dashboard (create/edit posts, moderate comments)
icon.png        -- Site favicon
index.html      -- Public-facing site (browse posts, read, comment)

---

Prerequisites

• A Google account (for Firebase)
• A modern web browser
• A method to host static files (GitHub Pages, Netlify, Vercel, or any web host)

No programming knowledge is required to set up and use this platform.

---

Step-by-Step Setup Guide

Step 1: Create a Firebase Project

1. Go to https://console.firebase.google.com/ and sign in with your Google account.
2. Click Add project (or Create a project).
3. Enter a project name (for example, unfiltered-blog) and click Continue.
4. You can disable Google Analytics for this project unless you need it. Click Create project.
5. Wait for the project to be created, then click Continue to enter the Firebase console.

Step 2: Enable Firestore Database

1. In the Firebase console, find Firestore Database in the left sidebar and click it.
2. Click Create database.
3. Select a location closest to your expected audience and click Next.
4. Choose Start in test mode for initial setup. You will tighten the rules later (see Security Considerations).
5. Click Enable.

Step 3: Enable Email Authentication

1. In the Firebase console, find Authentication in the left sidebar and click it.
2. Click Get started.
3. Under Sign-in providers, click Email/Password.
4. Toggle the Enable switch on and click Save.

Step 4: Get Your Firebase Configuration

1. In the Firebase console, click the gear icon (Project Settings) at the top of the left sidebar.
2. Scroll down to the Your apps section.
3. Click the web icon (</>) to register a new web app.
4. Give the app a nickname (for example, Unfiltered Web) and click Register app.
5. You will see a block of code containing your configuration. It looks like this:

const firebaseConfig = {
    apiKey: "AIzaSy...",
    authDomain: "your-project.firebaseapp.com",
    projectId: "your-project-id",
    storageBucket: "your-project.appspot.com",
    messagingSenderId: "123456789",
    appId: "1:123456789:web:abcdef"
};

6. Copy the entire firebaseConfig block. You will need it in the next step.

Step 5: Add Your Admin User

1. In the Firebase console, go to Authentication > Users.
2. Click Add user.
3. Enter the email address and a strong password you will use to log in to the admin dashboard.
4. Click Add user.

This is the account you will use to access admin.html.

Step 6: Configure the Application Files

1. Open index.html in any text editor (Notepad, VS Code, Sublime Text, etc.).
2. Search for firebaseConfig. You will find a block that looks like this:

const firebaseConfig = {
    apiKey: "REPLACE_WITH_YOUR_API_KEY",
    authDomain: "REPLACE_WITH_YOUR_AUTH_DOMAIN",
    projectId: "REPLACE_WITH_YOUR_PROJECT_ID",
    storageBucket: "REPLACE_WITH_YOUR_STORAGE_BUCKET",
    messagingSenderId: "REPLACE_WITH_YOUR_MESSAGING_SENDER_ID",
    appId: "REPLACE_WITH_YOUR_APP_ID"
};

3. Replace the entire firebaseConfig block with the one you copied from Firebase in Step 4.
4. Save the file.
5. Repeat the same process for admin.html.

Step 7: Deploy the Site

You have several options for making the site accessible on the internet. The simplest free options are listed below.

Option A: GitHub Pages

1. Create a new repository on GitHub.
2. Upload index.html, admin.html, and icon.png to the repository.
3. Go to Settings > Pages.
4. Under Source, select your branch (usually main) and click Save.
5. Your site will be live at https://your-username.github.io/repository-name/.

Option B: Netlify (Drag and Drop)

1. Go to https://app.netlify.com/drop.
2. Drag the folder containing your three files onto the upload area.
3. Your site will be live instantly with a URL like https://random-name.netlify.app.

Option C: Any Web Host

Upload the three files to the public_html or www directory of your hosting provider via FTP or their file manager.

---

Using the Platform

For Readers

1. Open the public site URL (the link to index.html).
2. Browse posts displayed in a card grid. Click any card to read the full article.
3. Use the search bar at the top to filter posts by title or content.
4. Scroll to the bottom of any article to find the discussion section.
5. Type a comment in the text box and click Post Comment. You will be assigned a random guest identifier (for example, Guest-4827).
6. Click Reply on any comment to respond. Nested replies are supported.

For Administrators

1. Open the admin dashboard by navigating to admin.html (for example, https://your-site.com/admin.html).

2. Log in with the email and password you created in Step 5.

3. The dashboard has three sections:

   Posts -- View all published posts with their comment counts. Click Edit to modify a post or the trash icon to delete it.

   Discussion -- View and moderate all comments and replies across every post. Use the Delete buttons to remove individual comments, replies, or entire threads.

   Compose -- Write a new post. Enter a title in the large text field and your content in the editor below. Click Publish to make it live. If you are editing an existing post, click Clear to start a new draft instead.

4. Click Sign Out in the sidebar when finished.

---

Security Considerations

This project uses Firebase Firestore in test mode by default, which allows anyone to read and write data. Before launching publicly, update your Firestore security rules to restrict write access to authenticated admin users only.

A recommended starting set of rules:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /admin_posts/{document=**} {
      allow read: if true;
      allow write: if request.auth != null;
    }
    match /posts/{document=**} {
      allow read: if true;
      allow create: if true;
      allow update, delete: if request.auth != null;
    }
  }
}

To apply these rules:

1. Go to the Firebase console > Firestore Database > Rules.
2. Replace the existing rules with the block above.
3. Click Publish.

Additionally, consider the following:

• Keep your admin.html URL private or restrict access through additional measures.
• Use a strong, unique password for your admin Firebase account.
• Never commit your Firebase configuration with real credentials to a public repository if you are concerned about exposure (Firebase API keys are intended to be public, but your security rules are what actually protect your data).

---

Technologies Used

• HTML, CSS, JavaScript (no frameworks)
• Firebase Firestore (database)
• Firebase Authentication (admin login)
• Google Fonts (Inter, Playfair Display, JetBrains Mono)