Skip to content
OverviewSolutions
4
Comments
4
P
Michael
@michael-schlueter

All comments

  • Bartosz Dudziak•680
    @bartoszdudziak-devSubmitted 10 days ago
    What are you most proud of, and what would you do differently next time?

    To make it more real-world I implemented React Query to fetch the data using real API endopoints and search debouncing.

    Rest Countries App (React/TS/Tailwind)

    1
    Michael•180
    @michael-schlueterPosted 8 days ago

    Hey there,

    this is impressive, inspiring work. There's a lot to like looking at your project. First of all the structure is very clean. That makes it easy to comprehend what's going on in your code. Kudos to that.

    In general the project works as expected and looks and behaves beautifully. I like the small animations you've added which make the site feel quite lively. Also providing loading spinners and error pages makes for a great user experience.

    There's just a couple of small things I picked up. On the homepage you formatted the population number for the countries but you forgot to do so on the Country Details page. Also I would think about extending the clickable area for activating light/dark mode to the light/dark mode text next to it. I think most users expect that text to be also clickable instead of just the moon icon.

    All in all great work. Keep it up!

    Marked as helpful
    1
  • Michael•180
    @michael-schlueterPosted 29 days ago

    Hello there!

    first of all congratulations on completing the project. It looks great and works just as expected. So good job! I really like how you structured your CSS and used custom properties as well as the :has selector. I'm a big fan of it, too.

    Just a couple of minor things I picked up looking at your app:

    • you could add a utility function to format the results. The Intl.NumberFormat object comes in handy in that regard. Maybe you want to take a look at it here
    • on tablet screen sizes you could add a little bit of vertical padding to match the design more closely

    But like I said, those are only minor things. All in all great work. Keep it up!

    Marked as helpful
    0
  • Michael•180
    @michael-schlueterPosted about 1 month ago

    Hi there, great job finishing the project. It looks really good. You implemented the design quite well. In particular I like the use of shadows on the buttons. Also everything works just as expected. There are a couple of things I picked up looking at your site:

    • I'm not sure if you plan to add it later on but the modal for confirming the order is missing.
    • Like I said the layout in general looks great but the cart could be a little bit bigger on desktop. It's a bit squished, especially compared to the product list. I find using CSS Grid for laying things out in that manner particularly helpful.
    • You may also want to look at the images for the desserts. There are multiple versions of the images provided (desktop, tablet, layout). The <source> element can help in that regard. The user gets to see the image which is best fitting for the device he is using.
    • Looking at accessibility, I'm currently not able to navigate with the keyboard to the buttons for increasing/decreasing the quantity of the items. You may want to make those buttons focusable.

    All in all great job, though. Keep on coding!

    Marked as helpful
    0
  • Michael•180
    @michael-schlueterPosted 3 months ago

    Hey there, good job on the challenge! I really like how you used CSS variables for the different colors and gradients. It's also very impressive that you got this layout working using positioned layout.

    I have a couple of suggestions about your project that may interest you:

    The desktop and mobile versions of your site look great. However while transitioning between the desktop and mobile view the content of the site begins to look a little squished and things start to break. It's rather tricky to make a site fully responsive for all screen sizes using fixed widths and heights in combination with Positioned layout. You may want to check out CSS Grid which can help in terms of responsiveness of the layout and it seems to be a good approach for this particular project.

    You may also want to highlight the button once it's hovered of focused by the user. Especially keyboard users would benefit from an indicator once the button is in focus.

    I hope you find those suggestions helpful. All in all terrific job!

    Happy coding!

    0