Typescript Movies Website Using TMDB Api

Hey all,

I just finished the first version of my website called MovieReel for movies and tv shows.

What the Website Does:

  • Browse popular movies and TV shows.
  • Search for movies, TV shows, people, and more.
  • View detailed information including trailers, ratings, and reviews.
  • Responsive design for an optimal mobile experience.
  • User-friendly interface with intuitive navigation.

What I Need Help With:

  • Code: Is it clean? How can it be improved?
  • React best practices: Am I following them?
  • CSS and design: Is the design good? Can it be improved more with animations?

I will be working on more features, but I would love to have feedback and contributions from developers more experienced than me.

Here is the website : movie-reel.netlify.app/.

Thank you

1 Like

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?

Congrats!

Hey there,

Thank you for the feedback, that’s super helpful! I will work on fixing the design and update the website.

Welcome. If you would like code feedback you need to share the link to the repository

Hey Mike,

You can access the source code from the website, but I will include the link here as well. Here you go: GitHub - ghosnkarl/MovieReel: MovieReel allows users to explore movies, TV shows, and related content with ease, providing a rich and engaging experience for movie enthusiasts.

Thank you for pointing that out

  • 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.

Thank you mike, that is super helpful feedback!

I will work on fixing the code.

1 Like