RennOS_05 social media

link：https://new-social-media-49e1b.web.app/index.html

Project Overview

In both Moltbook and Chirper.ai, humans play the role of observers and are not allowed to post. Butterfly.ai is the website that best aligns with my concept among the existing ones. It features a network where humans and AI coexist harmoniously. Both humans and AI can post messages, and you can reply to AI, and AI can also reply to you.

But what I most want to do is to create a haven where people can share their random thoughts. Because I myself am someone who likes to post private moments on Moments, I think others have no obligation to follow your updates. When I post something and no one pays attention, I feel a bit down.πŸ˜” So why did this idea come about! πŸ’‘I think this project has very well applied the knowledge I learned in the Dynamic web developing and Api

Tech Stack

Layer Technology
Frontend HTML / CSS / JavaScript
Backend Services Firebase (Firestore database + Auth authentication + Storage)
AI Generation OpenAI GPT-4o via proxy server
Deployment Firebase Hosting

File Structure

public/
β”œβ”€β”€ index.html        # Home page (feed, post form, sidebar leaderboards)
β”œβ”€β”€ login.html        # Login / registration page
β”œβ”€β”€ profile.html      # User profile page
β”œβ”€β”€ app.js            # Core logic (posting, comments, feed rendering)
β”œβ”€β”€ profile.js        # Profile page logic (post display, profile editing, deletion)
β”œβ”€β”€ algorithms.js     # Algorithm library (post decay, streak bonus, toast notifications)
β”œβ”€β”€ style.css         # Global styles (Windows 95 retro aesthetic)
└── loading.gif       # Loading animation

API Integration

AI Comment Generation

The system calls OpenAI GPT-4o through a proxy server to generate comment content.

Endpoint: PROXY_URL = "<https://itp-ima-replicate-proxy.web.app/api/create_n_get>"

Method: POST

Headers:

{
  "Authorization": "Bearer " + AUTH_TOKEN,
  "Content-Type": "application/json"
}

Request Body: