Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
8
Comments
3

Justin Levy

@justinsaneSan Francisco, CA100 points

Learning front end coding as a side hobby based in San Francisco.

I’m currently learning...

React, Tailwind and eventually Next.js.

Latest solutions

  • Interactive Rating Component - React & Tailwind

    #react#tailwind-css

    Justin Levy•100
    Submitted 12 months ago

    Am I using React state correctly in this example?

    function App() {
      const [rating, setRating] = useState(null);
      const [submitted, setSubmitted] = useState(false);
    
      const handleSubmit = (e) => {
        e.preventDefault();
        if (rating !== null) {
          setSubmitted(true);
        }
      };
    
    function Rating({ setRating, handleSubmit, rating }) {
      const handleRating = (value) => {
        setRating(value);
      };
    

    1 comment
  • Product Preview Card - React & Tailwind CSS

    #react#tailwind-css

    Justin Levy•100
    Submitted 12 months ago

    Ways or tips to simplify the design process for both small and large screens.


    2 comments
  • Results Summary (React & Tailwind CSS)

    #react#tailwind-css

    Justin Levy•100
    Submitted about 1 year ago

    Is there a better way to dynamically style color using Tailwind CSS? See my challenge above.


    0 comments
  • FAQ Accordion (React and Tailwind CSS)

    #react#tailwind-css

    Justin Levy•100
    Submitted about 1 year ago

    I'm curious if the keyboard focus solution that I implemented is reasonable. Is there a simpler or cleaner way?

    function AccordionItem({ title, text }) {
      const [isOpen, setIsOpen] = useState(false);
      const headerRef = useRef(null);
    
      function handleToggle() {
        setIsOpen(prevIsOpen => !prevIsOpen);
      }
    
      const handleKeyDown = event => {
        if (event.key === 'Enter' || event.key === ' ') {
          handleToggle();
        } else if (event.key === 'ArrowDown') {
          const nextSibling = headerRef.current.parentElement.nextElementSibling;
          if (nextSibling) {
            nextSibling.querySelector('.accordion-header').focus();
          }
        } else if (event.key === 'ArrowUp') {
          const previousSibling =
            headerRef.current.parentElement.previousElementSibling;
          if (previousSibling) {
            previousSibling.querySelector('.accordion-header').focus();
          }
        }
      };
      return (
        
          
            {title}
            
          
          
            {text}
          
        
      );
    }
    

    0 comments
  • Blog Preview Card (React and Tailwind)


    Justin Levy•100
    Submitted about 1 year ago

    I could use more help translating the Figma design to css, specifically how to use 'rem' and the association with Tailwind classes.


    2 comments
  • Social Links Profile (React and Tailwind CSS)

    #react#tailwind-css

    Justin Levy•100
    Submitted about 1 year ago

    Can I improve this by using React useState hook for the hover function or is CSS hover properties sufficient?

    Eg-

    a:hover {
      @apply bg-green text-black;
    }
    

    2 comments
View more solutions

Latest comments

  • srinu-vinay-kumar•240
    @srinu-vinay-kumar
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of how I managed to create a responsive design that looks good on both mobile and desktop screens. Ensuring that the layout adjusted seamlessly to different screen sizes was a significant achievement for me. Next time, I would focus more on optimizing my code for better performance, including reducing the load time and improving accessibility features. Additionally, I would incorporate more user feedback early in the development process to refine the design and functionality.

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

    One of the main challenges I encountered was dealing with cross-browser compatibility issues. Some features that worked perfectly in one browser did not behave the same in another. To overcome this, I used tools like BrowserStack to test my site across different browsers and devices. I also researched and implemented various polyfills and CSS hacks to ensure consistent behavior. Additionally, I had to deepen my understanding of CSS Flexbox and Grid to solve layout issues, which I managed through online tutorials and practice.

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

    I would like help with improving the efficiency and cleanliness of my CSS code. While my design is functional, I feel there may be more effective ways to structure my styles to reduce redundancy and improve maintainability. Additionally, I'm seeking advice on enhancing the accessibility of my project. Ensuring that my HTML and CSS are optimized for screen readers and other assistive technologies is important to me, and I would appreciate guidance on best practices. Lastly, feedback on how to better organize my HTML structure for readability and future scalability would be very beneficial.

    Social Links Profile using HTML, CSS

    3
    Justin Levy•100
    @justinsane
    Posted about 1 year ago

    Nice work!

    Did you use generative AI for the 'solution retrospective'? I'm confused why you mentioned optimizing code and cross-browser compatibility issues for such a simple web component.

    A few areas to explore:

    • can you create hyperlinks to the social media sites?
    • should the buttons be wider?
  • Edu209C•80
    @Edu209C
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    What satisfies me the most is the fact that I've learned something new. Learning a new trick every day is a great achievement.

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

    Finding the right elements and styles to optimize the code and the result.

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

    Any suggestions are welcome.

    Simple but elegant link card made with CSS

    2
    Justin Levy•100
    @justinsane
    Posted about 1 year ago

    Nice job. Looks great.

    Should mouse hover over the links fill the entire area green?

  • SarahBiscuit•40
    @SarahBiscuit
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am proud that I used experience of using Bootstrap cards on a different project to get this to work effectively and simply. And that I was able to fix issues with it not centering properly.

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

    I struggled with getting the card to center and had to research how to fix it.

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

    I struggled with getting the image to center vertically.

    QR Component - used HTML, CSS and Bootstrap cards

    #bootstrap
    2
    Justin Levy•100
    @justinsane
    Posted about 1 year ago

    Nice design.

    Have you explored border radius using boostrap?

    Marked as helpful
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