snhase

Latest comments

• 

  Adrian Rangel•620

  @radriann21

  Submitted 7 months ago

  What are you most proud of, and what would you do differently next time?

  been capable of just make the solution, even without thinking (it's not a really difficult project)

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

  none on particular

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

  maybe in give to the user more feedback about the fetching, just the spinning dice for me, it's not enough

  

  Responsive React Advice Generator

  #accessibility#animation#react#vite#axios

  1

  20
  

  snhase•220

  @snhase

  Posted 7 months ago

  Hello Adrian,

  Just completed this challenge as well. I agree, while advice is being fetched just dice rolling isn't enough,

  Here is one suggestion that I feel works better is using skeleton loaders.

  Sharing an example code snippet with tailwind css - skeleton loader with pusle animation

  Hope this helps! Happy coding! snhase

  0
• 

  tOnski86•330

  @tOnski86

  Submitted 7 months ago

  What are you most proud of, and what would you do differently next time?

  React

  • Successfully fetched data from the API using a useEffect hook.

  Tailwind CSS

  • Created the hover effect by adding a custom drop shadow to the tailwind.config.js file

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

  React

  • Would improve fetch on my next attempt - adding a loading state and error handling.

  Tailwind CSS

  • Still figuring out how to create transitions - I was able to attempt a transition that unfortunately only works on the initial render. I am thinking React should be involved with adding/removing classes through an animation state. I will keep researching on this.

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

  EDIT I finally got animations to work on this project! 🔥🔥🔥

  Still getting stuck on animating my components, also user-triggered animations. Might look into framer motion but would rather figure out if there's a React x Tailwind way before I explore other libraries.

  

  useEffect and Fetch API

  #react#tailwind-css

  1

  31
  

  snhase•220

  @snhase

  Posted 7 months ago

  Hello, just came across your solution, just completed this challenge as well. I also added some animations, but while the data is being fetched not on display. I like how you incorporated the animations into the app. Great job!

  0
• 

  Elias M.•420

  @Emazs

  Submitted about 1 year ago

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

  The most notable challenges were learning to integrate the TinyURL API to shorten links and ensuring correct functionality across different devices and browsers. To overcome them, I researched and consulted the API documentation extensively, as well as conducted thorough testing in various environments to identify and address potential compatibility issues.

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

  I'd appreciate assistance with optimizing the performance of my landing page, particularly in terms of loading times and responsiveness. Additionally, guidance on improving the user experience and enhancing the visual design would be valuable.

  

  URL shortening API landing page

  #react#tailwind-css#fetch

  1

  41
  

  snhase•220

  @snhase

  Posted about 1 year ago

  Hello Elias,

  Great job with the challenge! It is responsive and API integration works very well!

  I just completed this challenge too and have some minor suggestions to improve the UX/visual design even more :

  • the copy button does copy but gives an alert instead of changing the copy button text that to in spanish that not all users understand. Suggesting to change the copy button text to "copied" instead . One way is by using a state variable and using conditional rendering to update the button text.
  • the design has a blue connector going through the features cards, one way to add that is to use z-index, tailwind css has z-index utility, check it out here - https://tailwindcss.com/docs/z-index
  • storing the shorten url list in local storage so the user can have history of the urls shortened

  Hope this helps!

  snhase

  0

  Marked as helpful
• 

  Rick van Wijk•50

  @RickvWijk1

  Submitted about 1 year ago

  What are you most proud of, and what would you do differently next time?

  My main goal was to use a structured Way of Working so that any developer would understand the flow of my app. For this reason I'm proud of how I have handled state flow with Pinia.

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

  It took some time before I came up with a solution for filtering that wasn't gonna be overcomplicated. At first I was trying something that was really just overengineering for my use case. From there I simplified my filter system.

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

  I rushed the responsive design part of the filter container. I would like to know how others would ideally handle responsivity for that specific div/container.

  

  Todo app | Vue 3 + TypeScript + Pinia + API

  #axios#pinia#tailwind-css#vue#typescript

  1

  50
  

  snhase•220

  @snhase

  Posted about 1 year ago

  Hello Rick,

  Your solution looks great! Like how you added icon in front on the items to indicate there are draggable.

  I just completed this challenge myself, how I handled the responsive filter was, to make the filter as reusable component and to show/hide component using display visibility attribute when the breakpoint changes. Hope this helps!

  0
• 

  i-Ahmed•200

  @iDevil1

  Submitted over 1 year ago

  

  Multi step form

  1

  20
  

  snhase•220

  @snhase

  Posted over 1 year ago

  Hello Ahmed,

  Great job with the desktop layout!

  I recently completed this challenge and found making the site responsive a bit difficult too.

  Here are some suggestions to make it responsive.

  1. Use CSS media queries. This a very good article to understand basics of media queries - A Complete Guide to Media Queries.
  2. Use a CSS Framework like Bootstrap or Tailwind CSS

  Hope this is helpful! Happy Coding, snhase

  0
• 

  Gerges Badr•310

  @GergesBadr

  Submitted over 1 year ago

  

  REST Countries API

  #react#react-router#tailwind-css#vite

  1

  80
  

  snhase•220

  @snhase

  Posted over 1 year ago

  Hello Gerges,

  I just finished this same challenge, your solution looks great and responsive!

  I have one suggestion, in your "Filter by region" feature. I noticed the button label doesn't update the region to the region selected onClick, remains "Filter by region" . How about passing the region item value that you get from the mapping over regions list, in the handleSelectedRegion function to set SelectedRegion value instead of the event? like so handleSelectedRegion(region)?

  Hope this helps! Happy Coding :) snhase

  0