Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social media dashboard with React & SCSS

#react#sass/scss
P
Ctrl+FJ 750

@FlorianJourde

Desktop design screenshot for the Social media dashboard with theme switcher coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

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 !

Community feedback

@mohamedmostafakhudari

Posted

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

1

Please log in to post a comment

Log in with GitHub
Discord logo

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