Social Media Dashboard - Final Project

Screenshot:-

Project Overview

This project involves building a fully functional social media dashboard that includes user authentication, profile management, post creation, interactions, and notifications. The dashboard will have a modern, user-friendly UI with interactive features and CSS animations to enhance the user experience. By the end of this project, you'll have created a comprehensive social media dashboard that allows users to log in, manage their profiles, create posts, interact with other users' posts, and receive notifications.

Activity 1: Setting Up the Project

Task 1: Initialize the Project

HTML: Basic Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Media Dashboard</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Social Media Dashboard</h1>
    </header>
    <main id="dashboard">
        <!-- User Info Sidebar -->
        <aside id="sidebar"></aside>
        <!-- Main Content Area for Posts and Forms -->
        <section id="content"></section>
    </main>
    <footer>
        <p>&copy; 2024 Social Media Dashboard</p>
    </footer>
</body>
</html>

Explanation:

This HTML structure includes a header, a main content area split into a sidebar and a main content section, and a footer.
The sidebar will display user information, and content will hold the posts and forms for creating new posts.

Task 2: Basic CSS Styling

CSS: Basic Styling

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 1rem;
    text-align: center;
}

main {
    display: flex;
    flex-grow: 1;
}

#sidebar {
    width: 25%;
    padding: 1rem;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#content {
    flex-grow: 1;
    padding: 2rem;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem;
    position: relative;
    bottom: 0;
    width: 100%;
}

