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

Rohan T George

@19Rohan97Waterloo, ON, CA230 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

  • Dictionary App with React, Tailwind, Context & Dark Mode

    #react#tailwind-css

    P
    Rohan T George•230
    Submitted 2 months ago
    • I'd love feedback on my use of the Context API — is there a cleaner or more efficient way to organize global state for UI preferences?
    • How can I optimize performance and avoid unnecessary re-renders across context consumers?
    • Any suggestions on improving accessibility for the font dropdown and dark mode toggle?

    0 comments
  • Mortgage repayment calculator solution

    #react#tailwind-css

    P
    Rohan T George•230
    Submitted 3 months ago

    I would love the feedback of others on how I can improve this and what I can do to make it better.


    0 comments
  • Responsive Multipage Web Application in ReactJS

    #react#react-router#tailwind-css

    P
    Rohan T George•230
    Submitted 3 months ago

    I’d love to get feedback on the following areas:

    • Error Handling: I would like to improve my form validation and error handling. Specifically, I'd like advice on implementing better UI feedback for users, particularly with multiple field validations.
    • Responsive Design: Although I've tested the design on multiple screen sizes, I'd appreciate suggestions on improving responsiveness, especially on larger screens (e.g., ensuring elements are well-aligned and look sharp).
    • Optimization: I’m interested in any advice on optimizing my React app for better performance, particularly in terms of load time and smooth transitions when navigating between pages.

    0 comments
  • Responsive Planets Fact Application in ReactJS

    #react-router#tailwind-css

    P
    Rohan T George•230
    Submitted 3 months ago

    • Optimizing dynamic classNames with TailwindCSS:
      Currently, I'm dynamically generating some classes like bg-${planet} for button backgrounds. I would love feedback on better patterns for handling dynamic Tailwind classes safely, especially during production builds (without needing large safelists in tailwind.config.js).

    • Improving performance for image loading:
      I'm directly rendering planet images based on the selected section. I'd appreciate suggestions on how to implement lazy loading or image optimization to improve performance, especially for slower network connections.

    • Error handling and redirects:
      I added a basic check for invalid planets, but I would like guidance on best practices for clean 404 handling — for example, should I add a dedicated NotFound component and route, or handle it dynamically inside the layout?

    • Project structure improvements:
      Feedback on how to better organize components, routes, and data fetching for larger scalability (like if I wanted to add moons, stars, or satellites later).

    • SEO optimization ideas:
      Right now, the page title and meta description are static. I'd love tips on how to dynamically update SEO metadata (like "Mercury - Overview") based on the active planet and section.


    ✅ This way, reviewers or other developers can give you very targeted and useful feedback!



    1 comment
  • Character Counter Using ReactJS

    #react#tailwind-css

    P
    Rohan T George•230
    Submitted 4 months ago

    0 comments
  • Password Generator App


    P
    Rohan T George•230
    Submitted over 1 year ago

    0 comments
View more solutions

