Open In App

Social Media Dashboard With NextJS

Last Updated : 03 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Social media management plays a very major role in the success of businesses, influencers, and organizations alike. With the rapidly growing number of platforms and the need for real-time engagement, having a centralized hub to monitor and manage social media activities is important. In this article, you will learn to build a Social Media Dashboard With Next.js.

Project Preview:

Screenshot-2024-02-15-223824
Social Media Dashboard With Next.js

Prerequisites:

Approach

  1. Setting up Next.js Environment: Install Node.js and set up a Next.js project using create-next-app.
  2. Implement Authentication: Integrate authentication using NextAuth.js and OAuth for social media platforms.(Optional for now).
  3. Connect Social Media APIs: Utilize APIs of social media platforms for fetching data, posting content, and managing accounts.(Further Enhancement work)
  4. Develop Dashboard Features: Building components for overview of the growth from different social media platform comparing all together in a single place.

Steps to Create Social Media Dashboard With Next.js

Step 1. Set up Next.js project using the command:

npx create-next-app social-media-dashboard

The create-next-app command will sets up everything automatically for you, and on the terminal you will see this,

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

Just go for yes on every option otherwise keep it default and hit enter.

Step 2. Navigate to the project folder using:

cd social-media-dashboard

Project Structure

Screenshot-2024-02-12-171804
Project Structure
You can put any logo you need in the public\assets directory

Dependencies

After following the installation steps the dependencies in package.json file will be somewhat like this:

 "dependencies": {
        "@next/font": "13.1.6",
        "eslint": "8.33.0",
        "eslint-config-next": "13.1.6",
        "next": "13.1.6",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "standard": "^17.0.0"
  }

Example: Here is the example code to create a dashboard using Next.js.

JavaScript 
// src\components\Card.jsx

import Image from 'next/image'
import React, { useEffect, useState } from 'react'
import CountFollowers from './CountFollowers'

