Social Media Dashboard using Reactjs

Community feedback

• 

  P

  Christopher Adolphe•620

  @christopher-adolphe

  Posted about 3 years ago

  Hi @Briuwu 👋

  You did a great job in completing this challenge using React. 👍 Below are a few things that I have noticed and you might want check in order to improve your solution.

  • On large viewports the <Social /> and <Overview /> components align to the left side. To correct this, simply apply margin-left: auto; and margin-right: auto; to them or you could apply display: flex; on the <main> element.
  • On tablet maybe it would be better to keep a 2 column layout instead of 3 for the <Social /> and <Overview /> components. At the moment, you have one card overflowing to the next line which creates an unnecessary whitespace.
  • As for the CSS, it is not as messy as you might be thinking. 😉 You could certainly improve on the organization of your partials. One thing I have noticed though, it would be better to move the compiled CSS in a different directory which you could call css and keep your SASS files in another directory called sass. This way when you deploy the finished project, only the compiled CSS is bundled in the deployment. However, if this is already being taken care of during the build process, please ignore this comment. 😉
  • You could also consider using CSS modules stylesheet, which aim at scoping the style to the component. For example your <Dashboard /> component would have its own Dashboard.module.scss file. I think this also greatly helps in keeping your CSS organized. You can read more here

  I hope this helps.

  Keep it up.

  14

  Marked as helpful
• 

  Macdeesh•610

  @macdeesh

  Posted about 3 years ago

  Helloo Briuwu,

  Your work looks pretty good !! Well done !! I had a look at your code just to answer to your question about the HTML issues. I'm sure that you know that the id is unique, and we can't use more than one id name's in our HTML. Maybe you couldn't localize the error because the project is bootstrapped with Create React App. The linear gradient is used with the Instagram SVG 3 times with the same id, so you need to change or delete the id of 2 of those 3 SVGs. How I don't know but I found one of the id here :

  <div class="social-each Light Instagram">
    <div class="social-title">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
         <defs>
           <linearGradient id="a" x1="100%" x2="0%" y1="0%" y2="100%">
  

  I think fixing it is a bit tricky, as I don't have enough knowledge in JS, I can't help you more, but if you want to fix the issue have a look at this repo : https://github.com/exogen/babel-plugin-inline-react-svg/pull/1 Or this one : https://github.com/airbnb/babel-plugin-inline-react-svg/issues/57

  11

  Marked as helpful