Git Product home page Git Product logo

movie-app-react's Introduction

Movie App ๐Ÿ“ท

This is a React-based movie app that allows users to browse and search for movies. It includes features such as lazy loading, infinite scrolling, search functionality, redux-toolkit, skeleton loading, circular progress bar, custom hooks, a custom carousel/slider, and state management with React hooks.

Installation

To install the app, clone the repository and run the following command:

npm install

Usage

To start the app, run the following command:

npm start

This will start the app on http://localhost:5173.

Live : Movie App.

Screenshot of the Movie App

Mobile view

Untitled design

...

Untitled design (1)

...

Untitled design (2)

Desktop view

Capture

...

Capture222

...

Capture333

Features

Lazy Loading

The app uses lazy loading to only load images when they are needed. This improves the app's performance by reducing the amount of data that needs to be loaded at once.

Infinite Scrolling

The app uses infinite scrolling to load more movies as the user scrolls down the page. This provides a seamless browsing experience without the need for pagination.

Search Functionality

The app includes a search bar that allows users to search for movies by title. The search is performed in real-time, and the results are displayed immediately.

Redux-Toolkit

The app uses redux-toolkit to manage its state. This provides a centralized location for storing and managing data, making it easier to maintain and debug.

Skeleton Loading

The app uses skeleton loading to display a placeholder UI while data is being fetched. This provides a better user experience by giving users immediate feedback that the app is working.

Circular Progress Bar

The app includes a circular progress bar that is displayed while data is being fetched. This provides visual feedback to users that the app is working.

Custom Hooks

The app includes custom hooks that encapsulate complex functionality, making it easier to reuse code and maintain consistency throughout the app.

Custom Carousel/Slider

The app includes a custom carousel/slider that allows users to browse through a selection of movies. This was implemented without the use of any external libraries, making it lightweight and customizable.

React Hooks and State Management

The app uses React hooks to manage its state, making it easier to build and maintain complex UIs.

Fetching Data from Rest API with Axios

The app uses Axios to fetch data from a REST API. This provides a scalable way to retrieve data and makes it easy to swap out the backend if needed.


movie-app-react's People

Contributors

sachindev07 avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.