## 1. Overview

Pixogram is a simplified Instagram clone frontend. Users can register, log in, view a feed, create posts (image + caption), view/edit profiles, follow/unfollow users, view follower/following lists, and like/comment on posts. It uses HTML, CSS (Tailwind, Bootstrap), and JavaScript (ES Modules, jQuery, Axios). Firebase handles authentication, and it communicates with a separate backend API for data.

## 2. Project Structure

*   `/`: `index.html` (main feed).
*   `pages/`: HTML files for different views (`login.html`, `profile.html`, etc.).`*   `scripts/`: JavaScript logic.
    *   Page-specific scripts (`index.js`, `profile.js`, etc.).
    *   `firebase-login.js`: Firebase setup and auth logic.
    *   `app.js`: Contains potentially unused/duplicated search, comment, and follow logic.
    *   `shared/modalUtils.js`: Manages post detail, edit, and confirmation modals, including related actions (liking, commenting, editing, deleting within modals) and utilities like `formatTimeAgo`.
*   `styles/`: `style.css` for custom styles.
*   `public/`: Static assets (images, icons).

## 3. Core Features

### 3.1. Authentication (`firebase-login.js`, `signup.js`)

*   **Signup/Login:** Handled via `pages/signup.html` (sends data to backend) and `pages/login.html` (uses Firebase SDK via `firebase-login.js`).
*   **Auth State:** `firebase-login.js` uses `onAuthStateChanged` to manage login status, store tokens/IDs in `localStorage`, update UI, and handle protected routes.

### 3.2. Timeline Feed (`index.js`)

*   `index.html` displays posts from `/posts/feed`.
*   `renderTimelinePosts` creates post elements (user info, image, caption, actions, counts, timestamp). Images are lazy-loaded.
*   Includes inline comment forms and opens the Post Detail Modal on comment icon click.

### 3.3. Posts (Creation, Viewing, Interaction)

*   **Creation (`post.js`):** `pages/post.html` allows image/caption uploads via `FormData` to `/posts/create`.
*   **Viewing (Modal - `modalUtils.js`):** `openPostDetailModal` shows a detailed post view with image, user info, caption, actions, counts, timestamp, and comments.
*   **Liking (`index.js`, `modalUtils.js`):** Like buttons (`handleLikeToggle`, `handleModalLikeToggle`) update UI optimistically and call `/posts/{postId}/like`.
*   **Commenting (`index.js`, `modalUtils.js`):** Comments added via inline feed form (`handleInlinePostComment`) or modal form (`handlePostComment`), both POSTing to `/posts/{postId}/comments`. The modal fetches/renders comments (`fetchAndRenderComments`, `renderComments`) and allows comment deletion (`handleDeleteComment`).
*   **Editing/Deleting (Modal - `modalUtils.js`):** Post owner can edit captions (`handleEditPost` -> PATCH `/posts/{postId}/update`) or delete posts (`handleDeletePost` -> DELETE `/posts/{postId}`) via the modal.

### 3.4. User Profiles (`profile.js`, `edit-profile.js`)

*   **Viewing (`profile.js`):** `pages/profile.html` displays profile info (`/users/profile/{username}`) and user's posts (`/posts/user/{username}`). Shows "Edit Profile" or "Follow/Unfollow" buttons based on ownership and follow status (`/users/isfollowing/{username}`). Post grid items open the Post Detail Modal.
*   **Editing (`edit-profile.js`):** `pages/edit-profile.html` allows logged-in users to update profile details and avatar via PATCH to `/users/profile`.

### 3.5. Following System (`profile.js`, `follow-list.js`)

*   Follow/Unfollow buttons on profiles and lists (`handleFollowToggle`) call `/users/{username}/follow` or `/users/{username}/unfollow` and update UI.
*   `pages/follow-list.html` (`follow-list.js`) displays follower/following lists fetched from `/users/{username}/followers` or `/users/{username}/following`.

### 3.6. Search (Page-Specific Scripts)

*   Search (`setupSearch`, `performSearch`, `renderSearchResults`) is implemented independently in `index.js`, `profile.js`, `post.js`, `edit-profile.js`, and `follow-list.js`, attached to the navbar input.
*   Uses debounced input to query `/users/search` and displays results in a dropdown.

## 4. Frontend Technologies

*   **HTML5, CSS3** (Tailwind CSS, Bootstrap 5, Custom CSS)
*   **JavaScript** (ES6+ Modules, jQuery)
*   **Axios** (HTTP requests)
*   **Firebase SDK** (Authentication)
*   **Libraries:** Font Awesome, Toastify.js, Google Fonts

## 5. Backend Interaction

*   Relies on a backend API (assumed at `http://192.168.1.7:8000`).
*   Uses Axios for HTTP requests (GET, POST, PATCH, DELETE).
*   Sends Firebase ID token as `Bearer` token for authentication.
*   Exchanges data mainly as JSON, uses `FormData` for image uploads.

## 6. Key Scripts Summary

*   **`firebase-login.js`:** Firebase setup, auth state management.
*   **`app.js`:** Contains potentially unused/duplicated logic for search, comments, follows.
*   **`modalUtils.js`:** Core logic for post detail, edit, confirmation modals and related interactions (comments, likes, edits, deletes within modals).
*   **Page-Specific Scripts:** Handle logic for their respective pages, often importing from `firebase-login.js` and `modalUtils.js`. Include duplicated search logic and UI helpers.

## 7. Conclusion

Pixogram's frontend offers core social media features using modern web technologies. It's modular, with `firebase-login.js` and `modalUtils.js` centralizing key functionalities. Some features like search are duplicated across scripts. It interacts heavily with a backend API for data persistence.