Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
20
Comments
35
P
Karthik suryadevara
@karthik2265

All comments

  • P
    K Akash Rao•150
    @kakashrao
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    This was my first time working on a feature for switching between light and dark modes. It took me some time to explore the best ways to utilize the available resources effectively.

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

    This is my first project built from scratch using React. I simultaneously read and worked on features, which helped me grasp the concepts more effectively. At times, I faced challenges with React libraries like React Hook Form and IndexedDB. To overcome these, I referred to the documentation and applied the concepts directly to the project.

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

    As I come from an Angular background, I would greatly appreciate your feedback on the following areas:

    Component Structure and Usage: Is my approach to handling components—such as their structure, usage of props, and implementation of hooks—well-organized, or are there areas where I could improve?

    State Management Choices: Should Redux be used universally for data handling, or is it acceptable to use Context API selectively, as I did in one instance despite having a Redux store?

    General Improvements: Any other suggestions for improvement—be it in terms of CSS, best practices, or other aspects—are more than welcome.

    React based web application using redux, shadcn and tailwind.

    #react#redux#redux-toolkit#shadcn#tailwind-css
    1
    P
    Karthik suryadevara•865
    @karthik2265
    Posted 6 months ago

    Hi akash,

    here are my thoughts/feedback on the solution:

    the functionality and design looks good. The responsiveness was also well handled. A small bug, I noticed that when a task is added with 0 subtasks (leaving the first subtask field empty when adding the task) it just renders 0 without any additional text to suggest that 0 means 0 subtasks.

    code

    • good idea to have draggable and droppable components, this way if we want to change the library in the future we only need to change in one place.
    • for the file structure, for me it makes sense to have the pages folder inside the src folder instead of inside the components folder and also note that it is better to follow a consistent naming pattern for files, I see that the files under the ui folder do not align with other component file naming structure which is pascal case. Also, the files inside pages folder could be organized better by placing each page file inside a folder and a dedicated folder inside the each page folder to holds the components used inside the page. Ex: home page would have structure like this home/index.tsx (holds the main page content), home/components (holds the components used in home page)
    • const listeners: Array<(state: State) => void> = [];used for dispatching actions and linked with setState, this could be simplified by using a useReducer hook provided by react.
    • redux for data handling or context with useEffect for client side data fetching/handling was used in the past but as of now many modern projects use libraries like tanstack query for data handling in the app on client side and another option is to use next.js or remix which handle data related updates on the server side with support for server rendered components. I liked working with remix and next.js, do try them out.

    overall the solution looks good, nicely done!

    Marked as helpful
  • P
    Alfie Mitchell•240
    @alfiemitchell123
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of successfully integrating Firebase into my app. It enabled me to add user authentication and real-time database features, which I had never done before. This is the first project where I’ve built something dynamic like this, and seeing it work felt like a big accomplishment.

    Next time, I’d focus more on getting the structure right from the beginning instead of rushing through certain parts. I ran into some bigger issues down the line (such as hydration errors) that would’ve been much easier to solve if I had taken the time to lay the groundwork properly at the start. It would’ve saved me a lot of trouble and kept the project moving more smoothly.

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

    Firebase Issues: One of the toughest challenges I faced was figuring out how to effectively pass data between components. Retrieving data from Firebase was already tricky, but the real challenge came when I needed to pass that data through multiple components—especially when they were related but not directly connected. It took a lot of trial and error, digging through documentation, and making good use of developer tools like Copilot, but eventually, I figured out how to get everything working smoothly.

    Hydration Issues: Hydration errors were another major challenge. These occur when the HTML rendered on the server doesn’t match what the client-side JavaScript expects, often causing the app to crash. It’s a common issue with web frameworks, as I’ve now learned the hard way.

    I noticed the app ran more smoothly in incognito mode, which led me to realize that one of my browser extensions was causing part of the problem. Additionally, working with Chakra UI introduced its own set of issues—a configuration problem with the theme setup in the root file was also contributing to the crashes. Looking back, I wish I had tackled these problems earlier in development, as they became more difficult to resolve later on.

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

    If you would like to test the application with pre-filled data, the user credentials are:

    • Email: demo@finance.com
    • Password: frontend

    I’d like some feedback on the overall structure of the code in my project. Does it follow good architectural practices? Are there areas where I could improve? Any suggestions to make it cleaner and easier to work with in the long run would be greatly appreciated.

    I’d also love some feedback on how I’ve used Remix. Early on, I didn’t take the time to fully understand all its features, like using loaders for server-side rendering and boosting app performance. My app works fine without them, but I’m wondering if adding them would have made a noticeable difference in terms of efficiency or scalability. Do you think incorporating them would have been worth the effort?

    Full Stack Personal Finance App with Remix, Firebase and Chakra UI

    #chakra-ui#firebase#remix#typescript#react
    2
    P
    Karthik suryadevara•865
    @karthik2265
    Posted 6 months ago

    Hi mitchell, fellow frontend developer here sharing my thoughts on this:

    functionality and design

    The solution matches the design very well, good job. The loading spinner and the notifications adds a nice experience to the user, looks like you have thought this through. few things you can add to improve:

    • adding a smooth transition between pages, modal closing and for the side menu collapse.
    • the loading spinner for the transactions page appears at the top instead of in the middle like the other pages
    • adding a notification while redirecting the user to the login page when not logged in would make the user experience even better

    code

    • the file structure looks well and intuitive. There was one emotion file outside the emotion folder, but I think it makes sense to have it inside the folder.
    • looks like you have added some logic to add a different layout for '/login' and '/register' routes. You can achieve this by using the file based routing provided by remix. This would mean less code to test and easier to maintain.
    • is the Link component from chakra UI compatible with remix? we should use the Link component provided by remix because remix suggests that is the way to go about navigation in a remix app.
    • nicely handled edit mode and add mode for components, I tried this once and it gets tricky and we better keep it organized like you did. just a tiny nit, we could use an enum for checking the component mode.
    • In noticed in few try catch blocks where you are just logging the error, maybe adding a notification would make the user experience better. Also it's better not to log errors from firebase in the browser console for security reasons.
    • Handling the loading state when data is added from pages inside the hooks would be a good idea. I think using the server side data handling feature provided by remix would work, but if you have to implement this in your current app which is mainly structured by using hooks, it would take some considerable time and effort. Just wanted to share my idea here. ex link: https://remix.run/resources/remix-auth

    Overall, nice work. I liked this solution.

    Marked as helpful
  • Khent Alba•440
    @Lemon1903
    Submitted about 2 years ago

    Todo-App build with React, Tailwind CSS, and Framer-Motion

    #motion#react#tailwind-css
    1
    P
    Karthik suryadevara•865
    @karthik2265
    Posted about 2 years ago

    Hey khent,

    The app works well. The code also seems well organised and structured, good use of custom hooks and context for state management. Framer motion seems to be doing a good job for animations.

    For some reason the light and dark mode functionality doesn't seem to be working in brave browser.

  • Joanna Skrzypczak•510
    @joaskr
    Submitted over 2 years ago

    Rest Api Countries App - React, SCSS, Framer-Motion, Axios

    #motion#react#sass/scss#axios
    1
    P
    Karthik suryadevara•865
    @karthik2265
    Posted over 2 years ago

    Hey joana,

    The solution looks good and the responsiveness also works well.

    few good things I noticed in the code.

    • The components and the folder structure looks organized, well done.
    • Framer motion works very smoothly, good choice
    • Good use of context for theme
    • Since the data is filtered on the backend it's a great idea to use debounce.
    Marked as helpful
  • Melvin Aguilar 🧑🏻‍💻•61,020
    @MelvinAguilar
    Submitted over 2 years ago

    Intro section with dropdown navigation (React + Tailwind + Dark mode)

    #accessibility#react#tailwind-css
    11
    P
    Karthik suryadevara•865
    @karthik2265
    Posted over 2 years ago

    Hey melvin,

    The solution looks good and the responsiveness is also pretty good.

    a few things to note,

    In the ThemeSwitcher Component

     <input
            type="checkbox"
            className="m-t absolute top-0 left-0 z-10 h-full w-full cursor-pointer appearance-none"
            checked={darkMode}
            role="switch"
            aria-checked={darkMode}
            onChange={() => setDarkMode(!darkMode)}
          />
    

    when calling the setDarkMode you should prefer to do it using a function since the state update depends on previous state.

     <input
            type="checkbox"
            className="m-t absolute top-0 left-0 z-10 h-full w-full cursor-pointer appearance-none"
            checked={darkMode}
            role="switch"
            aria-checked={darkMode}
            onChange={() => setDarkMode((prev) =>  !prev)}
          />
    

    this should be preferred because sate updates happen asynchronously, check out this resources for more details

    using a function in setState medium article

    stack overflow question about function in setState

    The effect you are running for theme switching, this might affect perfomance as the app gets bigger

    useEffect(() => {
        if (darkMode) {
          document.documentElement.classList.add("dark");
          localStorage.setItem("theme", "dark");
        } else {
          document.documentElement.classList.remove("dark");
          localStorage.setItem("theme", "light");
        }
      }, [darkMode]);
    

    another way to do this would be to store the theme preference in an app wide state like Context API or redux store and use it in the components.

    Overall good solution, well done 👏

    Marked as helpful
  • GGS•260
    @Guilherme-Goncalves-de-Souza
    Submitted over 2 years ago

    News homepage with SASS, Flexbox and Javascript.

    #sass/scss#accessibility
    1
    P
    Karthik suryadevara•865
    @karthik2265
    Posted over 2 years ago

    hey Guilherme,

    well done the website looks good and very responsive 👏

    One thing I noticed is when I hover on an article title or on an item in header the color changes hinting that it's a link and it would be much clear if the cursor is a pointer.

    example:

    header .menu a:hover {
      color: hsl(35deg, 77%, 62%);
      cursor: pointer;
    }
    

    congratulations on completing the challenge, good work.

    Thank You

    Marked as helpful
  • staticish•190
    @staticish
    Submitted over 2 years ago

    Responsive Rock Paper Scissors with Randomize house option

    #animation#react#redux#react-native
    1
    P
    Karthik suryadevara•865
    @karthik2265
    Posted over 2 years ago

    Hey staticish,

    looks good, well done

    putting the border and adding a bonus button on the Title component was a good idea.

    some things to improve:

    • sizing of the text and images, just making them a little bigger would make it look a lot better
    • the bonus button and the play again button does not show any feedback to the user when hovered or clicked, you can add some by changing the cursor to pointer on hover and scaling the button to 0.9 when active.
    • try to put less logic in the html part, this would make the code more readable ,example:
    {state.userOption === null ? (
            <>
              {state.bonus ? (
                <Pentagon getId={getId} />
              ) : (
                <Triangle getId={getId} />
              )}) : (
            <GamePlay
              usersOption={state.userOption}
              houseOption={state.houseOption}
              results={state.results}
              playAgain={() => {
                dispatch({ type: "reset" });
              }}
            />
          )}
    // you could wrap this  in a function call or make it a component and use it
    
    • try using scoped css with css modules
  • Cosmo•590
    @cosmoart
    Submitted almost 3 years ago

    IP address tracker solution

    #axios#react#styled-components#vite
    1
    P
    Karthik suryadevara•865
    @karthik2265
    Posted almost 3 years ago

    Hey 🙋‍♂️, Cosmo

    looks awesome well done. The responsiveness is also very good.

    Some things I would prefer to change,

    The jsx would be much cleaner if we split up the TableInfo component like for example

    <> <li><span>IP Address:</span><span>{info.ip || "---"}</span></li> <li><span>Location:</span><span>{info.location.region || "---"}</span></li> <li><span>Timezone:</span><span>UTC {info.location.timezone || "---"}</span></li> <li><span>ISP:</span><span>{info.isp || "---"}</span></li> this part can be made a separate component and we can call it Info component, and

    <ErrorMessage> <svg fill="#ff4848" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M23 7.444v9.112L16.556 23H7.444L1 16.556V7.444L7.444 1h9.112L23 7.444ZM15.728 3H8.272L3 8.272v7.456L8.272 21h7.456L21 15.728V8.272L15.728 3ZM12 17.998a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm-.997-12h2v8h-2v-8Z" /></svg> {error || "Oops something is wrong"} </ErrorMessage>

    this part can be made a separate component and we can call it ErrorInfo component.

    Doing this in my opinion will make the jsx more readable and less clutterred.

    Overall the app is great.

    How did you build the loader.svg ? looks cool

    Thank You

    Marked as helpful
  • Raj Kiran Chaudhary•100
    @rk-codeflow
    Submitted almost 3 years ago

    3-Column-React-Card-Component

    #react#styled-components#sass/scss
    1
    P
    Karthik suryadevara•865
    @karthik2265
    Posted almost 3 years ago

    Hey raj kiran well done,

    The app looks great.

    few things to note,

    1. The card components have border radius for wrong edges in the mobile.
    2. The responsiveness can be improved at a certain screen size like 730px the app shows 2 cards side by side and one card below and at some point the 3rd card becomes bigger in height compared to the other two cards. these can be fixed by using flexbox for positioning of cards based on screen size using media queries.

    Thank you

    Marked as helpful
  • Leobardo Verdugo•520
    @TwoZer00
    Submitted almost 3 years ago

    HTML, CSS, Flexbox and vanilla javascript Advice app solution

    1
    P
    Karthik suryadevara•865
    @karthik2265
    Posted almost 3 years ago

    Hey Leobardo

    well done, the app works great.

    one thing you can I have noticed is that , there is vertical scroolbar on mobile , this should not actually appear because you are setting height of body to 100vh, but it does because of the internal working of mobile browsers the height becomes more than 100vh , note that this happens only in mobile browsers.

    To solve this problem here is quick solution using javascript

    const body = document.getElementById('body');

    body.style.height = window.innerHeight + 'px';

    using this the height of the body is 100vh in all browsers including mobiles as well. check this stackoverflow question for more info: https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser

  • P
    Debjit Biswas•50
    @debjit
    Submitted almost 3 years ago

    Product preview card component using Tailwindcss and NextJS and React

    #react#tailwind-css#next
    2
    P
    Karthik suryadevara•865
    @karthik2265
    Posted almost 3 years ago

    Hey debjit, well done

    The app looks nice.

    To modify the URL of an image, you can use JavaScript to do it. There is a method called window.matchMedia(query) which takes a media query like '(max-width: 600px)' as a string and returns object which contains information, the most important key in the object is matches which is a boolean value specifying if the query is satisfied or not.

    Check this out: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

    Thank You

    Marked as helpful
  • samuel jacobs•400
    @Samuel-jacobs
    Submitted almost 3 years ago

    E-commerce product page with vanilla Javascript

    1
    P
    Karthik suryadevara•865
    @karthik2265
    Posted almost 3 years ago

    Hey samuel 🙋‍♂️

    Looks great, the responsiveness is good.

    The HTML and JS are well-structured.

    One thing I have noticed is that the images are not preserving their ratio when the size of the screen changes. An option to preserve aspect ratio is to use the image as background image for a div and adjust it to the middle. Take a loot at this for info: https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio

    And another little issue is that the items in the header are not aligned, they are off by a little. Adding this should solve the issue. .topnav { align-items: center; }

    Overall well done.

    About the feature you are yet to add, I guess you might have already thought of this, you can add a click event listener for the add to cart button and do some styling to show notification on the cart, like setting the display of number element which shows the no of items in the cart to "block" and then after a few seconds (using setTimeout) turn it back to its original display "none", like a blink like thing. You can try animations for this as well using CSS.

    Thank You 😀

    Marked as helpful
  • Erick Ricky•30
    @eric-ricky
    Submitted almost 3 years ago

    Responsive layout using flexbox, API request using axios, React JS

    #axios#react#sass/scss
    1
    P
    Karthik suryadevara•865
    @karthik2265
    Posted almost 3 years ago

    Nice work,

    looks great on mobile 📱. The feedback to the user showing 'loading...' is a great idea. It's important to show user whats happening in the app.

    somethings you can improve are add a little padding to the title 'More than just shorter links' in desktop, in mobile it looks fine. if the link pasted by the user is very long, it breaks the link component and it does not show copy button.

    Thank You

  • Clement Idemudo•90
    @Clemcy9
    Submitted about 3 years ago

    shopping cart using React js and styled components

    #react#styled-components#bootstrap
    2
    P
    Karthik suryadevara•865
    @karthik2265
    Posted about 3 years ago

    looks good

    The lightbox looks great, you should definitely put more effort into css. If you want to take your css to next level try scrimba.com, they have awesome free courses.

    I found this repo to be very helpful as a resource (react), take a look https://github.com/academind/react-complete-guide-code

    Overall, well done 👏

    Aim for improvement, not perfection.

    Thank you

  • Matheus Pergoli•130
    @matheuspergoli
    Submitted about 3 years ago

    Advice Generator App

    3
    P
    Karthik suryadevara•865
    @karthik2265
    Posted about 3 years ago

    Looks great, well done 👏

    I liked how you used HTML custom data properties for selection in js. The js code is well written and easy to read. why did you place the js and css files in the assets folder, I think they go in a separate folders or just in the root.

    You forgot to add the hover effect for the button, you can easily add the effect with the following code box-shadow: -1px 0 40px 2px var(--Neon-Green), 1px 0 40px 2px var(--Neon-Green); filter: brightness(1.1);

  • Aya•150
    @aya-94
    Submitted about 3 years ago

    Advice Generator App

    1
    P
    Karthik suryadevara•865
    @karthik2265
    Posted about 3 years ago

    Nicely Done 👏

    The HTML, CSS is well structured and the Script file is easy to read. I like how you centered the dice element using position and transform properties.

    positioning the card in the center is well done, another alternative way to do that would be body { display: grid; width: 100vw; height: 100vh; place-items: center; } or using flexbox also works.

    Thank You

    Marked as helpful
  • Abubakar Jamal•420
    @abubakarjamal
    Submitted about 3 years ago

    E-commerce page

    #accessibility#styled-components
    1
    P
    Karthik suryadevara•865
    @karthik2265
    Posted about 3 years ago

    Hey Jamal,

    Good effort, the web app is close to the design, you can try doing the newbie or junior challenges before taking on intermediate challenges, so that you can improve your skills and do better with the intermediate or higher level challenges. I see that you have not used JavaScript in this project, JavaScript would have improved the responsiveness of the app for sure, if you are new to JavaScript checkout this playlist : https://www.youtube.com/playlist?list=PLZlA0Gpn_vH9k5ju1yq9qCDqvtuTVgTr6

    Hope it helps

    Thank you

    Marked as helpful
  • edguard•40
    @Akino18
    Submitted over 3 years ago

    Todo-app

    #react#tailwind-css
    2
    P
    Karthik suryadevara•865
    @karthik2265
    Posted over 3 years ago

    Looks great, Nice work.

    One thing I noticed is that, sometimes, the checked task becomes unchecked when changed between All, Active and Completed Lists. I am not able to see the code in GitHub, since it's a React app in deployment mode. Next time, You can try creating a new branch for deployment when you are done so other developers can look at your completed code in the master branch.

    Thank You

    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

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

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