/ScreenXpress

🍿 Discover the hottest trending movies, explore fan favorites, and find your beloved films with our sleek search feature. Enjoy cinematic magic at your fingertips! 🎬🌟

Primary LanguageJavaScript

ScreenXpress🍿🎬

Welcome to the Movie & TV Show Hub, your ultimate destination for cinematic adventures! πŸŽ‰

Explore Now Live DemoπŸš€

Features

  • Discover the Latest: Stay up-to-date with the hottest movies and TV shows. 🌟πŸ”₯
  • Search & Explore: Find your favorite content with our powerful search feature. πŸ”πŸ—ΊοΈ
  • Responsive Design: Enjoy a seamless experience on all devices, from desktop to mobile. πŸ“±πŸ’»
  • Infinite Scrolling: Effortlessly explore an endless list of content by simply scrolling. πŸ”„πŸ”₯
  • Video Playback: Watch trailers and clips directly within the app for a sneak peek. β–ΆοΈπŸΏ
  • Interactive UI: Engage with a user-friendly interface for a delightful browsing experience. πŸŽ¨πŸ‘€
  • State-of-the-Art Styling: Experience visually stunning design with SCSS and Tailwind CSS. ✨🎨
  • Real-time Updates: Receive the latest movie and TV show data in real-time, keeping you informed. πŸ•’πŸ“‘

Technologies Used

  • React.js: Front-end development made easy. βš›οΈ
  • SCSS: Stylish and maintainable styles. 🎨
  • Tailwind CSS: Rapid UI development with utility-first classes. πŸš€πŸŽ¨
  • @reduxjs/toolkit: State management made simple. πŸ”„
  • axios: HTTP client for making requests to your server. 🌐
  • dayjs: Efficient date and time manipulation. πŸ“…
  • react-circular-progressbar: Add beautiful circular progress bars. πŸ”„πŸŒˆ
  • react-dom: Entry point to the React DOM library. πŸ›οΈ
  • react-icons: A collection of popular icons for React. βœ¨πŸ“š
  • react-infinite-scroll-component: Implement infinite scrolling effortlessly. πŸ”„πŸ”
  • react-lazy-load-image-component: Lazy load images for improved performance. πŸ–ΌοΈπŸ’€
  • react-player: Easily embed videos with React. πŸ“ΉπŸŽ¬
  • react-redux: Official React bindings for Redux. πŸ”„
  • react-router-dom: Declarative routing for React.js. πŸ”„πŸ›£οΈ
  • react-select: A flexible and powerful Select component. πŸŽ―πŸ”„
  • sass: CSS preprocessor scripting language. 🎨

Get Started

  1. Clone the repository:
    git clone https://github.com/StarDust130/ScreenXpress.git
  2. Navigate to the project directory:
    cd ScreenXpress
  3. Install dependencies:
    npm install
  4. Start the development server:
    npm run dev

    This will launch the app in development mode. Open http://localhost:3000 in your browser to view it.

  5. Build for production:
    npm run build

    This command creates a build folder with the optimized and minified production build.

  6. Explore the code:

    Feel free to explore the project structure, components, and styles to get a better understanding.


πŸš€ Happy coding! May your code always run smoothly and your bugs be easy to fix! πŸŽ‰βœ¨

β€œThe only way to do great work is to love what you do.” – Steve Jobs 🌟