Social Media Dashboard

—

by

in React JS Projects

Sample Social Media Dashboard

1. HTML 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>
    <div class="dashboard">
        <h1>Social Media Dashboard</h1>
        <div id="posts"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. CSS Styles (styles.css)

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

.dashboard {
    max-width: 800px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.post {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}

.post:last-child {
    border-bottom: none;
}

.post h2 {
    margin: 0;
    font-size: 18px;
}

.post p {
    margin: 5px 0;
}

.post .engagement {
    color: #888;
}

3. JavaScript Logic (script.js)

const postsContainer = document.getElementById('posts');

// Mock API data
const mockApiData = [
    {
        id: 1,
        title: "Post One",
        content: "This is the content of post one.",
        likes: 25,
        shares: 5
    },
    {
        id: 2,
        title: "Post Two",
        content: "This is the content of post two.",
        likes: 15,
        shares: 3
    },
    {
        id: 3,
        title: "Post Three",
        content: "This is the content of post three.",
        likes: 30,
        shares: 10
    }
];

// Function to render posts
function renderPosts(posts) {
    posts.forEach(post => {
        const postDiv = document.createElement('div');
        postDiv.classList.add('post');
        postDiv.innerHTML = `
            <h2>${post.title}</h2>
            <p>${post.content}</p>
            <div class="engagement">
                <span>${post.likes} Likes</span> | 
                <span>${post.shares} Shares</span>
            </div>
        `;
        postsContainer.appendChild(postDiv);
    });
}

// Simulate fetching data from an API
function fetchPosts() {
    // Simulating an API call with setTimeout
    setTimeout(() => {
        renderPosts(mockApiData);
    }, 1000);
}

// Initialize the dashboard
fetchPosts();

Explanation

HTML: The HTML file sets up the structure for the dashboard, including a title and a container for the posts.
CSS: The styles give the dashboard a clean, modern look. You can adjust colors and spacing to fit your needs.
JavaScript:
- A mock data array simulates posts you’d get from a social media API.
- The renderPosts function dynamically creates and displays each post.
- fetchPosts simulates an API call using setTimeout to delay rendering.

Comments

Leave a Reply Cancel reply