Latest comments

  • Viktor Rumenov•60
    @TamarawGuy
    Submitted 2 months ago

    QR Code component using HTML and CSS

    2
    P
    Rohan T George•230
    @19Rohan97
    Posted 2 months ago

    Awesome work! You've replicated the design exceptionally well — your attention to detail and execution really stand out. It's evident that you understand the layout structure and styling principles well. Keep up the great work!

    ✅ One Suggestion – Simplify with Universal Selector *

    In your CSS, I noticed you've explicitly listed out every single element (like html, body, div, h1, p, etc.) for resetting default styles. While this is thorough and ensures cross-browser consistency (especially for older projects), it’s also quite verbose and can be simplified in modern workflows.


    🔁 Recommendation: Use the Universal Selector

    Instead of:

    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    ... (and many more)
    

    You can use:

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    

    This does the same job more efficiently by:

    • Removing default margin and padding from all elements
    • Setting a consistent box-sizing model (border-box) which is easier to manage when working with padding and widths

    🕹️ Optional for Older Browser Compatibility

    If you're specifically targeting older browsers or legacy layouts, it’s still valid to use a detailed reset like the one you provided. It follows the Eric Meyer reset pattern, which was popular before modern CSS tools became mainstream.

    However, for most current web development scenarios, especially in a learning or modern portfolio project, the universal * selector or a CSS Reset/Normalize file is enough.


    🧠 Pro Tip

    For even better practice, combine the universal selector with ::before and ::after to cover pseudo-elements:

    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    

    This ensures full consistency in how box dimensions are calculated — even for decorative elements like icons or overlays.

  • Lalalaloo•40
    @Lalalaloo
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm really proud that i was able to replicate the design.

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

    I didn't know much about git or git-hub, since i am a beginner, but this project taught me. After hours of videos, i finally got it.

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

    The entire code. Any feedback would be helpful

    Qr code component using html and css

    1
    P
    Rohan T George•230
    @19Rohan97
    Posted 2 months ago

    Awesome work! You've replicated the design exceptionally well — great attention to detail and execution. It’s clear you’re developing a solid understanding of layout and responsiveness. Keep it up!

    📱 Suggestion: Embrace Mobile-First Approach

    I noticed that in your CSS, you’ve used max-width media queries, which means you're working from a desktop-first mindset and scaling down for smaller devices.

    Instead, I recommend switching to a mobile-first approach, which is the current best practice in responsive design.


    ✅ Why Mobile-First Is Better:

    • Performance: Mobile devices often have slower connections. Serving them a lightweight layout first improves load speed.
    • Progressive Enhancement: You start with the most basic version (mobile) and then enhance it for larger screens.
    • Maintainability: Writing base styles for mobile and layering min-width media queries for tablets and desktops is easier to scale and debug.

    💡 Example:

    Instead of this (desktop-first):

    .element {
      font-size: 24px;
    }
    
    @media (max-width: 768px) {
      .element {
        font-size: 16px;
      }
    }
    

    Go for this (mobile-first):

    .element {
      font-size: 16px;
    }
    
    @media (min-width: 768px) {
      .element {
        font-size: 24px;
      }
    }
    

    This way, you're building from the smallest viewport up — and letting styles grow with the screen size.


    Let me know if you want help refactoring your current CSS to follow this approach — I'd be happy to assist!

    Marked as helpful
  • uconnwomensbball•190
    @uconnwomensbball
    Submitted 3 months ago
    What specific areas of your project would you like help with?

    Looking for a solution to getting the remove/add buttons level and at the same place on every extension. Based on how much text the extension has, the remove/add buttons and toggle bar will be higher or lower. Just changing "justify" (e.g. between, around) does not fix issue.

    Browser Extension Manager UI

    #tailwind-css
    1
    P
    Rohan T George•230
    @19Rohan97
    Posted 3 months ago

    Feedback for Tailwind Card Implementation

    Heyy!! 👋

    You did awesome. I love the Tailwind implementation — seriously great work! 🎉

    I checked your code and noticed why the alignment of the bottom part of the card is not equal across all the cards.

    Here’s the relevant code snippet:

    <div class="bg-slate-900 border flex flex-col items-center justify-between mx-2 my-2 p-3 px-4 rounded-3xl w-74">
      <div class="flex mt-3 mb-9">
        <img src="logo-tab-master-pro.svg" class="mr-4 w-20 h-20">
        <div class="flex-col">
          <h1 class="text-2xl font-semibold">TabMaster Pro</h1>
          <p class="text-xl">Organizes browser tabs into groups and sessions.</p>
        </div>
      </div>
      
      <div class="flex items-center justify-between w-full">
        <button id="5" class="remove-btn text-xl bg-slate-900 px-4 py-2 rounded-3xl border hover:bg-orange-600 hover:text-stone-950">Add</button>
        <label class="inline-flex items-center cursor-default pointer-events-none">
          <input type="checkbox" value="" class="slide-btn sr-only peer">
          <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-500 rounded-full peer dark:bg-gray-700 peer-checked:bg-red-500 transition-colors duration-300 cursor-default pointer-events-none"></div>
          <div class="absolute w-5 h-5 bg-white rounded-full transform peer-checked:translate-x-full transition-transform duration-300 ml-1 mt-0.5 cursor-default pointer-events-none"></div>
        </label>
      </div>
    </div>
    

    What went wrong?

    • You correctly gave flex-col to the main container, but flex-col alone only sets flex-direction: column.
    • You forgot to add flex itself to the main container.
    • Because of that, the space between the top and bottom parts is not distributed properly.

    How to fix it?

    ✅ Make sure the main container has both flex and flex-col:

    <div class="flex flex-col ...">
    

    ✅ Also, ensure the bottom container (the one with the buttons) has w-full so it stretches properly:

    <div class="flex items-center justify-between w-full">
    

    Awesome job once again! Just these tiny adjustments and your cards will look 🔥 perfectly aligned!

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

Beta Member

This badge is a shoutout to the early members of our community. They've been around since the early days, putting up with (and reporting!) bugs and adjusting to big UX overhauls!

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