Merge main deployment branch changes

MovieVerse-Frontend/App.jsx

@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+
+function App() {
+    const [mostPopular, setMostPopular] = useState([]);
+    const [recommended, setRecommended] = useState([]);
+    const [awardWinning, setAwardWinning] = useState([]);
+    const [directorSpotlight, setDirectorSpotlight] = useState([]);
+
+    useEffect(() => {
+        const fetchMovies = async (category, setter) => {
+            const api_key = process.env.REACT_APP_API_KEY;
+            const url = `https://api.themoviedb.org/3/${category}?api_key=${api_key}&language=en-US&page=1`;
+            const response = await fetch(url);
+            const data = await response.json();
+            setter(data.results);
+        };
+
+        fetchMovies('movie/popular', setMostPopular);
+        fetchMovies('movie/top_rated', setRecommended);
+        fetchMovies('movie/now_playing', setAwardWinning);
+        fetchMovies('discover/movie', setDirectorSpotlight);
+    }, []);
+
+    const [currentPage, setCurrentPage] = useState(1);
+
+    const handleNextPage = () => {
+        setCurrentPage(currentPage + 1);
+    }
+
+    const handlePreviousPage = () => {
+        setCurrentPage(currentPage - 1);
+    }
+
+    return (
+        <main>
+            {/* Most Popular */}
+            <section id="most-popular">
+                <h2>Most Popular</h2>
+                <div className="movie-list">
+                    {mostPopular.map(movie => (
+                        <div key={movie.id} className="movie-card">
+                            <img src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`} alt={movie.title} />
+                            <h3>{movie.title}</h3>
+                            <p>{movie.overview}</p>
+                        </div>
+                    ))}
+                </div>
+            </section>
+
+            {/* Recommended */}
+            <section id="recommended">
+                <h2>Recommended</h2>
+                <div className="movie-list">
+                    {recommended.map(movie => (
+                        <div key={movie.id} className="movie-card">
+                            <img src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`} alt={movie.title} />
+                            <h3>{movie.title}</h3>
+                            <p>{movie.overview}</p>
+                        </div>
+                    ))}
+                </div>
+            </section>
+
+            {/* Award Winning */}
+            <section id="award-winning">
+                <h2>Award Winning</h2>
+                <div className="movie-list">
+                    {awardWinning.map(movie => (
+                        <div key={movie.id} className="movie-card">
+                            <img src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`} alt={movie.title} />
+                            <h3>{movie.title}</h3>
+                            <p>{movie.overview}</p>
+                        </div>
+                    ))}
+                </div>
+            </section>
+
+            {/* Director Spotlight */}
+            <section id="director-spotlight">
+                <h2>Director Spotlight</h2>
+                <div className="movie-list">
+                    {directorSpotlight.map(movie => (
+                        <div key={movie.id} className="movie-card">
+                            <img src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`} alt={movie.title} />
+                            <h3>{movie.title}</h3>
+                            <p>{movie.overview}</p>
+                        </div>
+                    ))}
+                </div>
+            </section>
+
+            {/* Pagination */}
+            <section id="pagination">
+                <div className="pagination-buttons">
+                    <button onClick={handlePreviousPage}>Previous</button>
+                    <button onClick={handleNextPage}>Next</button>
+                </div>
+                <div className="page-number">
+                    <p>Page {currentPage}</p>
+                </div>
+            </section>
+
+            {/* Footer */}
+            <footer>
+                <p>&copy; 2024 MovieVerse App</p>
+            </footer>
+        </main>
+    );
+}
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);

MovieVerse-Frontend/App.vue

