Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
6

snhase

@snhase220 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Responsive advice generator with loading animations

    #fetch#next#tailwind-css#typescript#react

    snhase•220
    Submitted 7 months ago

    I noticed the card layout can shift quite a bit when new advice is displayed since the content size changes. Any suggestions on how to best minimize layout shifts when content size is unknown? All feedback is appreciated!


    0 comments
  • Responsive URL shortening API landing page

    #express#fetch#tailwind-css#typescript#node

    snhase•220
    Submitted about 1 year ago

    Is there a better way of handling CORS error while integrating with clean URI API other than creating a proxy server? Any feedback regarding my implementation is appreciated!


    0 comments
  • Responsive Todo app

    #react#typescript#tailwind-css

    snhase•220
    Submitted about 1 year ago

    Any suggestion/feedback on how to add custom cursor styling for drag-drop function? My current implementation does show the move effect cursor but only works intermittently to show tailwind's custom grabbing cursor style.

    Also, the HTML Drag and Drop API doesn't have mobile compatiblity. In future will use some library to implement the drag and drop functionality so it's responsive. Right now I am thinking about using dndkit. Would like to ask the commmunity members if they have any other suggestions/recommendations?


    0 comments
  • Responsive signup form with input validation

    #react-testing-library#tailwind-css#typescript#react

    snhase•220
    Submitted about 1 year ago

    I would appreciate any feedback/recommendation on how I have implemented the tests for the input validation logic. Thanks!


    0 comments
  • IP Address Tracker

    #react#bootstrap

    snhase•220
    Submitted over 1 year ago

    0 comments
  • Responsive REST Countries API with color theme switcher with React

    #react#bootstrap

    snhase•220
    Submitted over 1 year ago

    0 comments
View more solutions

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
    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

  • 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
    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!

  • 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
    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

    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
    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!

  • i-Ahmed•200
    @iDevil1
    Submitted over 1 year ago

    Multi step form

    1
    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

  • Gerges Badr•310
    @GergesBadr
    Submitted over 1 year ago

    REST Countries API

    #react#react-router#tailwind-css#vite
    1
    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

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub