Skip to content
OverviewSolutions
38
Comments
5
Mohamed Mostafa Khudari
@mohamedmostafakhudari

All comments

  • Ctrl+FJ•810
    @FlorianJourdeSubmitted 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
    Mohamed Mostafa Khudari•660
    @mohamedmostafakhudariPosted 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
  • Briuwu•750
    @BriuwuSubmitted 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
    Mohamed Mostafa Khudari•660
    @mohamedmostafakhudariPosted 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
  • Mohamed Mostafa Khudari•660
    @mohamedmostafakhudariPosted about 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
  • Federico•80
    @02fede02Submitted about 2 years ago

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

    Used Tailwindcss

    2
    Mohamed Mostafa Khudari•660
    @mohamedmostafakhudariPosted about 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
    @godsonCodesSubmitted about 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
    Mohamed Mostafa Khudari•660
    @mohamedmostafakhudariPosted about 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