Skip to content
Submitted about 2 years ago

Social media dashboard with React & SCSS

react, sass/scss
Ctrl+FJ•810
@FlorianJourde
A solution to the Social media dashboard with theme switcher challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey ! Here's my first React challenge ! 👋

I wanted to grab this one, cause there's a dark mode, so I had to get a little reflexion about how to implement it ! I guess the result is okay, even if I didn't loose time to propose a pixel-perfect solution, my main wish was to practice with React.

I'm wondering about the necessity to make these "subcomponents" sections : DashboardCard & OverviewCard. What do you think ? I'll check how other people have handled it after submitting my solution.

I also grabbed the switch from uiverse, it was pretty useful and make me win some time, for a pretty good result !

Tell me what you think about my shit ! ✌️ I'll pickup a multipage FEM challenge right now !

Code

Please log in to post a comment

Log in

Community feedback

  • Mohamed Mostafa Khudari•660
    @mohamedmostafakhudari

    In your own case these subcomponents are not necessary and I recommend naming them with plural names (like DashboardCards or OverviewCards) to avoid confusion. But if you ask me, I prefer to work with the smallest components possible. For example In this project I created standalone component named DashboardCard and it contains all the structures, styles and logic of a single card. After that I reached my data array, loop with map and generate single cards for each object in the array. Something like that...

    // overViewCards = (arrayOfObjects)
 {overViewCards.map(({ platform, title, value, change }, i) => (
            <OverViewCard
              key={i}
              platform={platform}
              title={title}
              value={value}
              change={change}
            />
          ))}

    I hope you learned something new and good luck in your next project.

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord