Social Media Dashboard using Reactjs

Community feedback

• 

  P

  Christopher Adolphe•600

  @christopher-adolphePosted over 2 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.

  Marked as helpful

  1

  ---

  

  P

  Briuwu•750

  @BriuwuPosted over 2 years ago

  @christopher-adolphe Oh wow! thank you so much for this really great feedback! I will definitely gonna take a look at the link that you've provided! (≧∀≦)ゞ

  0

  

  P

  Christopher Adolphe•600

  @christopher-adolphePosted over 2 years ago

  Hi @Briuwu

  I'm happy to help and glad to see this was helpful to you.

  I hope you get to practice styling your React component with CSS modules stylesheets in your next challenge.

  Can you please confirm me if the SASS files were not present in the deployment with you current folder structure ? I'm curious to know because I have not yet worked with React and SASS in the same project.

  Best regards.

  1

  

  P

  Briuwu•750

  @BriuwuPosted over 2 years ago

  Hello! @christopher-adolphe

  I'm still new to React so I don't really quite understand this question, but base on my understanding, if you are asking if the SASS files is in the build folder, nope it is not, it's just the CSS files. just like any other normal build.

  I hope this answered your question, I'm sorry if I can't really explain it, since I'm still new to this. (>﹏<)

  1

  

  P

  Christopher Adolphe•600

  @christopher-adolphePosted over 2 years ago

  No worries @Briuwu.

  I am new to React as well. I will look further into it once I get the opportunity to create a React project with SASS. But I suspect Webpack to be taking care of that under the hood. 😎

  See you on the next one.

  Cheers.

  1
• 

  Macdeesh•610

  @macdeeshPosted over 2 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

  Marked as helpful

  1

  ---

  

  P

  Briuwu•750

  @BriuwuPosted over 2 years ago

  @macdeesh Thank you so much for this! (≧∇≦)ﾉ

  I was able to fix it but on a different method lol. I tried taking a look on the repo that you've provided but I also can't understand it...

  But what I did to fix it is just to make another svg and rename it's id.. It's not really a good solution but it's working... Thank you again!

  0