Skip to content
OverviewSolutions
29
Comments
13
Leonard
@leoikeh99

All comments

  • Leonard•1,025
    @leoikeh99Posted over 1 year ago

    Good solution, i have a couple of feedbacks:

    • For the button it better to set only the padding for the top and bottom and then set a width of 100%, i.e.: padding:1rem 0;, this will help with overall responsiveness
    • For the right side where you have the h3 there are couple of ways to make sure the img and the plain text are properly vertically aligned, you could set the h3 to display: flex and align-items: center, this will help with the alignment
    Marked as helpful
    0
  • Nicholas Blanco•150
    @nablancoSubmitted over 1 year ago

    The key challenge for this project was not converting markdown to JSX, but instead managing user's markdown documents. I tackled this by using React context to create a document context which managed all CRUD operations. I decided to use localStorage to store user's documents, as I wanted to keep this a pure frontend project. To convert markdown to JSX, I used a converter found on npm which worked very well (markdown-to-jsx). For the theme, I also use React context.

    In-browser markdown editor

    2
    Leonard•1,025
    @leoikeh99Posted over 1 year ago

    Very nice solution i have two reeomendations

    1. In your Sidebar, in the list of documents i think its better to set the overflow to auto instead of scroll, this way the scrollbar only shows when it's actually needed.
    2. Maybe remove your console logs.

    P.S: I really like the responsiveness.

    Marked as helpful
    2
  • Leonard•1,025
    @leoikeh99Posted over 2 years ago

    Very good solution, my only feedback is:

    1. Try to already make the component responsive before reaching 425px, as it is right now the image seems to reduce in width a little too much before you applied your responsive styles.

    2. I would also advice, at a point when the screen is a small sizes to just set the components with to a certain percentage e.g. 90%, this will greatly improve responsiveness.

    0
  • Evan•10
    @CodeSoftySubmitted over 2 years ago

    • Did I setup my flexbox containers/parents correctly? Some of this was a bit confusing until I took my time and slowly got the card component to how I wanted it to look like inside the container.

    • I used width: 50% on .card in my media query, is this the best method to resize the card for this type of project?

    • Chrome doesn't want to load my images, but Firefox does, why is that?

    • Was there anything I missed or got wrong or could improve on? Any other comments?

    Thanks in advance.

    Product Preview Card

    1
    Leonard•1,025
    @leoikeh99Posted over 2 years ago

    A nice attempt, i have a couple of corrections:

    1. You shouldn't set the card to a width of 50% rather to an actual value e.g. 600px

    2. As for flexbox i think you used it well but the image and the right part (the content), should both take 50% of the card you can do this by easily setting the width of both the image and the right part (the content) to 50%

    3. It will also be very helpful to set the content parts border-box to box-sizing i.e. box-sizing:border-box in your css

    lastly i'll leave a resource link to a youtube step by step solution to this problem: Product Card Component (Explained) - Frontend Mentor #1

    Marked as helpful
    0
  • Leonard•1,025
    @leoikeh99Posted over 2 years ago

    Good solution, but i have a few corrections:

    1. I think is just better to set the buttons width to 100%, since you have already set the width and padding for the container.

    2. I think will also be better to set the width of the container to something like 90% when the screen reduces to a certain width, this will enable better responsiveness.

    3. For the button, i don't think you should set the border-radius to 5%, rather is should be something like 8px.

    4. Lastly you should reduce the line height of you <h2> a bit.

    Marked as helpful
    0
  • Leonard•1,025
    @leoikeh99Posted over 2 years ago

    I would advice setting the height of the sidebar to 100vh and not 100%, so that users do not have to scroll down to see the bottom of the sidebar.

    Marked as helpful
    1
  • Yazdun•1,310
    @YazdunSubmitted over 2 years ago

    Hey everyone ! This is my first Guru challenge and It's a little bit different from the original design, For example I completely changed the desktop hero section and I created a sidebar for the cart, which was supposed to be a modal.

    I also decided to use more reddish color as the primary color, The original orange color didn't look alive enough to me 😁

    I'm open to feedbacks and let me know of your thoughts about this solution. Thanks in advance

    audiophile solution built with Next + Typescript

    8
    Leonard•1,025
    @leoikeh99Posted over 2 years ago

    Wooooowwwwwwww

    1
  • Steve Xero•210
    @stevexeroSubmitted over 2 years ago

    I am having the hardest time with getting the replies functionality to work. I'm using Redux Toolkit and have tried normalizing the state, but to no avail. I'm excited to look at the other solutions on here to see how they solved it!

    Product Feedback App

    1
    Leonard•1,025
    @leoikeh99Posted over 2 years ago

    Check out this solution: https://www.frontendmentor.io/solutions/product-feedback-app-nextjs-and-styled-components-BJgXK1hBB5

    if you still cant figure it out then maybe reach out

    1
  • Andras Kelemen•160
    @androgitaiSubmitted over 2 years ago

    Hello everyone!

    This is my solution for the invoice app challenge. I built it full stack and uses Firebase database and authentication. I used React, Redux and CSS modules to build it. It does not use any other dependencies because I wanted to build out the whole app myself.

    Let me know what you think ;)

    Andro

    InvoiceMe App

    2
    Leonard•1,025
    @leoikeh99Posted over 2 years ago

    All i can says is this is really good, great job.

    0
  • Agraj Yadav•100
    @agrajy10Submitted almost 3 years ago

    This is my 3rd project in ReactJS. I was able to complete every functionality of this web app but I think I could have done invoice form better. Open for in-depth feedback about the final result, my code and any other kind of feedback.

    Invoice App using React JS and Styled Components

    1
    Leonard•1,025
    @leoikeh99Posted almost 3 years ago

    Good stuff

    0
  • Leonard•1,025
    @leoikeh99Posted almost 3 years ago

    Great job

    Marked as helpful
    1
  • Abhushan A. Joshi•490
    @abhu-A-JSubmitted over 4 years ago

    I had planned to learn React and Redux this week and I gave shortly a different twist to practise those skills . Kindly suggest you feedback to improve.

    Skills I learned:

    1. React + Redux 2 Redux-Persist
    2. Firebase for auth and a little bit of DB stuff

    My Second React Project

    1
    Leonard•1,025
    @leoikeh99Posted over 4 years ago

    very nice im also learning react need to ask did you deploy this with heroku or netlify?

    0