Social Media Dashboard with theme switcher using React.js and Tailwind

Community feedback

• 

  Emmanuel Daniel•1,170

  @coderdanniePosted over 1 year ago

  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

  ---

  

  Lorena Rincon•220

  @lorenacrinconPosted over 1 year ago

  Thank you so much!

  @coderdannie

  0
• 

  Aman Singh Bhogal•1,010

  @asbhogalPosted over 1 year ago

  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

  ---

  

  Lorena Rincon•220

  @lorenacrinconPosted over 1 year ago

  @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

  

  Aman Singh Bhogal•1,010

  @asbhogalPosted over 1 year ago

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

  0