const Card = ({ icon, mediaName, userName,
    followers, type, isUp, recentNotify, arrow }) => {
    return (
        <div className='relative flex flex-col items-center
         dark:bg-card-light dark:text-text-light 
         dark:hover:bg-[#dadeeb] hover:bg-[#45455c]
          bg-card-dark text-text-dark h-auto rounded 
          overflow-hidden transition-colors ease-linear 
          duration-300  w-full cursor-pointer  '>
            <span className={`${mediaName === 'facebook' ?
                'bg-fb-color' : ''} ${mediaName === 'twitter' ?
                    'bg-tw-color' : ''} ${mediaName === 'instagram' ?
                        'bg-gradient-to-r from-ig-left-gradient to-ig-right-gradient'
                        : ''} ${mediaName === 'youtube' ? 'bg-yt-color' : ''}
                   h-[4px] w-full block absolute top-0`} />
            <div className='flex mt-8 mb-7'>
                <Image src={icon} height={20} width={20}
                    alt={`icon_${mediaName}`} />
                <p className='ml-2 font-semibold'>@{userName}</p>
            </div>
            <div className='text-center'>
                <CountFollowers followers={followers} card={true} />
                <p className='uppercase space tracking-[.25em] mt-2'>{type}</p>
            </div>
            {/* <span className='mb-6 mt-7' > */}
            <p className={`${isUp ? 'text-text-green-arrow'
                : 'text-text-red-arrow'} mb-6 mt-7`}>
                <Image src={arrow} width={12} height={15}
                    className='inline-block' alt='arrow_stat' />
                {recentNotify}Today</p>
            {/* </span> */}
        </div>
    )
}

export default Card
JavaScript 
// src\components\CountFollowers.jsx

import React, { useEffect, useLayoutEffect, useState } from 'react'

const CountFollowers = ({ followers, card }) => {
    const [counter, setCounter] = useState(0)

    let animInterval;

    function startAnim() {
        animInterval = setInterval(animNumValue, 15, counter, followers);
    }

    function animNumValue(num, newValue) {
        let valor = num
        let diferencia = newValue - valor;

        if (counter >= followers) return
        if (diferencia > 1500) {
            valor += 519;
        } else if (diferencia > 400) {
            valor += 200;
        } else if (diferencia > 200) {
            valor += 100;
        } else if (diferencia > 100) {
            valor += 20;
        }
        else {
            valor++;
        }
        setCounter(valor)
    }

    useEffect(() => {
        if (!(counter >= followers)) startAnim()
        return (() => {
            clearInterval(animInterval)
        })
    }, [counter])
    return (
        <p className={`${card ? 'text-[4rem] tracking-[3px]'
            : 'text-4xl md:text-4xl '} font-bold dark:text-titles-light
        dark:group-hover:text-white text-titles-dark `}>
            {`${counter.toString().replace('000', "k")}`}</p>
    )
}

export default CountFollowers
JavaScript 
// src\components\DetailsCard.jsx

import Image from "next/image";
import React from "react";
import CountFollowers from "./CountFollowers";

const DetailsCard = ({
    mediaName,
    icon,
    arrow,
    isUp,
    sectionName,
    state,
    percentage,
}) => {
    return (
        <div className="flex flex-col items-center justify-center
    dark:bg-card-light dark:text-text-light bg-card-dark text-text-dark
    dark:hover:bg-[#dadeeb] hover:bg-[#45455c] cursor-pointer h-auto 
    rounded overflow-hidden transition-colors ease-linear duration-300
        gap-10 w-full px-8 py-6">
            <div className="flex justify-between w-full items-center">
                <p className="font-semibold">{sectionName}</p>
                <Image src={icon} width={22} height={22}
                    alt={`${mediaName}_icon`} />
            </div>
            <div className="flex justify-between w-full items-center">
                <CountFollowers followers={state} card={false} />
                <div className={`${isUp ?
                    "text-text-green-arrow" : "text-text-red-arrow"}`}>
                    <Image src={arrow} width={12} height={15}
                        className="inline-block" alt="arrow-stat" />
                    {percentage}
                </div>
            </div>
        </div>
    );
};

export default DetailsCard;
JavaScript 
// src\components\Header.jsx

import React from 'react'
import Layout from './Layout'
import ToogleTheme from './ToogleTheme'

const Header = () => {
    return (
        <header className='dark:bg-header-light dark:text-text-light
         bg-header-dark text-text-dark w-full h-64 md:h-[280px] 
         rounded-b-3xl pt-10'>
            <Layout>
                <div className='flex flex-col md:flex-row 
                justify-between md:items-center'>
                    <div>
                        <h1 className='dark:text-titles-light text-titles-dark 
                        text-2xl md:text-4xl mb-1 font-bold'>
                            Social Media Dashboard</h1>
                        <p className='font-bold'> Total Followers: 111,101</p>
                    </div>
                    <hr className='dark:bg-slate-600 bg-slate-200 
                    h-[2px] md:hidden my-5' />
                    <ToogleTheme />
                </div>
            </Layout>
        </header>
    )
}

export default Header
JavaScript 
// src\components\Layout.jsx

import React from 'react'

const Layout = ({ children }) => {
    return (
        <div className='w-[85%] m-auto 
            max-w-[1440px]'>{children}</div>
    )
}

export default Layout
JavaScript 
// src\components\ToogleTheme.jsx

import Head from 'next/head'
import React, { useEffect, useState } from 'react'

const ToogleTheme = () => {
    const [darkTheme, setDarkTheme] = useState(false)
    useEffect(() => {
        if (localStorage.getItem("theme") === 'true') {
            setDarkTheme(true)
            document.documentElement.classList.add('dark')
        } else {
            setDarkTheme(false)
            document.documentElement.classList.remove('dark')
        }
    }, [])

    const handleTheme = () => {
        if (darkTheme) {
            setDarkTheme(false)
            document.documentElement.classList.remove('dark')
            localStorage.setItem('theme', false)
        } else {
            setDarkTheme(true)
            localStorage.setItem('theme', true)
            document.documentElement.classList.add('dark')
        }
    }
    return (
        <>
            <Head>
                <meta name="theme-color" content={darkTheme ?
                    '#F8F8FA' : '#171723'} />
            </Head>
            <div className='flex justify-between 
            md:justify-start items-center md:gap-3'>
                <h2 className='font-bold'>Dark Mode</h2>
                <div className={`w-16 h-8 rounded-full 
                    ${darkTheme ? 'bg-toggle-light hover:bg-gradient-to-r 
                     from-toogle-gradient-left to-toogle-gradient-right ' : ' 
                     bg-gradient-to-r from-toogle-gradient-left to-toogle-gradient-right'} 
                      transition-all ease-in-out duration-500 flex flex-col justify-center`}>
                <span onClick={handleTheme} className={`w-6 h-6 cursor-pointer
                     rounded-full dark:bg-white bg-toggle-dark transition-all
                      ease-in-out duration-500 
                       ${darkTheme ? 'ml-9' : 'ml-1'}`}></span>
            </div>
        </div >
        </>
    )
}

export default ToogleTheme
JavaScript 
// src\pages\_app.js

import '@/styles/globals.css'

export default function App({ Component, pageProps }) {
    return <Component {...pageProps} />
}
JavaScript 
// src\pages\_document.js

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
    return (
        <Html lang="en">
            <Head />
            <body className='dark:bg-light bg-dark 
          dark:text-light-dark text-titles-dark min-h-screen'>
                <Main />
                <NextScript />
            </body>
        </Html>
    )
}
JavaScript 
// src\pages\index.js

import Head from "next/head";
import { Inter } from "@next/font/google";
import Header from "@/components/Header";
import Layout from "@/components/Layout";
import Card from "@/components/Card";
import DetailsCard from "@/components/DetailsCard";

const inter = Inter({
    subsets: ["latin"],
    weight: ["400", "700"],
    preload: true,
});

export default function Home({ cards, details }) {
    return (
        <>
            <Head>
                <title>Social Media Dashboard</title>
                <meta
                    name="description"
                    content="Social Media Dashboard Design with Next.js"
                />
                <meta name="viewport" content="width=device-width, initial-scale=1" />
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <main className={`${inter.className} m-auto bg-pink-100`}>
                <Header />
                <Layout>
                    <div className="grid xl:grid-cols-2 place-content-between
           gap-8 sm:grid-cols-2 -mt-10 md:-mt-[120px]
            ml-auto mr-auto text-center">
                        {cards.map(renderCard)}
                    </div>

                    <h2 className="dark:text-text-light text-titles-dark
           font-bold text-2xl my-6 md:mt-10">
                        Overview - Today
                    </h2>
                    <div className="grid grid-cols-1 sm:grid-cols-2
           xl:grid-cols-4 md:flex-row md:justify-between 
           items-center flex-wrap gap-8 mb-12">
                        {details.map(renderDetailsCard)}
                    </div>
                </Layout>
            </main>
        </>
    );
}

function renderCard(card, index) {
    return (
        <Card
            key={card.mediaName + index}
            icon={card.icon}
            mediaName={card.mediaName}
            isUp={card.isUp}
            userName={card.username}
            type={card.type}
            followers={card.followers}
            recentNotify={card.recentNotify}
            arrow={card.arrow}
        />
    );
}

function renderDetailsCard(detail, index) {
    return (
        <DetailsCard
            key={detail.mediaName + index}
            mediaName={detail.mediaName}
            icon={detail.icon}
            arrow={detail.arrow}
            isUp={detail.isUp}
            sectionName={detail.sectionName}
            state={detail.state}
            percentage={detail.percentage}
        />
    );
}

export async function getStaticProps() {
    const cards = [
        {
            icon: "./../assets/facebook-svgrepo-com.svg",
            mediaName: "facebook",
            username: "Geek",
            type: "followers",
            followers: 1234,
            recentNotify: 12,
            arrow: "./../assets/icon-up.svg",
            isUp: true,
        },
        {
            icon: "./../assets/twitter-svgrepo-com.svg",
            mediaName: "twitter",
            username: "Geek",
            type: "followers",
            followers: 8294,
            recentNotify: 99,
            arrow: "./../assets/icon-up.svg",
            isUp: true,
        },
        {
            icon: "./../assets/instagram-svgrepo-com.svg",
            mediaName: "instagram",
            username: "realGeek",
            type: "followers",
            followers: 86000,
            recentNotify: 1099,
            arrow: "./../assets/icon-up.svg",
            isUp: true,
        },
        {
            icon: "./../assets/youtube-svgrepo-com.svg",
            mediaName: "youtube",
            username: "Geek.",
            type: "subscribers",
            followers: 5432,
            recentNotify: 144,
            arrow: "./../assets/icon-down.svg",
            isUp: false,
        },
        // Add more card objects here if needed
    ];

    const details = [
        {
            mediaName: "facebook-views",
            icon: "./../assets/facebook-svgrepo-com.svg",
            arrow: "./../assets/icon-up.svg",
            isUp: true,
            sectionName: "Page Views",
            state: 202,
            percentage: "3%",
        },
        {
            mediaName: "facebook-likes",
            icon: "./../assets/facebook-svgrepo-com.svg",
            arrow: "./../assets/icon-down.svg",
            isUp: false,
            sectionName: "Likes",
            state: 40,
            percentage: "2%",
        },
        {
            mediaName: "instagram-likes",
            icon: "./../assets/instagram-svgrepo-com.svg",
            arrow: "./../assets/icon-up.svg",
            isUp: true,
            sectionName: "Likes",
            state: 50101,
            percentage: "2257%",
        },
        {
            mediaName: "instagram-views",
            icon: "./../assets/instagram-svgrepo-com.svg",
            arrow: "./../assets/icon-up.svg",
            isUp: true,
            sectionName: "Profile Views",
            state: 202000,
            percentage: "1375%",
        },
        {
            mediaName: "retweets",
            icon: "./../assets/twitter-svgrepo-com.svg",
            arrow: "./../assets/icon-up.svg",
            isUp: true,
            sectionName: "Retweets",
            state: 513,
            percentage: "303%",
        },
        {
            mediaName: "twitter-likes",
            icon: "./../assets/twitter-svgrepo-com.svg",
            arrow: "./../assets/icon-up.svg",
            isUp: true,
            sectionName: "Likes",
            state: 1013,
            percentage: "553%",
        },
        {
            mediaName: "youtube-likes",
            icon: "./../assets/youtube-svgrepo-com.svg",
            arrow: "./../assets/icon-down.svg",
            isUp: false,
            sectionName: "Likes",
            state: 214,
            percentage: "19%",
        },
        {
            mediaName: "youtube-views",
            icon: "./../assets/youtube-svgrepo-com.svg",
            arrow: "./../assets/icon-down.svg",
            isUp: false,
            sectionName: "Total Views",
            state: 3658,
            percentage: "12%",
        },
        // Add more details objects here if needed
    ];

    return {
        props: {
            cards,
            details,
        },
    };
}
XML 
<!-- public\assets\facebook-svgrepo-com.svg -->

<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" 
      width="100" height="100" viewBox="0 0 40 40">
<path fill="#8bb7f0" d="M2.5 2.5H37.5V37.5H2.5z">
     </path><path fill="#4e7ab5" d="M37,3v34H3V3H37 M38,2H2v36h36V2L38,2z">
     </path><path fill="#fff" d="M27,37V24h4.93l0.698-5H27v-3.384c0-1.568,0.702-2.636,2.95-2.636L33,12.979V8.225	c-0.496-0.066-2.381-0.213-4.361-0.213c-4.134,0-6.639,2.523-6.639,7.157V19h-5v5h5v13H27z"></path>
</svg>
XML 
<!-- public\assets\icon-down.svg -->

<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4">
  <path fill="#DC414C" fill-rule="evenodd" d="M0 0l4 4 4-4z"/></svg>
XML 
<!-- public\assets\icon-up.svg -->

<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4">
  <path fill="#1EB589" fill-rule="evenodd" d="M0 4l4-4 4 4z"/></svg>
XML 
<!-- public\assets\instagram-svgrepo-com.svg -->

<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100"
     viewBox="0 0 48 48">
<radialGradient id="yOrnnhliCrdS2gy~4tD8ma_Xy10Jcu1L2Su_gr1" cx="19.38"
                cy="42.035" r="44.899" gradientUnits="userSpaceOnUse">
  <stop offset="0" stop-color="#fd5"></stop>
  <stop offset=".328" stop-color="#ff543f">
  </stop><stop offset=".348" stop-color="#fc5245"></stop>
  <stop offset=".504" stop-color="#e64771"></stop>
  <stop offset=".643" stop-color="#d53e91"></stop>
  <stop offset=".761" stop-color="#cc39a4"></stop>
  <stop offset=".841" stop-color="#c837ab"></stop>
  </radialGradient><path fill="url(#yOrnnhliCrdS2gy~4tD8ma_Xy10Jcu1L2Su_gr1)" 
                         d="M34.017,41.99l-20,0.019c-4.4,0.004-8.003-3.592-8.008-7.992l-0.019-20	
    c-0.004-4.4,3.592-8.003,7.992-8.008l20-0.019c4.4-0.004,8.003,3.592,8.008,7.992l0.019,20	C42.014,38.383,38.417,41.986,34.017,41.99z"></path>
  <radialGradient id="yOrnnhliCrdS2gy~4tD8mb_Xy10Jcu1L2Su_gr2" cx="11.786"
                  cy="5.54" r="29.813" gradientTransform="matrix(1 0 0 .6663 0 1.849)"
                  gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4168c9">
    </stop><stop offset=".999" stop-color="#4168c9" stop-opacity="0"></stop>
  </radialGradient><path fill="url(#yOrnnhliCrdS2gy~4tD8mb_Xy10Jcu1L2Su_gr2)"
                         d="M34.017,41.99l-20,0.019c-4.4,0.004-8.003-3.592-8.008-7.992l-0.019-20
    c-0.004-4.4,3.592-8.003,7.992-8.008l20-0.019c4.4-0.004,8.003,3.592,8.008,7.992l0.019,20	
    C42.014,38.383,38.417,41.986,34.017,41.99z"></path><path fill="#fff" d="M24,31c-3.859,
    0-7-3.14-7-7s3.141-7,7-7s7,3.14,7,7S27.859,31,24,31z M24,19c-2.757,0-5,2.243-5,5	
    s2.243,5,5,5s5-2.243,5-5S26.757,19,24,19z"></path><circle cx="31.5" cy="16.5"
                                                              r="1.5" fill="#fff"></circle>
  <path fill="#fff" d="M30,37H18c-3.859,0-7-3.14-7-7V18c0-3.86,3.141-7,7-7h12c3.859,0,7,3.14,7,7v12	C37,33.86,33.859,37,30,37z M18,13c-2.757,0-5,2.243-5,5v12c0,2.757,2.243,5,5,5h12c2.757,0,5-2.243,5-5V18c0-2.757-2.243-5-5-5H18z"></path>
</svg>
XML 
<!-- public\assets\twitter-svgrepo-com.svg -->

<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100"
     viewBox="0 0 48 48">
<path fill="#03A9F4" d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429"></path>
</svg>
XML 
<!-- public\assets\youtube-svgrepo-com.svg -->

<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100"
     viewBox="0 0 48 48">
<path fill="#FF3D00" d="M43.2,33.9c-0.4,2.1-2.1,3.7-4.2,4c-3.3,0.5-8.8,1.1-15,1.1c-6.1,0-11.6-0.6-15-1.1c-2.1-0.3-3.8-1.9-4.2-4C4.4,31.6,4,28.2,4,24c0-4.2,0.4-7.6,0.8-9.9c0.4-2.1,2.1-3.7,4.2-4C12.3,9.6,17.8,9,24,9c6.2,0,11.6,0.6,15,1.1c2.1,0.3,3.8,1.9,4.2,4c0.4,2.3,0.9,5.7,0.9,9.9C44,28.2,43.6,31.6,43.2,33.9z"></path><path fill="#FFF" d="M20 31L20 17 32 24z"></path>
</svg>

Steps to run the application:

Type the command:

npm run dev

Output:

test-(1)
Social Media Dashboard With Next.js

A
aditya10d8vr
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox