Movie Magnet

Movie Magnet

A simple movie and series browsing site built using React and TypeScript. Following a tutorial from JS Mastery, with added features and enhancements for a better user experience.

    Home Page - MovieMagnet
    Search - MovieMagnet
    Home Page - MovieMagnet
    Search - MovieMagnet
Link
movie-magnet-theta.vercel.app
Repository
moviemagnet-react-ts
Date
June 6, 2024
Frontend
TypeScript, React

MovieMagnet 🎥

MovieMagnet is a simple movie and series browsing site built using React and TypeScript. Following a tutorial from JS Mastery, with added features and enhancements for a better user experience.

🌏 Visit the site live at: MovieMagnet

Features ✨

  • Debounce Searching: Improved search functionality with debounce to reduce unnecessary API calls.
  • Theme Switcher: Nice button to switch between Dark and Light themes.
  • Zoom Reveal: Zoom effect on scrolling movie cards for a dynamic UI.
  • No Results Found Interface: User-friendly interface when no search results are found.
  • Polished Project Structure: Organized and clean code structure.
  • Hooks and Props: Proper usage of multiple React hooks and props.
  • Navigable Movie Cards: Movie cards linked to their respective IMDb pages.
  • Default Movie Cards: Explicitly displayed 15 default movie cards.

Learning Experience 📚

This was my first ever React.js project aimed at learning the basics. It helped me understand the fundamentals of React and delve into TypeScript. I used various resources, including YouTube tutorials and the official ReactJS documentation, to complete this project.

Learning Resources

  • YouTube
  • ReactJS Official Docs