Social Media Dashboard

Written by

in

This application will simulate fetching and displaying user data from a social media platform. We’ll use Flask to serve the web pages.

Step 1: Set Up the Project Structure

Create a new directory for your project and create the following files and folders:

arduinoCopy codesocial_media_dashboard/
│
├── app.py
├── templates/
│   └── dashboard.html
└── static/
└── styles.css

Step 2: Create the Flask Application

Create a file named app.py and add the following code:

pythonCopy codefrom flask import Flask, render_template

app = Flask(__name__)

# Sample data representing social media stats
user_data = {
"username": "john_doe",
"followers": 1200,
"following": 300,
"posts": 50,
"likes": 2500,}

@app.route('/')
def dashboard():
return render_template('dashboard.html', user=user_data)
if __name__ == "__main__":
app.run(debug=True)

Step 3: Create the HTML Template

Create a file named dashboard.html inside the templates folder and add the following code:

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;Social Media Dashboard&lt;/title&gt;
&lt;link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"&gt;</head>
<body>
&lt;div class="container"&gt;
    &lt;h1&gt;Social Media Dashboard&lt;/h1&gt;
    &lt;h2&gt;User: {{ user.username }}&lt;/h2&gt;
    &lt;div class="stats"&gt;
        &lt;div class="stat"&gt;
            &lt;h3&gt;Followers&lt;/h3&gt;
            &lt;p&gt;{{ user.followers }}&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="stat"&gt;
            &lt;h3&gt;Following&lt;/h3&gt;
            &lt;p&gt;{{ user.following }}&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="stat"&gt;
            &lt;h3&gt;Posts&lt;/h3&gt;
            &lt;p&gt;{{ user.posts }}&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="stat"&gt;
            &lt;h3&gt;Likes&lt;/h3&gt;
            &lt;p&gt;{{ user.likes }}&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</body>
</html>

Step 4: Create the CSS Styles

Create a file named styles.css inside the static folder and add the following code:

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

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

h1 {
text-align: center;}

.stats {
display: flex;
justify-content: space-between;
margin-top: 20px;}

.stat {
background: #e2e2e2;
border-radius: 5px;
padding: 10px;
text-align: center;
flex: 1;
margin: 5px;}

Step 5: Run the Application

Open your terminal (or command prompt).
Navigate to the directory where you saved the project.
Run the application using the command:bashCopy codepython app.py
Open your web browser and go to http://127.0.0.1:5000/.

Comments

Leave a Reply Cancel reply

More posts