Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
10
Comments
5
Jonathan Peters
@QMS85

All solutions

  • IP Address Tracker


    Jonathan Peters•230
    Submitted about 1 month ago

    Here are the specific areas where I'd most value feedback and assistance...

    1. Code Architecture & Best Practices...
    • JavaScript Class Structure:
      I'd like feedback on whether the IPTracker class organization is optimal. Specifically:
      A. Is the separation between initializeMap(), bindEvents(), and data handling methods clear enough?
      B. Should I break down the searchIP() method further for better single responsibility?
      C. Are there any JavaScript design patterns I could implement to make the code more maintainable?
    1. Error Handling & User Experience...
    • API Integration Strategy:
      The current mock data system works for demo purposes, but I'd appreciate guidance on:
      A. Best practices for transitioning from mock data to real IPify API calls
      B. How to implement proper rate limiting and caching strategies Whether my current error handling approach (alert() fallback) should be replaced with something more sophisticated like toast notifications or inline error displays
    1. Performance Optimization
    • Map Rendering & Responsiveness:
      I'm particularly interested in feedback about:
      A. Whether the Leaflet.js initialization and marker management could be optimized further
      B. If the current responsive breakpoints (375px, 768px, 1024px, 1440px) provide the best user experience across devices
      C. How to improve initial page load performance, especially with the map library
    1. Accessibility Implementation
    • ARIA and Screen Reader Support:
      While I've implemented basic accessibility features, I'd value input on:

    A. Whether the current ARIA live regions for dynamic content updates are sufficient
    B. If the custom marker implementation maintains proper accessibility standards
    C. Any accessibility edge cases I might have missed in the search form or map interaction
    5. CSS Grid & Layout Consistency

    • Info Panel Responsive Design:
      The grid layout transitions from 1 to 2 to 4 columns, but I'd appreciate feedback on:

    A. Whether the visual hierarchy remains clear at all breakpoints If the overlapping header/info panel design could be more robust
    B. Any CSS Grid improvements that could simplify the responsive logic

    These are the areas where targeted feedback would help me elevate this project from a working demonstration to production-ready code.


    0 comments
  • Job Listings


    Jonathan Peters•230
    Submitted about 1 month ago
    • Performance Optimization
      Current Implementation:
      Basic lazy loading is implemented, but there's room for improvement.

    • Specific Help Needed:

    Is the current filtering performance adequate for larger datasets (1000+ jobs)?
    Should you implement debouncing for rapid filter changes?
    Would virtual scrolling be beneficial for very long job lists?

    • Accessibility Edge Cases
      Current Implementation: Good ARIA support and keyboard navigation, but some areas could be refined.

    • Specific Help Needed:

    Are the screen reader announcements too verbose or not descriptive enough?
    Should filter removal have more specific keyboard shortcuts (like Delete key)?
    Is the focus management optimal when filters are added/removed dynamically?


    0 comments
  • Product List With Cart


    Jonathan Peters•230
    Submitted about 1 month ago

    Looking at this Product List with Cart project, here are the specific areas where I'd appreciate feedback or help:

    Performance & Optimization Areas:

    1. State Management Architecture
      The current global cart array and direct DOM manipulation pattern works but could be more scalable. Should I implement a more structured state management pattern like a reducer or observer pattern for better predictability?

    2. Event Listener Memory Management
      I'm re-attaching event listeners every time addProductEventListeners() runs after re-rendering. Is there a more efficient way to handle dynamic event delegation without potential memory leaks?

    3. Image Loading Strategy
      Currently using responsive <picture> elements, but with 9 products each having 4 image variants (36 images total), should I implement lazy loading or image preloading strategies for better performance?

    Accessibility & UX Concerns:

    1. Screen Reader Experience
      The cart quantity updates use aria-live="polite" but I'm unsure if the screen reader experience is optimal when rapidly changing quantities. Should I debounce the announcements?

    2. Focus Management in Modal
      Basic focus trapping is implemented, but should I add more sophisticated focus management like cycling through focusable elements with Tab/Shift+Tab?

    Code Quality Questions...
    6. Error Handling Robustness
    The fetch for data.json has basic error handling, but should I add retry logic, loading states, or more graceful fallbacks for network failures?

    1. CSS Grid Responsiveness:
      The layout works well from mobile to desktop, but should I add more intermediate breakpoints or use container queries for better adaptation to various screen sizes?

    Specific Code Review Request:
    I'd particularly appreciate feedback on the updateCartDisplay() and renderCartItems() functions - are they doing too much work and should they be split into smaller, more focused functions?

    These are the areas where I feel the implementation could be improved for better maintainability, performance, and user experience.


    0 comments
  • Multi-Step-Form


    Jonathan Peters•230
    Submitted about 1 month ago

    Some Areas Where I Could Use Some Help:

    1. Form Persistence & Data Recovery
    • Add localStorage to save progress so users don't lose data on page refresh
    • Implement session recovery functionality
    1. Enhanced Validation & User Experience:
    • Real-time validation feedback as users type
    • Better phone number validation with formatting
    • Visual indicators for completed steps
    • Smooth animations between step transitions
    1. Accessibility Improvements:
    • Enhanced keyboard navigation between form elements
    • Better screen reader announcements for step changes
    • Focus management when navigating between steps

    0 comments
  • Rock-Paper-Scissors-Game


    Jonathan Peters•230
    Submitted about 1 month ago

    Accessibility Improvements

    Error Handling: The code currently has minimal error handling.

    My Specific questions would be:

    1. How to handle cases where SVG icons fail to load?
    2. What to do if localStorage is disabled or full?
    3. How to gracefully handle DOM manipulation errors?

    0 comments
  • EasyBank Website (Built With HTML, CSS & JavaScript)

    #node

    Jonathan Peters•230
    Submitted about 1 month ago

    Some Specific Areas Needing Support:

    1. Performance Optimization:
    • Image optimization strategy for the hero mockup images.
    • Bundle size analysis and code splitting implementation.
    • Proper lazy loading for article images and components below the fold.
    1. Animation and Micro-interactions:
    • Implementing smooth scroll animations using Framer Motion.
    • Adding hover states and transitions that match the design system.
    • Creating engaging loading states for better UX.

    Some Code Specific Questions:

    1. Are there any best practices for handling the hero section's complex background positioning across different screen sizes???
    2. What is the Optimal way to structure the articles data - should it come from a CMS or API???

    1 comment
  • Product Preview Card Component (Built with HTML, CSS & JavaScript)

    #node

    Jonathan Peters•230
    Submitted about 1 month ago

    Here are some specific areas where I might want help or feedback:

    Frontend Development & User Experience

    • Animation & Micro-interactions: How can I add smooth hover effects, loading animations, or page transitions to enhance the user experience?

    • Accessibility Testing: Are there specific screen reader behaviors or keyboard navigation patterns I Can test and improve?

    Code Architecture & Best Practices

    • State Management: How can I implement a proper shopping cart state that persists across page reloads using localStorage or sessionStorage?

    • Error Handling: What's the best way to handle network failures, image loading errors, or API timeouts gracefully?

    • Code Organization: How Do I refactor the JavaScript into modules or classes for better maintainability?

    Deployment & Production

    • SEO Optimization: How can I add structured data markup (JSON-LD) for better search engine visibility?

    • Progressive Web App: What steps are needed to make this work offline or as a PWA component?


    0 comments
  • Social Links Profile


    Jonathan Peters•230
    Submitted 4 months ago

    i need to make more time to complete projects


    0 comments
  • Blog Preview Card


    Jonathan Peters•230
    Submitted 4 months ago

    Interactive Features: Adding click events to the card Implementing a modal view for the full article Adding share functionality


    1 comment
  • QR Code Component


    Jonathan Peters•230
    Submitted 4 months ago

    Honestly, i think i need to take more time out to practise CSS, as some of the stuff, im familiar with, but this project has made me realise that i need to take some time out just to code, in this case CSS


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