All comments

• 

  Ctrl+FJ• 810

  @FlorianJourde

  Submitted over 1 year ago

  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 !

  

  Social media dashboard with React & SCSS

  1

  50

  

  Mohamed Mostafa Khudari• 660

  @mohamedmostafakhudari

  Posted over 1 year ago

  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
• 

  P

  Briuwu• 750

  @Briuwu

  Submitted over 1 year ago

  Hello Everyone! ヾ(≧▽≦*)o

  I am excited to share my experience completing this challenging project, and I welcome any feedback or suggestions you may have.

  Here's the things that I've learned while making this:

  Throughout this project, I learned some incredibly valuable skills. From setting up routers with react-router-dom, to using sass to create sleek and maintainable styles, to developing reusable components and incorporating engaging animations with framer-motion!

  I also tried using TypeScript for the first time, and though I know I have plenty of room to grow, I feel proud of my progress so far. And, best of all, I finished the project in just one week - a major accomplishment for me.

  I know that there may be areas in which this can be improved. So please if you have any feedbacks do let me know!

  I also wanna share my progress on completing this challenge!

  • Day 1: Arranged folder structures and installed necessary packages.
  • Day 2: Created sass folder structures and added variables, functions, and mixins.
  • Day 3: Added navbar and routings.
  • Day 4: Involved designing each page in detail.
  • Day 5: Finalized the stylings and code structure.
  • Day 6: Refactored the code to enhance readability.
  • Day 7: Fixed minor bugs and deployed site to Netlify.

  Thank you for checking this one out! This challenge allowed me to refine my skills and explore new techniques. (●'◡'●)

  

  Space Tourism w/ React + TS

  3

  1038

  

  Mohamed Mostafa Khudari• 660

  @mohamedmostafakhudari

  Posted over 1 year ago

  Great job ... Your code is well structured and contains some areas i still have not touched yet. Keep the progress going!

  1

  This comment has received 1 replyShow
• 

  joaovitorwitt• 250

  @joaovitorwitt

  Submitted almost 2 years ago

  I am open to suggestions and tips

  

  Base apparel coming soon page

  1

  70

  

  Mohamed Mostafa Khudari• 660

  @mohamedmostafakhudari

  Posted almost 2 years ago

  You have done a great job here, I recommend using these properties for the image element

    - object-fit (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)
    - object-position (https://developer.mozilla.org/en-US/docs/Web/CSS/object-position)
  

  To avoid the image distortion when it is stretched.

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Federico• 80

  @02fede02

  Submitted almost 2 years ago

  It was some kind of hard to make the watch eye appear when it's hover the image.

  

  Used Tailwindcss

  2

  60

  

  Mohamed Mostafa Khudari• 660

  @mohamedmostafakhudari

  Posted almost 2 years ago

  I really like the way you used to make that hover effect work out. I actually took the easy road and used animations combined with JS and Event Listeners to do the trick.

  0
• 

  Olayinka Oluwafemi• 60

  @godsonCodes

  Submitted almost 2 years ago

  Hello.

  I just completed the product preview card component. Please review my solution and give your comments with respect to the following:

  • height of the container component?
  • use of font styles and colors?
  • responsiveness of the submission?

  

  Product Preview Component

  2

  60

  

  Mohamed Mostafa Khudari• 660

  @mohamedmostafakhudari

  Posted almost 2 years ago

  I recommend using img element displayed as a block rather than background image in this case so that you have more control over it when using flexbox to achieve the desired responsive layout.

  Also you can add transition property to the button to add a touch of smoothness when you hover over it.

  Overall great job, learning never stops and I wish you good luck in your journey.

  0

  This comment has received 1 replyShow