SocialApe

A full-stack social media application featuring user authentication, post creation, social interactions, profile management, and real-time notifications. The project is designed with a serverless backend powered by Firebase Cloud Functions and Firestore, and a responsive frontend built using React and Redux.

---

Features

• User Authentication: Secure user registration and login utilizing hashed passwords (bcrypt) and JSON Web Tokens (JWT) for authentication.
• Post Management: Creating, editing, and deleting posts ("screams").
• Social Interactions: Real-time liking/unliking of posts, posting comments, and editing/deleting comments.
• User Profiles: Custom profiles including profile image uploads, banner image uploads, bio details, location settings, and custom URLs.
• Following System: Follow and unfollow capabilities between users, including follower and following counter synchronizations.
• Real-Time Notification System: Database triggers generate real-time user notifications on new likes, comments, and follows.
• Performance Optimizations: Batched database reads (using Firestore db.getAll) to minimize query latency and database costs.

---

Technology Stack

Backend

• Node.js: Runtime environment.
• Express: Router and request pipeline management.
• Firebase Cloud Functions (v2): Serverless endpoint hosting.
• Cloud Firestore: Flexible, scalable NoSQL document database.
• Firebase Storage: Object storage for user uploads (profile images and banners).
• JWT (JsonWebToken): Authentication token generation and validation.
• Bcryptjs: Secure password hashing.
• Busboy: Node.js parser for multipart form-data.

Frontend

• React (v16.8): User interface library.
• Redux: Global state management.
• Axios: HTTP client configuration with request/response interceptors.
• Material-UI (v3): Responsive visual components and styling.
• Day.js: Date formatting and relative-time calculations.

---

System Architecture

Backend Functions

The backend utilizes Firebase Gen 2 Cloud Functions and registers an Express application onto a central HTTPS function:

• /signup (POST): Validates credentials, hashes passwords, generates a JWT, and creates user document records.
• /login (POST): Validates email/password and returns a JWT.
• /screams (GET): Fetches screams sorted by creation date with batched user profiles.
• /scream (POST): Creates a new scream document (requires authentication).
• /scream/:screamId (GET): Retrieves a single scream, its author, and comments in a batched single-trip database lookup.
• /scream/:screamId/comment (POST): Adds comments to a scream and increments comment counters (requires authentication).
• /scream/:screamId/like (GET) & /scream/:screamId/unlike (GET): Likes/unlikes screams and tracks count updates (requires authentication).
• /user/image (POST) & /user/banner (POST): Uploads images to Firebase Storage, updates profile documents, and unlinks temporary system files safely (requires authentication).

Firestore Database Schema

The database uses five collections:

• users: Documents identified by unique user handles containing user metrics, credentials, and image locations.
• screams: Post data containing body text, authors, creation timestamps, and social counts.
• comments: Comments linked to screams by parent ID.
• likes: Association mappings mapping handles to scream IDs.
• followers: Mapping documents recording follower-following relationships.
• notifications: Notifications generated by firestore database event triggers.

---

Installation & Configuration

Prerequisites

• Node.js (v22 or higher recommended)
• Firebase CLI (npm install -g firebase-tools)

Backend Setup

1. Navigate to the functions directory:

   cd functions

2. Install dependencies:

   npm install

3. Set environment variables using Google Secret Manager:

   firebase secrets:set JWT_SECRET="your-secret-key"
   firebase secrets:set STORAGE_BUCKET="your-storage-bucket-url"

Frontend Setup

1. From the project root, install dependencies:

   npm install

2. Create a .env file in the root directory and add your Firebase credentials:

   REACT_APP_FIREBASE_API_KEY=your_api_key
   REACT_APP_FIREBASE_AUTH_DOMAIN=your_auth_domain
   REACT_APP_FIREBASE_PROJECT_ID=your_project_id
   REACT_APP_FIREBASE_STORAGE_BUCKET=your_storage_bucket
   REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
   REACT_APP_FIREBASE_APP_ID=your_app_id
   REACT_APP_API_URL=your_api_base_url

Running the Application Locally

1. Start the backend emulators:

   npm run serve --prefix functions

2. In another terminal, start the React application:

   npm start

---

Deployment

Deploy the Cloud Functions and Firestore triggers:

firebase deploy --only functions