@@ -0,0 +1,99 @@
+<template>
+  <div id="app">
+    <header>
+      <h1>Welcome to The MovieVerse</h1>
+    </header>
+
+    <main>
+      <router-view></router-view>
+    </main>
+
+    <aside>
+      <h2>Upcoming Movies</h2>
+    </aside>
+
+    <footer>
+      <p>&copy; 2023 The MovieVerse. All rights reserved.</p>
+    </footer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  metaInfo: {
+    title: 'The MovieVerse - Explore Movies, TV Series, and More',
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
+      { name: 'description', content: 'Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more.' },
+      { property: 'og:title', content: 'The MovieVerse - Your Ultimate Movie Guide' },
+      { property: 'og:description', content: 'Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more.' },
+      { property: 'og:type', content: 'website' },
+      { property: 'og:url', content: 'https://movie-verse.com/' },
+      { property: 'og:image', content: 'https://movie-verse.com/images/image.png' },
+      { property: 'og:site_name', content: 'The MovieVerse' },
+      { property: 'og:locale', content: 'en_US' },
+      { name: 'author', content: 'Son Nguyen Hoang' },
+      { name: 'keywords', content: 'movies, film guide, directors, actors, movie genres, cinema, film reviews, tv shows, movie verse, movieverse, film' },
+      { name: 'robots', content: 'index, follow' },
+      { name: 'revisit-after', content: '1 day' },
+      { name: 'language', content: 'English' },
+      { name: 'theme-color', content: '#7378c5' },
+      { name: 'twitter:card', content: 'summary' },
+      { name: 'twitter:site', content: '@movieverse' },
+      { name: 'twitter:title', content: 'The MovieVerse - Your Ultimate Movie Guide' },
+      { name: 'twitter:description', content: 'Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more.' },
+      { name: 'twitter:image', content: 'https://movie-verse.com/images/image.png' }
+    ],
+    link: [
+      { rel: 'icon', type: 'image/x-icon', href: 'https://movie-verse.com/images/favicon.ico' },
+      { rel: 'canonical', href: 'https://movie-verse.com/' },
+      { rel: 'stylesheet', href: 'https://movie-verse.com/MovieVerse-Frontend/css/style.css' },
+      { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css' },
+      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap' },
+      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;400;600&display=swap' }
+    ]
+  }
+};
+</script>
+
+<style>
+#app {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+header, footer {
+  background-color: #20232a;
+  color: #61dafb;
+  padding: 20px;
+  text-align: center;
+}
+
+main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+aside {
+  background-color: #282c34;
+  color: white;
+  padding: 15px;
+  margin-top: 20px;
+}
+
+footer {
+  background-color: #20232a;
+  color: #61dafb;
+  text-align: center;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+}
+</style>

MovieVerse-Frontend/README.md

@@ -2,6 +2,22 @@
 
 Welcome to the MovieVerse app, your ultimate guide to the world of movies! This application is designed to help users explore and learn about their favorite movies, directors, actors, and more. Dive into an immersive experience with our comprehensive directory structure.
 
+## Table of Contents 
+- [Overview](#overview)
+- [Directory Structure](#directory-structure)
+  - [CSS Directory - `css`](#css-directory---css)
+  - [HTML Directory - `html`](#html-directory---html)
+  - [JS Directory - `js`](#js-directory---js)
+  - [React Directory - `react`](#react-directory---react)
+  - [Tests Directory - `tests`](#tests-directory---tests)
+- [Getting Started](#getting-started)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Overview
+
+The `MovieVerse-Frontend` directory contains the frontend codebase for the MovieVerse application. This directory includes all the necessary files, scripts, and stylesheets to create an interactive and engaging user experience. The frontend is built using a combination of HTML, CSS, Vue, JavaScript, and React components to provide a seamless browsing experience for users.
+
 ## Directory Structure
 
 The MovieVerse app's `MovieVerse-Frontend` directory is organized into four primary directories: `css`, `html`, `js`, and `react`. Each directory contains specific files that contribute to the functionality and appearance of the app. Here's a detailed overview:
@@ -108,10 +124,30 @@ The tests directory contains a collection of test scripts and suites for the `Mo
 
 To get started with MovieVerse:
 
-1. **Clone the repository**: Use Git to clone the app to your local machine.
-2. **Navigate to the app directory**: Change your directory to the MovieVerse folder.
-3. **Install dependencies**: If the app requires any dependencies, install them via your package manager.
-4. **Run the app**: Start the app on your local server and navigate to the appropriate port to view it.
+1. **Clone the repository**: Use Git to clone the app to your local machine:
+    ```bash
+    git clone https://github.com/hoangsonww/The-MovieVerse-Database.git
+    ```
+2. **Navigate to the app directory**: Change your directory to the `MovieVerse-Frontend` folder:
+    ```bash
+    cd The-MovieVerse-Database/MovieVerse-Frontend
+    ```
+3. **Install dependencies**: Install the necessary dependencies for the app using npm:
+    ```bash
+    npm install
+    ```
+   Or using yarn:
+    ```bash
+    yarn install
+    ```
+4. **Run the app**: Start the frontend server on your local server and navigate to the appropriate port to view it:
+    ```bash
+    npm start
+    ```
+    Or using yarn:
+     ```bash
+     yarn start
+     ```
 5. **Explore the app**: Interact with the app's features, pages, and functionalities to get a feel for how it works.
 
 ## Contributing
@@ -124,4 +160,4 @@ This project is licensed under MIT license. Refer to the `LICENSE` file in each
 
 ---
 
-Enjoy exploring the MovieVerse and delve into the fascinating world of cinema!
+Enjoy exploring the MovieVerse and delve into the fascinating world of cinema! 🎬🍿