Skip to content
OverviewSolutions
17
Comments
17
P

Kyle Mulqueen

@kmulqueenSanta Clara, CA380 points

Full Stack Web Developer, Musician

I’m currently learning...

TypeScript, Tailwind CSS

Latest solutions

  • Responsive and accessible contact form with validation

    #accessibility
    P
    Kyle Mulqueen•380
    Submitted about 15 hours ago

    I'd appreciate input on whether my form validation approach follows standard practices, or if there are better patterns I should be using. Specifically interested in feedback on the Map-based approach for handling input-to-error-message relationships.

    0 comments

  • Responsive FAQ Accordion with only HTML/CSS

    P
    Kyle Mulqueen•380
    Submitted 6 days ago

    Best practices when using absolute positioning for items.

    1 comment

  • Rating Component with React, TypeScript, and Tailwind CSS

    #accessibility#react#tailwind-css#typescript#vite
    P
    Kyle Mulqueen•380
    Submitted 9 days ago

    Context-API and state management patterns. Also I would appreciate feedback on my Tailwind CSS usage. I think that has been improving but I'm still not sure I'm using utility and component classes correctly.`

    1 comment

  • Frontend Quiz App - React, TypeScript & Tailwind

    #accessibility#react#tailwind-css#typescript#vite
    P
    Kyle Mulqueen•380
    Submitted 10 days ago

    TypeScript best practices.

    0 comments

  • Password Generator using TypeScript, React, Tailwind

    P
    Kyle Mulqueen•380
    Submitted 30 days ago
    1. Optimization of the password generation algorithm to ensure truly random and secure passwords.
    2. Advanced accessibility testing methodologies beyond basic keyboard navigation.
    3. Better TypeScript patterns for complex state management.
    4. Performance optimization techniques for React component rendering.
    1 comment

  • Tip Calculator App HTML/CSS/JS

    P
    Kyle Mulqueen•380
    Submitted about 1 month ago

    • Testing strategy: Implementing unit tests for calculation functions to verify accuracy with edge cases like zero values and decimal precision

    • State management: Refactoring to a more structured approach using a central state object or module pattern instead of separate variables

    • Input validation: Enhancing error handling with more descriptive user feedback for different error conditions

    • Accessibility verification: Testing with actual screen readers to ensure ARIA implementations and dynamic updates work correctly

    • Browser compatibility: Ensuring consistent form behavior across different browsers, especially regarding form state persistence

    1 comment
View more solutions

Latest comments

  • P
    Kyle Mulqueen•380
    @kmulqueen

    Nice work on this project! I noticed a couple of areas that could enhance the user experience:

    1. The form doesn't reset the input fields after successful submission - users might expect the form to clear automatically.

    2. There's a persistent error state issue: if you submit with invalid input (showing errors), then fix the validation errors and resubmit, the error messages remain visible even after successful submission.

    Both are pretty common edge cases that are easy to miss during development. Overall, solid implementation though!

  • amir mirzakhani•170
    @amir-mirzakhani
    What are you most proud of, and what would you do differently next time?

    .

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

    .

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

    .

    js

    1
    P
    Kyle Mulqueen•380
    @kmulqueen

    Nice work on this project! The functionality works smoothly, and I really appreciate the thoughtful animation you added for the accordion content transitions - it creates a polished user experience.

    I noticed a couple of minor details that could enhance the visual accuracy:

    • The body background appears to be white, but based on the design it should be the light purple color
    • There seems to be some extra spacing after the +/- icons that could be tightened up

    One suggestion for future projects: you might want to explore the native HTML <details> and <summary> elements, which provide built-in accordion functionality without requiring JavaScript. They also come with accessibility features like keyboard navigation right out of the box.

    Overall, this is solid work with good attention to functionality and user experience. The animation touch really elevates the interaction!

  • P
    Kyle Mulqueen•380
    @kmulqueen

    Design looks good visually, but there are significant implementation issues:

    Mobile responsiveness is broken - On mobile devices the layout is cramped and needs proper responsive breakpoints.

    Semantic HTML is completely missing - using <div> for everything creates major accessibility problems! Your submit button should be a <button>, not a <div> with onClick. This breaks:

    • Keyboard navigation
    • Screen readers
    • Form submission
    • Basic web standards

    Quick fixes needed:

    <!-- Your current code -->
<div onClick={handleSubmit}>Submit</div>

<!-- Should be -->
<button type="submit" onClick={handleSubmit}>Submit</button>

    Same applies to other interactive elements. Use proper HTML elements (<form>, <button>, <main>, etc.) instead of styling divs to look like buttons.

    Marked as helpful
  • P
    kephalosk•380
    @kephalosk
    What are you most proud of, and what would you do differently next time?

    Responsive Design down to 150px by using vw, vh, text-break, overflow-hidden, etc.

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

    First time implementing darkMode by saving the boolean state of darkMode to the global redux state and just read it where needed and set conditional dark/light-css classes.

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

    Recommended scale-factors for clamp function. I allways have to set down the given font-sizes to prevent oversized fonts.

    Frontend Quiz using React/TypeScript/Jest/Redux/SCSS

    #jest#react#redux#typescript#sass/scss
    1
    P
    Kyle Mulqueen•380
    @kmulqueen

    I think you did an incredible job! Dark mode functionality is working great, the design is spot on to the design spec. Also nice job adding Jest tests.

    As for the clamp function and using that for font-sizes, the article in the "Building responsive layouts" learning path was helpful. That article also mentions this web.dev article as well. Hopefully you find some answers there!

  • P
    Kyle Mulqueen•380
    @kmulqueen

    Looks true to the design and works great! The slider functionality and progress effect are smooth. Nice interaction effects on the checkboxes and strength indicator. Clean implementation overall - great job!

  • Barnabas001•180
    @Barnabas001
    What are you most proud of, and what would you do differently next time?

    My progress so far, seem slow but daily pushing forward

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

    Order of arrangements in my javascript file, i was able to sort it by going through series of code online that relate to what i was facing

    Responsive tip calculator

    1
    P
    Kyle Mulqueen•380
    @kmulqueen

    Nice work on your tip calculator! Here's my feedback:

    Strengths

    • Clean UI with good visual feedback for active states
    • Responsive design for different screen sizes
    • Effective input validation
    • Good implementation of the color scheme

    Suggestions

    • Move your HTML structure from JavaScript to the HTML file for better SEO and page loading
    • Replace prompt() for custom tip with an integrated input field
    • Validate inputs as they change rather than only when calculating
    • Add keyboard accessibility (tab navigation, Enter key support)
    • Consider implementing proper error handling for non-numeric custom tip values
    • Add ARIA attributes and proper labeling for accessibility

    While your project URL mentions React, I don't see React being used in the code. This calculator would work well as a React component if you're interested in refactoring it!

    Overall, you've built a functional app with a good UI. The main improvements would be in accessibility and user experience.

View more comments