Movies list website

Welcome to Movie Explorer! Dive into the world of movies with our sleek and interactive Single Page Application. Whether you're a film buff or just looking for something to watch, we've got you covered with a comprehensive movie database, complete with search and pagination features. 🎬

Demo

To preview live project click Demo.

Features

• Responsive
• Fetches a list of movies filtered by release date from the last month.
• Interactive Data Table: Browse through a list of movies with a user-friendly data table.
• Search Functionality: Quickly find your favorite movies by title.
• Pagination: Navigate through the movie list with ease, one page at a time.

Table of contents

• Movies list website
  • Demo
  • Features
  • Table of contents
  • Getting started
  • Screenshots
  • Packages
  • Style
  • Key feature
  • Tests
  • API Reference
  • Badges

Getting started

Follow these steps to get the project up and running on your local machine.

Prerequisites

• Node.js and npm installed on your machine.

Installation

1. Clone the repository:

git clone https://github.com/Farimah71/Movies_SPA.git

cd Movies_SPA

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173 to see the app in action.

Screenshots

Desktop view:

Tablet view:

Mobile view:

No data:

404 error page:

Packages

These packages are used in this project:

• TypeScript
• Axios
• React-query(Tanstack)
• React-router-dom
• Ant Design
• React-icons
• Lodash
• React-top-loading-bar
• React-loader-spinner

Style

2 types of styles were used in the project:

• CSS3
• Tailwind

Key feature

React Query: Utilized for efficient data fetching, caching, and synchronization with the server. React Query helps in:

• Optimized Performance: Minimizes the number of network requests by caching data locally. (In this project the garbage collection time is set to 10 minutes for higher performance and lower memory leak.)

• Automatic Refetching: Keeps data up-to-date by automatically refetching stale data.

• Simplified State Management: Manages server state seamlessly, reducing the need for complex state management solutions.

Tests

API Reference

• Axios is a promise-based HTTP client for the browser and node.js. In this project Axios is used to access the API.

• TMDB API: The Movie Database API for fetching movie data. See more

  

Badges