Skip to content

Latest commit

 

History

History
156 lines (117 loc) · 7.34 KB

README.md

File metadata and controls

156 lines (117 loc) · 7.34 KB
Raw

Project Name

Description

This project is a social networking platform frontend built using JavaScript, HTML, and CSS. It interacts with a Django backend to provide features like user authentication, post creation, profile management, and more.

Table of Contents

Installation

To run this project locally, follow these steps:

  1. Clone the repository to your local machine: git clone https://github.com/AKKI0511/Social-Media.git

  2. Open the project directory: cd Social-Media

  3. run: python manage.py runserver

Usage

Features

  • New Post: Users can create new text-based posts by filling in content in a text area and submitting the post.
  • All Posts: View all posts from all users with the most recent posts displayed first, including username, post content, timestamp, and like count.
  • Profile Page: Clicking on a username displays the user's profile page with follower/following counts and all posts in reverse chronological order. Users can also follow/unfollow other users.
  • Following Page: View posts from users that the current user follows, with pagination for navigation.
  • Pagination: Display posts in sets of 10 per page with navigation buttons (Next/Previous) for easy browsing.
  • Edit Post: Users can edit their own posts, replacing the content with a text area for editing and saving changes without page reload.
  • Like/Unlike: Allow users to like/unlike posts with asynchronous updating of like counts using JavaScript fetch calls.

Functions Overview

Index.js

document.addEventListener('DOMContentLoaded', () => { ... })

  • Description: Listens for the DOMContentLoaded event and initializes the application.
  • Purpose: Ensures the JavaScript code runs after the HTML content is fully loaded.

createPostSection()

  • Description: Displays the new post creation section and hides other sections.
  • Purpose: Provides a way for users to create new posts.

showSection(sectionId, pageNum)

  • Description: Displays the specified section and hides others based on sectionId and pageNum.
  • Purpose: Handles navigation between different sections of the application.

fetchUserProfile()

  • Description: Fetches and displays the current user's profile information.
  • Purpose: Shows user-related information such as followers, following, and user posts.

fetchPosts(sectionId, pageNum)

  • Description: Fetches and displays posts for the specified section and page number.
  • Purpose: Retrieves posts data for all-post and Following sections for display.

displayPosts(data, sectionId)

  • Description: Displays posts in the specified section based on fetched data.
  • Purpose: Renders post elements dynamically based on fetched post data.

createPostElement(post, current_user, sectionId, pageNum)

  • Description: Creates an HTML element for a post and adds necessary event listeners.
  • Purpose: Generates HTML elements for each post to display on the UI.

showUserProfile(username)

  • Description: Shows user profile information for the specified username.
  • Purpose: Displays user-related information and posts for a particular user.

createUserProfileElement(profile)

  • Description: Creates an HTML element for user profile and handles follow/unfollow functionality.
  • Purpose: Generates user profile information and handles follow/unfollow actions.

createFollowButton(profile)

  • Description: Creates a Follow/Unfollow button for user profiles.
  • Purpose: Provides a way for users to follow or unfollow other users.

displayUserPosts(posts, isCurrentUser)

  • Description: Displays posts for a user profile, includes edit button if it's the current user's profile.
  • Purpose: Renders posts for a user's profile and enables editing for the current user's posts.

handleLikesUpdate(likes, sectionId, likelinkid, pageNum)

  • Description: Handles liking/unliking a post and updates the UI with the new like count.
  • Purpose: Allows users to like or unlike a post and updates the UI accordingly.

toggleFollow(username)

  • Description: Toggles follow/unfollow for a user profile.
  • Purpose: Enables users to follow or unfollow other users from their profiles.

addPaginationButton(label, sectionId, pageNum)

  • Description: Adds pagination buttons for navigating between pages of posts.
  • Purpose: Facilitates navigation between pages of posts with pagination buttons.

toggleHeart(sectionId, likelinkid, pageNum)

  • Description: Toggles the heart icon for liking/unliking a post and updates the like count.
  • Purpose: Handles the UI interaction for liking or unliking a post.

hideAllSections()

  • Description: Hides all sections of the application.
  • Purpose: Ensures only the relevant section is displayed based on user interactions.

getCookie(name)

  • Description: Retrieves the value of a cookie by name.
  • Purpose: Helps in obtaining the CSRF token for making authenticated requests.

EditButton(post, element, cnt)

  • Description: Creates an Edit button for a post and handles post editing functionality.
  • Purpose: Enables users to edit their posts directly from the UI.

Views.py

index(request)

  • Description: Renders the index.html template with a new form instance.
  • Purpose: Displays the main page of the application with a form for creating new posts.

login_view(request)

  • Description: Handles user login functionality, authenticates users, and redirects them to the index page upon successful login.
  • Purpose: Allows users to log in to the application securely.

logout_view(request)

  • Description: Logs out the currently authenticated user and redirects them to the index page.
  • Purpose: Provides a way for users to log out of the application.

register(request)

  • Description: Handles user registration, creates a new user account, and logs in the user upon successful registration.
  • Purpose: Enables new users to register for an account and access the application.

new_post(request)

  • Description: Allows authenticated users to create new posts by handling form submissions.
  • Purpose: Provides a form for users to create and submit new posts.

edit_post(request, post_id)

  • Description: Handles the editing of a specific post identified by post_id, including updating the post content and handling likes.
  • Purpose: Allows users to edit their posts and interact with post likes.

my_profile(request)

  • Description: Fetches and returns the profile information of the currently authenticated user.
  • Purpose: Displays the profile information of the logged-in user.

profile(request, username)

  • Description: Handles user profile views, including following/unfollowing users and fetching profile information.
  • Purpose: Provides functionality to view and interact with user profiles.

all_posts(request, page_number)

  • Description: Retrieves and paginates all posts in the system, ordered by timestamp.
  • Purpose: Displays a paginated list of all posts in the application.

following(request, page_number)

  • Description: Retrieves and paginates posts from users that the current user is following.
  • Purpose: Displays a paginated list of posts from users the logged-in user follows.