All solutions

1. What are the best practices for React app performance? Any documentation would be greatly appreciated.

2. Best practices regarding color theme switcher with MUI 5? I kind of used a work around for switching themes with a custom color palette, but I think there are easier ways to do this, I just don't know how.

3. Framer motion page transitions with React Router DOM v6.4. I've searched all over the place for anything that talks about how to create page transitions with both of them. I am using the data browsers (createBrowserRouter([]) with the loader functionality which is really great. However, I can't get to show page change animations since I can't practically use the useLocation() API hook. This was a nagging question, so if anyone has a solution. Please tell me.

Another really annoying question. The screenshot taken by FrontendMentor is taken at a zoom of 110% which disrupts the display a little bit. Any suggestions for t

I think the main issue is performance. I do believe that I haven't followed best practices regarding altering state. On this scale, performance is fine. So, if anyone could check the code and give me suggestions, I would greatly appreciate it.

I have to say, this wasn't as easy as it looked. It was my first experience with Material UI, so there was a lot to figure out. I wanted to give this a practice and it bear fruit.

Now, the questions are:

1. Using a customized Dark Theme/Light Theme palette in Material UI and switching between them, the documentation doesn't give enough information on how to do it. So are they any code gists explaining this clearly?

2. Using AnimatePresence framer motion with react array maps, how do you animate on initial presence? Doesn't seem to work out that much for me.

3. Is it better to use Redux for such small projects? or is it better to stick with the useContext API?

This challenge took way longer than expected.

So, I'd appreciate feedback in the following areas:

1. How to handle zooming on the website that it doesn't affect the design? I've noted that the clamp values don't behave as well when browsers zoom out. What is the best course of action regarding this?

2. I tried to animate with GSAP but for some odd reason, it created huge overflows. So is it better to stick to CSS transitions in these situations ?

3. The menu-bar, in the design there was a speech bubble like part. How on earth do you create that? I've tried :before or :after and nothing seems to work. So feedback on this would be much appreciated.

I really loved this challenge. I was really enjoying doing it.

So the questions are:

1. Best practices for using (minmax) inside of the grid-template-columns property?
2. Clamp with font-size, I can see the magic, but I can't get it just quite right. Resort to using online calculators at the end.

I have utterly struggled with this challenge for some odd reason. Not really proud of this solution like my last one. Somehow, I think all alignment is off, and for goodness' sake I can't seem to fix it.

I think the main question is what can be improved?

I also need advice and suggestions regarding setting the width of elements which is sometimes becomes very tedious and hard.

I would really any advice about refactoring the JavaScript code. Is there room for improvement here?

I think the main question was how to edit the SVG icons depending on screen size using a media query. I solved it with JavaScript but definitely there is a better way

If anyone can comment on the mistakes that had been made, I would really appreciate it.

Are the media queries correct?

Is it responsive on all different devices?