After learning about React Context, I wanted to test out my knowledge by building something, so I chose this challenge from Frontend Mentor to build a Social Media Dashboard with a dark mode theme switcher.

I built it with React, Context, TailwindCSS, and Vite. I deployed it to Netlify as a static website and you can view the live project here

In this article, I will explain the process of how I built this, the challenges I faced, and a couple of new things I learnt along the way.

Let's dive in.

Challenges

Most of the concepts I implemented here were entirely new to me at the time, but through relentless googling, I succeeded in overcoming all of them. Some of them were:

1. Storing the data

From the start, I wanted to avoid hard coding the data into the components as much as possible, and over a few iterations, I came up with this data structure for storing information about a platform and their metrics

import fbLogo from "../assets/icon-facebook.svg";

{
        name: "facebook",
        logo: fbLogo,
        userHandle: "@nathanf",
        following: {
            metricName: "Followers",
            amount: 1987,
            change: 12,
        },
        otherMetrics: [
            {
                metricName: "Page Views",
                amount: 87,
                change: 12,
            },
            {
                metricName: "Likes",
                amount: 52,
                change: -2,
            },
        ],
    },

According to the design below, following was styled differently than the other metrics, so I had to lift it into its own key for easy access as opposed to storing it inside otherMetrics.

The data structure above is the same one I used for other platforms shown in the design. I stored them in an array called dashboardData that I used as the Context for the entire React application. You can view the Context data here

2. Rendering the data

Looking at the design, I had 2 reusable components to build: a FollowingCard and a PlatformMetrics component.

The FollowingCard consumed the context of the current platform in a rendering loop and displayed the contents of each platform's following object

Using the name key of a platform, it adds a dynamic class that I used to style the top border of each platform differently.

The trend shown below is rendered as rising or falling depending on the polarity of the followers.change key stored in the context.

Tip: If you want to learn how I added the gradient border on Instagram above, here's an in-depth article I wrote about it

Also, I learnt how to render large numbers like 11000 as "11k" instead and I think this will come handy when summarizing large numbers in the future (Eg: Video views etc)

Now for the PlatformMetrics component, it loops through the otherMetrics array for each platform and renders each metric, while the app loops through the platforms and renders PlatformMetrics 4 times.

This is one component actually...

I tried structuring the component to render a single metric from otherMetrics for each platform but that got complicated too quickly so I went with this implementation instead

Also, it reuses the trend polarity and number shortening functionality as in FollowingCard

3. Dark theme switcher

Besides using Context, this was what actually drew me to this project. If there is a dark theme on a website or app, I'm clicking. My eyes have never been better and I appreciate all the designers who invented this UX.

So I wanted to learn how to implement it myself, and I already knew TailwindCSS had good support for it, so the implementation wasn't that difficult.

All I did was create a stateful boolean value (darkMode) mapped to a switch component I swiped from a tutorial online. The switch component uses a checkbox input underneath so clicking it toggled the state.

Finally, I used that state to toggle a dark class on the entire app, which tells Tailwind to use styling classes prepended with dark: rather than the regular class.

Here's the theme switcher in action

If you want to learn how to implement this yourself, I recommend you check out the official docs for the feature itself, it contains everything you need to set this up in your projects

Additionally, you can also target the toggleable dark class in your CSS and add some sort of transition to ease the switch between light and dark mode

4. Animations

The best part about this project was when I implemented a loading screen animation and animated the components to gradually appear on the screen.

For this i used a library called Animate.CSS, they have a bunch of just-add-water animations that you can add to your elements using classes.

Now, in order to gradually animate the platforms to appear one after the other, I used the index of each platform object while rendering them to add a delay to the animation via a class.

The result was a list of elements appearing one after the other.

5. Deployment

As usual, I deployed the website to Netlify.

Here's the Live Project

You can also view the source code on GitHub

Conclusion

All in all, this was a fulfilling project, using animations and setting dark mode in my projects has always been something I wanted to learn and i'm surprised I didn't need to write much custom CSS for this.

What remains is to implement this into my portfolio to improve it's design. But that's til the next iteration.

Also, I believe there're better ways to implement parts of this project, so I'll appreciate some feedback on this.

Thanks for reading so far, If you have any questions about what I did, you can comment them below.

Finally, you can connect with me online via any of these platforms

• My website

• Twitter

• GitHub

Have a nice day.