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 theme switcher using React.js and Tailwind

@lorenacrincon

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


Hi everyone!

I would appreciate it if you could give me some feedback on the structure of my code to see what I can improve.

Thank you!

Community feedback

@coderdannie

Posted

Hi. Congrats on the completion of this project. An extra features you can add is to store the themes state using browser localstorage so that your site can maintain the theme state even if the page was reload. Right now if I switch to light mode and reload the web page its switching back to the default theme. Using browser storage to store the theme and accessing the themes based on user preference will prevent this from happening. https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Marked as helpful

0

@lorenacrincon

Posted

Thank you so much!

@coderdannie

0

@asbhogal

Posted

Hi Lorena,

This is a very good solution, well done! The designs match the mockups nicely and it's great to see a React approach to get some early exposure to state management.

Just a few pointers below worth considering when you refactor and for future builds:

  • For the if statement in your useEffect(), you can refactor this using the ternary operator, which is ideal for single-line parsing for truthy and falsy conditions: darkMode ? body.classList.add("dark") : body.classList.remove("dark"); here, if darkMode is true (by default by itself means it evaluates if it is truthful first), then parse the instruction after the ?, or if it is falsy, parse the instruction after :
  • Locally host your Google Fonts for privacy and performance reasons. Since you're using an npm environment, you can use Fontsource to install the typeface, then import the specific font-weights you require and then declare the typography via font-family, font-weight etc. in your stylesheets. Because you're using Tailwind, you can refer this in the theme or extend object in your tailwind.config.js file Here's a documentation link for the Inter font Link and how to customize the Tailwind theme Link
  • For client-side applications such as these, it's best to deploy to more robust platforms like Vercel or Netlify which handle caching and performance a lot better. They also include CI/CD and debug logging during build time to identify any issues, and Vercel automatically deploys a new build with each Git push, which means you don't need to run an npm script prior to committing.

Hope this helps!

Marked as helpful

0

@lorenacrincon

Posted

@asbhogal Hi Aman!

Thank you so much for the feedback.

It's very helpful for me to know all of this, especially what you mention about deploying on Vercel or Netlify.

I'm new at this, so I didn't knew they had this functionality to build with every push. I'm very grateful for all this information!

1

@asbhogal

Posted

@lorenacrincon no problem at all, glad to help :)

0

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