Skip to content
OverviewSolutions
8
Comments
8
Adam Crowley
@adam-crowley

All comments

  • P
    Kamran Kiani•2,780
    @kaamiik
    What are you most proud of, and what would you do differently next time? What I'm most proud of
    • Successfully implementing a responsive, accessible dark mode that persists across sessions
    • Creating a clean component architecture with proper separation of concerns
    • Building an efficient search and filter system that works across multiple data points
    • Implementing proper error handling and loading states for a better user experience
    What I would do differently
    • Add more comprehensive error boundaries for better error handling
    • Consider using TypeScript from the start for better type safety
    What challenges did you encounter, and how did you overcome them? Challenges encountered and solutions

    1. Border Countries Data Fetching

      • Challenge: Needed to make multiple API calls to get border country names
      • Solution: Implemented bulk fetching using SWR and proper loading states
      const { data: borderCountries } = useSWR(
  () => borders?.length > 0 
    ? `https://restcountries.com/v3.1/alpha?codes=${borders.join(',')}`
    : null,
  fetcher
);

    2. Navigation History

      • Challenge: Back button wasn't working as expected with nested routes
      • Solution: Used useNavigate(-1) for proper browser history integration

    3. Form State Management

      • Challenge: Deciding where to place search/filter state
      • Solution: Lifted state to parent component while keeping form logic encapsulated
    What specific areas of your project would you like help with? Areas I'd like help with

    1. Performance Optimization

      • Best practices for reducing unnecessary re-renders
      • Strategies for optimizing API calls and caching

    2. State Management

      • When to use Context vs. Props vs. State Management Libraries
      • Better patterns for managing complex state

    3. Accessibility

      • Ensuring the application meets WCAG standards
      • Improving keyboard navigation and screen reader support

    Rest Countries Api using React and Tailwind

    #fetch#react#swr#tailwind-css#vite
    1
    Adam Crowley•170
    @adam-crowley

    Style

    Responsive layout/style looks good.

    On the CountryDetail component, the flag image aspect-ratio is distorted. This can be fixed by setting height of the img tag to auto and removing the max-height property.

    Currency the flags rendered are PNG links. The SVG links are visually sharper. The json file has svg and png links for each countries flags property.

    Animation elements for light/dark mode: Some elements don't have an color animation transition. The animation would look smoother if all the elements transition together.

    Function

    The persistant light/dark mode on reload is cool.

    The filter/dropdown functionality, in combination with country search is really good usability-wise.

    State management: I recommend Zustand for global state management. It's easy to get to grips with and it saves complex prop drilling.

    Accessibility

    Accessibility looks good, but you can run it through this tester if you want to get it perfect. https://wave.webaim.org/

    Great job!

  • Adam Crowley•170
    @adam-crowley

    This all looks really good. Responsive layout, styling, JS, and accessibility are all on point.

    The only improvement I could see is to make the input fields green on :focus like in the design.

    Good work!

  • Adam Crowley•170
    @adam-crowley

    The design/layout looks good. In mobile view I would shrink the outer margins so the products fill the page a bit more, like the design. The delete item button is missing the x icon.

    Accessibility looks good except the + and - qty div elements should be button elements, so you can access them via keyboard.

    For functionality, everything is working except the confirm order modal window appears to be missing. This window should pop up and shows all the items in your cart.

    You've tagged React but I can't see any in the source code? Javascript looks good.

  • Daniel Knight•50
    @DKulan
    What are you most proud of, and what would you do differently next time?

    Happy to worked with Vite.

    What challenges did you encounter, and how did you overcome them?

    importing image assets based on a path contained in a json file was a bit of a challenge due to the way static asset handling works in Vite. I had to import all the images directly in the component. Regardless, I think storing the image path in a json file isn't the best way to load an icon.

    What specific areas of your project would you like help with?

    Maybe the CSS? I understood the responsiveness requirements as "mobile layout until the desktop break point", but maybe it should load the desktop layout after the mobile break point.

    Results summary component

    #vite#react
    1
    Adam Crowley•170
    @adam-crowley

    The overall layout looks good. For responsiveness I would set the layout breakpoint for desktop to 768px (it's currently set to 1440px).

    The Continue button needs white text.

    To display the image assets, you can loop through the data json file like below (I've simplified for legibility)

    <ul>
  {data.map((item, index) => (
    <li key={item.category} className={`li-${index.toString()}`}>
      <img src={item.icon} alt="" />                
    </li>
  ))}
</ul>
  • Yarce22•230
    @Yarce22
    What are you most proud of, and what would you do differently next time?

    This is my first project made with Tailwind-css and Vite.

    What challenges did you encounter, and how did you overcome them?

    I had to read a lot of Tailwind documentation to understand how to do a lot of things. I hope to start memorizing Tailwind metrics.

    Recipe page

    #accessibility#tailwind-css#vite
    1
    Adam Crowley•170
    @adam-crowley

    Responsive layout looks good. I would just add max-width: 736px and margin: 0 auto to the section element for desktop view (you'll need to translate these into Tailwind). That'll keep the section element from spreading across the page on large screen sizes.

  • André•80
    @psandre
    What are you most proud of, and what would you do differently next time?

    da experiência adquirida nos projetos anteriores me ajudaram bastante para este.

    What challenges did you encounter, and how did you overcome them?

    Acho que consegui me sair melhor neste projeto em relação aos anteriores

    html css

    1
    Adam Crowley•170
    @adam-crowley

    I would remove the outline on the buttons .btn { border: 0 }, and make them wider. For the hover state, make them green on hover .btn:hover { background-color: #C4F82A; }.

    Add the max-width: 90% property to the .content div. So when you view on mobile the content will fit to 90% of the screen width:

      width: 400px;
  max-width: 90%;
}```
    Marked as helpful
  • M.A.Askat•40
    @AskatAsh
    What are you most proud of, and what would you do differently next time?

    I tried my best to make the design pixel perfect and and responsive for even the smallest devices. Added hover and active states.

    What challenges did you encounter, and how did you overcome them?

    I was getting some accessibility issues while checking with lighthouse devtool and I fixed the issues from suggestions given by lighthouse.

    What specific areas of your project would you like help with?

    Please suggest how I should animate this UI component or to be specific what type of animation would be good.

    Responsive Blog Preview Blog UI design using html and css

    #accessibility#web-components#styled-components
    1
    Adam Crowley•170
    @adam-crowley

    Layout looks great and is identical to the design. Accessibility looks good.

    Responsive layout is good. I would make all the text slightly smaller when the screen size is mobile.

    For animation I would just add subtle hover transitions for the color of the link elements:

      transition: color 0.2s;
  color: var(--gray-950);
}
h1 a:hover {
  color: var(--yellow);
} ```
  • P
    Bobby Bruno•150
    @madmarketingpro
    What are you most proud of, and what would you do differently next time?

    I'm glad that I was able to complete this. I have learned that prior to getting into the coding there are many other challenges and sometimes command line things you need to learn. Finally, getting to practice has been great!

    Next time, I would like to make the responsiveness more fluid.

    What challenges did you encounter, and how did you overcome them?

    Some of the challengers I encountered were getting the white background container centered. I was able to do it at some point but after editing the elements inside, it locked back to the left of the screen.

    I later solved this with margin: auto; but I don't fully understand why it went back to the left hand side of the page.

    What specific areas of your project would you like help with?

    When I zoom in or out of the page the size of the text changes, but the image size does not change. I'm not sure if this is the correct approach to this. I think it breaks page.

    I would like to learn how to handle that situation.

    Responsive Qr Code Card Design with CSS Flex

    1
    Adam Crowley•170
    @adam-crowley

    To allow the design to scale when you zoom, make sure the width, padding and font-size properties are using REM units on all elements on the page (eg .qr-container { width: 25rem }).

    I would also add ARIA landmarks to the HMTL to help with accessibility (eg <main role="main"> around the .qr-container div and <footer role="contentinfo"> around the .disclaimer div).

    Marked as helpful