I just quickly checked the design of the page, nothing else. It looks quite good. I felt that the use of circular frames in the People section broke a bit with the overall styling. I think you should put more attention to that part to make it useful to the user? Also the Image section was a bit cluttered. Maybe some small text about the image too?
put RootLayout component in your components directory
you’re using snake_case for your directory names. I would use camelCase or kebab-case as it’s more conventional
.text__container and dropdown-item--selected - double underscores and double dashes in class names are typically used in BEM, but you’re using CSS modules for scoping here, so no need to use BEM, and no need to use __. Rename to textContainer and you will no longer have to use bracket notation.
You have good use of early returns e.g. if (isLoading) return <LoadingIndicator />;
You are using relative imports. Consider using aliases for absolute imports to simplify long paths and improve readability.
Component props types should just be called Props, rather than e.g ICarousel
Be more explicit in your naming generally, even if names become more verbose. It isn’t obvious what IIdName is meant to be for example. Keep your names simple, clear and readable, and if necessary, longer / more verbose.
you should use an enum for your constants
export enum MediaType {
MOVIE = 'movie',
TV = 'tv',
PERSON = 'person',
}
Good use of React Query and abstracting those queries into reusable hooks. Makes the queries reusable and the code within components cleaner.
Again, ensure consistent casing. footerData vs NAV_LINKS
RatingSlider - why are you using styled components and css modules? pick one approach to styling and be consistent, otherwise it’s messy. Personally I would stick with css modules.
Overall it’s good but slightly messy in places. Focus on cleanliness, clarity and consistency. It shouldn’t be too hard to refactor as these are largely stylistic issues than functional ones.