.container {
    background-color: white;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

Explanation:

This CSS styles the layout, ensuring that the dashboard has a sidebar for user info and a main area for content.
The design is clean and modern, with consistent spacing, shadows, and rounded corners.

Activity 2: User Authentication

HTML: Login and Registration Forms

<div class="container" id="auth-container">
    <h2>Register</h2>
    <form id="register-form">
        <label for="reg-username">Username:</label>
        <input type="text" id="reg-username" required>
        <label for="reg-email">Email:</label>
        <input type="email" id="reg-email" required>
        <label for="reg-password">Password:</label>
        <input type="password" id="reg-password" required>
        <button type="submit">Register</button>
    </form>

    <h2>Login</h2>
    <form id="login-form">
        <label for="login-username">Username:</label>
        <input type="text" id="login-username" required>
        <label for="login-password">Password:</label>
        <input type="password" id="login-password" required>
        <button type="submit">Login</button>
    </form>
</div>

Explanation:

The registration form collects a username, email, and password.
The login form collects the username and password for user authentication.

Task 4: User Authentication Script

JavaScript: Registration and Login Handling

document.getElementById('register-form').addEventListener('submit', function(event) {
    event.preventDefault();

    const username = document.getElementById('reg-username').value;
    const email = document.getElementById('reg-email').value;
    const password = document.getElementById('reg-password').value;

    if (username && email && password) {
        const user = {
            username: username,
            email: email,
            password: password,
            profilePic: 'default.jpg'
        };
        localStorage.setItem(username, JSON.stringify(user));
        alert('Registration successful!');
    } else {
        alert('Please fill out all fields.');
    }
});

document.getElementById('login-form').addEventListener('submit', function(event) {
    event.preventDefault();

    const username = document.getElementById('login-username').value;
    const password = document.getElementById('login-password').value;

    const user = JSON.parse(localStorage.getItem(username));
    if (user && user.password === password) {
        sessionStorage.setItem('loggedInUser', username);
        document.getElementById('auth-container').style.display = 'none';
        document.getElementById('dashboard').style.display = 'flex';
        loadUserProfile();
    } else {
        alert('Invalid username or password.');
    }
});

function loadUserProfile() {
    const loggedInUser = sessionStorage.getItem('loggedInUser');
    const user = JSON.parse(localStorage.getItem(loggedInUser));

    document.getElementById('sidebar').innerHTML = `
        <h3>${user.username}</h3>
        <p>${user.email}</p>
        <img src="${user.profilePic}" alt="Profile Picture">
        <button onclick="logout()">Logout</button>
    `;
}

function logout() {
    sessionStorage.removeItem('loggedInUser');
    location.reload();
}

Explanation:

The registration script saves the user's information to localStorage.
The login script checks the credentials against localStorage and, if valid, stores the logged-in user in sessionStorage.
The loadUserProfile function displays the logged-in user's information in the sidebar.

Activity 3: User Profiles

Task 5: User Profile Page

HTML: Profile Page

<div class="container" id="profile-container">
    <h3>Profile Information</h3>
    <form id="profile-form">
        <label for="profile-username">Username:</label>
        <input type="text" id="profile-username" required>
        <label for="profile-email">Email:</label>
        <input type="email" id="profile-email" required>
        <label for="profile-pic">Profile Picture:</label>
        <input type="file" id="profile-pic">
        <button type="submit">Update Profile</button>
    </form>
</div>

Explanation:

The profile page allows the user to update their username, email, and profile picture.

Task 6: Profile Update Script

JavaScript: Update User Profile

document.getElementById('profile-form').addEventListener('submit', function(event) {
    event.preventDefault();

    const username = document.getElementById('profile-username').value;
    const email = document.getElementById('profile-email').value;
    const profilePicFile = document.getElementById('profile-pic').files[0];

    const loggedInUser = sessionStorage.getItem('loggedInUser');
    let user = JSON.parse(localStorage.getItem(loggedInUser));

    user.username = username;
    user.email = email;
    if (profilePicFile) {
        user.profilePic = URL.createObjectURL(profilePicFile);
    }

    localStorage.setItem(loggedInUser, JSON.stringify(user));
    alert('Profile updated successfully!');
    loadUserProfile();
});

Explanation:

This script updates the user's profile information in localStorage and refreshes the profile displayed in the sidebar.

Activity 4: Creating and Displaying Posts

Task 7: Post Creation Form

HTML: Post Form

<div class="container">
    <h3>Create a New Post</h3>
    <form id="post-form">
        <textarea id="post-text" placeholder="What's on your mind?" required></textarea>
        <input type="file" id="post-image">
        <button type="submit">Post</button>
    </form>
</div>
<div id="post-feed" class="container"></div>

Explanation:

This form allows users to create a new post with text and an optional image.

Task 8: Post Creation Script

JavaScript: Handle Post Creation

let posts = JSON.parse(localStorage.getItem('posts')) || [];

document.getElementById('post-form').addEventListener('submit', function(event) {
    event.preventDefault();

    const postText = document.getElementById('post-text').value;
    const postImageFile = document.getElementById('post-image').files[0];

    const loggedInUser = sessionStorage.getItem('loggedInUser');
    const user = JSON.parse(localStorage.getItem(loggedInUser));

    const newPost = {
        username: user.username,
        text: postText,
        image: postImageFile ? URL.createObjectURL(postImageFile) : null,
        likes: 0,
        comments: []
    };

    posts.push(newPost);
    localStorage.setItem('posts', JSON.stringify(posts));
    displayPosts();
});

function displayPosts() {
    const postFeed = document.getElementById('post-feed');
    postFeed.innerHTML = '';

    posts.forEach((post, index) => {
        postFeed.innerHTML += `
            <div class="post">
                <h4>${post.username}</h4>
                <p>${post.text}</p>
                ${post.image ? `<img src="${post.image}" alt="Post Image">` : ''}
                <button onclick="likePost(${index})">Like (${post.likes})</button>
                <div class="comments">
                    <input type="text" placeholder="Add a comment..." onkeypress="addComment(event, ${index})">
                    <ul>
                        ${post.comments.map(comment => `<li>${comment}</li>`).join('')}
                    </ul>
                </div>
            </div>
        `;
    });
}

Explanation:

The script creates a new post object with the logged-in user's username, post content, and image, and adds it to an array of posts.
The displayPosts function dynamically displays the posts in the feed.

Activity 5: Post Interactions

Task 9 & 10: Like and Comment on Posts

JavaScript: Post Interactions

function likePost(index) {
    posts[index].likes++;
    localStorage.setItem('posts', JSON.stringify(posts));
    displayPosts();
}

function addComment(event, index) {
    if (event.key === 'Enter' && event.target.value.trim() !== '') {
        posts[index].comments.push(event.target.value.trim());
        localStorage.setItem('posts', JSON.stringify(posts));
        displayPosts();
    }
}

Explanation:

The likePost function increments the like count for the selected post.
The addComment function allows users to add comments to posts, which are displayed beneath the post.

Activity 6: Notifications

Task 11 & 12: Notification System

JavaScript: Notification System

function displayNotifications() {
    const loggedInUser = sessionStorage.getItem('loggedInUser');
    const userNotifications = posts.filter(post => post.username === loggedInUser)
                                   .flatMap(post => post.comments.map(comment => `New comment: ${comment}`));

    const notificationContainer = document.createElement('div');
    notificationContainer.id = 'notifications';
    notificationContainer.innerHTML = userNotifications.map(notification => `<p>${notification}</p>`).join('');

    document.getElementById('sidebar').appendChild(notificationContainer);
}

setInterval(displayNotifications, 10000); // Check for notifications every 10 seconds

Explanation:

This script generates notifications based on new comments on the logged-in user's posts and displays them in the sidebar.
The setInterval function checks for new notifications every 10 seconds.

Activity 7: Enhancing the UI

Task 13 & 14: UI Enhancements with CSS

CSS: UI Enhancements

.post {
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.post h4 {
    margin: 0 0 1rem 0;
}

.post img {
    max-width: 100%;
    border-radius: 5px;
    margin: 1rem 0;
}

.comments {
    margin-top: 1rem;
}

.comments input {
    width: 100%;
    padding: 0.5rem;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.comments ul {
    margin-top: 1rem;
    list-style: none;
    padding: 0;
}

.comments li {
    background-color: #f4f4f4;
    padding: 0.5rem;
    border-radius: 5px;
    margin-bottom: 0.5rem;
}

#notifications {
    margin-top: 2rem;
    padding: 1rem;
    background-color: #fffae6;
    border: 1px solid #ffd700;
    border-radius: 5px;
}

Explanation:

The UI enhancements include a visually appealing layout for posts, comments, and notifications, with shadows, rounded corners, and responsive design elements.
Each user's post can be distinguished with unique styles, making the dashboard more personalized.

Here End's our 30 Day's Javascript Challenge.
Thanks for Following me with my Challenge.

Happy Coding!!!

Day 30: Final Project - Social Media Dashboard with Full Features

Activity 1: Setting Up the Project

Task 1: Initialize the Project

Task 2: Basic CSS Styling

Activity 2: User Authentication

Task 4: User Authentication Script

Activity 3: User Profiles

Task 5: User Profile Page

Task 6: Profile Update Script

Activity 4: Creating and Displaying Posts

Task 7: Post Creation Form

Task 8: Post Creation Script

Activity 5: Post Interactions

Task 9 & 10: Like and Comment on Posts

Activity 6: Notifications

Task 11 & 12: Notification System

Activity 7: Enhancing the UI

Task 13 & 14: UI Enhancements with CSS

Comments

More from this blog

Day 29: Project 6 - Social Media Dashboard

Building a Simple E-commerce Website with JavaScript: A Step-by-Step Guide

Task Management Using Html,css and Javascript

Chat Application Using Web Socket

Command Palette

Activity 1: Setting Up the Project

Task 1: Initialize the Project

Task 2: Basic CSS Styling

Activity 2: User Authentication

Task 3: Login and Registration Forms

Task 4: User Authentication Script

Activity 3: User Profiles

Task 5: User Profile Page

Task 6: Profile Update Script

Activity 4: Creating and Displaying Posts

Task 7: Post Creation Form

Task 8: Post Creation Script

Activity 5: Post Interactions

Task 9 & 10: Like and Comment on Posts

Activity 6: Notifications

Task 11 & 12: Notification System

Activity 7: Enhancing the UI

Task 13 & 14: UI Enhancements with CSS

Comments

More from this blog