Fix: Updated app (#82)

MovieVerse-Mobile/www/MovieVerse-Backend/README.md

@@ -1,4 +1,4 @@
-# The `MovieVerse-Backend` Directory - README
+# The MovieVerse - `MovieVerse-Backend` Directory
 
 ---
 

MovieVerse-Mobile/www/MovieVerse-Databases/README.md

@@ -52,6 +52,16 @@ A Python script for testing the API and database connections. It includes sample
 
 These files are crucial for setting up the backend of the application. Ensure that you have the necessary database servers (MySQL, MongoDB, Firebase) running and accessible. Run these scripts to create and configure your databases according to the project's requirements.
 
+## Databases Used
+
+The MovieVerse application uses a combination of relational and NoSQL databases and technologies to store and manage data. The primary databases used are:
+- MySQL: A relational database for storing structured data, such as user profiles, movie details, and reviews.
+- MongoDB: A NoSQL database for storing unstructured or semi-structured data, such as chatbot interactions, user preferences, and other dynamic content.
+- Firebase: A cloud-based platform for storing and managing data, including real-time databases, authentication, and file storage.
+- Firestore: A NoSQL database for storing and managing data, including real-time databases, authentication, and file storage.
+- Firebase Authentication: A cloud-based authentication service for managing user authentication, authorization, and user management.
+- Firebase Cloud Functions: A serverless computing service for running backend code in response to events triggered by Firebase features and HTTPS requests.
+
 ## Customization and Adaptation
 
 You may need to customize these scripts to fit the specific needs of your application. Be sure to regularly back up your databases before making any changes to these scripts.

MovieVerse-Mobile/www/MovieVerse-Design/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Son Nguyen Hoang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

MovieVerse-Mobile/www/MovieVerse-Design/README.md

@@ -0,0 +1,59 @@
+# The MovieVerse - `MovieVerse-Design` Directory
+
+Welcome to the MovieVerse-Design repository! This repository contains the Figma designs for the MovieVerse app, an innovative platform dedicated to movie enthusiasts. Here, you will find the blueprints of our user interface, including detailed designs of each screen, component, and interaction within the app.
+
+## Figma Design Link
+
+To view and interact with the designs, please visit the Figma file:
+
+[Figma Designs for MovieVerse](https://www.figma.com/file/Yjxi2D2ShJwzCkbB2O6Sul/MovieVerse-Design?type=design&node-id=0%3A1&mode=design&t=bB21LWHPfANRRTBG-1)
+
+This link provides access to the current version of our app's design. It includes everything from the splash screen to the detailed user interface of movie listings, profiles, and more.
+
+## Navigating the Figma File
+
+Within the Figma file, you will find several key sections:
+
+- **Splash Screen and Onboarding**: The first impressions of our app, designed to welcome users and guide them through the setup process.
+
+- **Home Screen**: The central hub of the app, showcasing trending movies, recommendations, and categories.
+
+- **Movie Detail Pages**: Detailed pages for each movie, including synopsis, cast information, reviews, and related movies.
+
+- **User Profile and Settings**: User customization options, including viewing history, preferences, and app settings.
+
+- **Search and Discover**: Tools and filters for users to discover new movies based on their tastes and preferences.
+
+## Design System
+
+The repository also includes a comprehensive design system to ensure consistency across the app. This system covers:
+
+- **Color Palette**: Our chosen color scheme that reflects the mood and genre of movies.
+- **Typography**: The fonts and typographic scale used to ensure readability and aesthetic appeal.
+- **Components**: Reusable UI components such as buttons, input fields, cards, and modals.
+- **Icons**: A set of icons used throughout the app for navigation, actions, and features.
+
+## Images in this Directory
+
+- **MovieVerse-Design.png**: A screenshot of the Figma file, showcasing the Home Screen and Movie Detail Page.
+- **MovieVerse-Design.pdf**: A PDF version of the Figma file, allowing you to view the designs offline.
+- **MovieVerse-Design.svg**: A vector version of the Figma file, providing a scalable and high-quality version of the designs.
+- **MovieVerse-Design.jpg**: A high-resolution image of the Figma file, suitable for sharing and showcasing the designs.
+
+## Contributing
+
+We welcome contributions from designers and developers! If you have suggestions for improvements or find any issues with the current designs, please follow these steps:
+
+1. **Open an Issue**: Describe the suggestion or issue in detail.
+2. **Fork the Repository** (if applicable): For designers wishing to propose design changes, please fork the repository and make changes to your copy.
+3. **Submit a Pull Request** (for developers): If you're implementing design adjustments or fixes based on the Figma files, please submit a PR against our repository.
+
+## Feedback
+
+Your feedback is invaluable to us. If you have any comments or suggestions about the designs, please feel free to reach out via [GitHub Issues](https://github.com/hoangsonww/The-MovieVerse-Database/issues) or directly through Figma comments.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+Thank you for exploring `MovieVerse-Design`. We're excited to collaborate with you to create an exceptional app experience for movie lovers everywhere!

MovieVerse-Mobile/www/MovieVerse-Frontend/html/index.ejs

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>The MovieVerse Database</title>
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
+
+    <!-- Font Awesome for icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+
+    <!-- Vue.js -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
+
+    <!-- React and ReactDOM -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
+
+    <!-- React DOM -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
+
+    <!-- Custom CSS -->
+    <style>
+        .react-component {
+            background-color: #61DAFB;
+            color: #282c34;
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+
+        .vue-component {
+            background-color: #42b883;
+            color: #35495e;
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+    </style>
+
+</head>
+
+<body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+
+    <!-- React Root Element -->
+    <div id="react-root"></div>
+
+    <!-- Vue Root Element -->
+    <div id="vue-root"></div>
+
+    <!-- Initialize React and Vue -->
+    <script>
+        // React Component
+        class MyReactComponent extends React.Component {
+            render() {
+                return (
+                    <div className="react-component">
+                        MovieVerse App - React Component
+                    </div>
+                );
+            }
+        }
+
+        // Render React Component
+        ReactDOM.render(<MyReactComponent />, document.getElementById('react-root'));
+
+        // Vue Instance
+        new Vue({
+            el: '#vue-root',
+            data: {
+                message: 'MovieVerse App - Vue Component!'
+            },
+            template: '<div class="vue-component">{{ message }}</div>'
+        });
+    </script>
+
+    <!-- Page content, which will be dynamically populated by JS -->
+    <div class="container">
+        <div class="row">
+            <div class="col-12">
+                <h1 class="text-center">The MovieVerse Database</h1>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bootstrap and other necessary JavaScript -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+
+</body>
+
+</html>

MovieVerse-Mobile/www/MovieVerse-Frontend/index.ejs

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>The MovieVerse Database</title>
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
+
+    <!-- Font Awesome for icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+
+    <!-- Vue.js -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
+
+    <!-- React and ReactDOM -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
+
+    <!-- React DOM -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
+
+    <!-- Custom CSS -->
+    <style>
+        .react-component {
+            background-color: #61DAFB;
+            color: #282c34;
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+
+        .vue-component {
+            background-color: #42b883;
+            color: #35495e;
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+    </style>
+
+</head>
+
+<body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+
+    <!-- React Root Element -->
+    <div id="react-root"></div>
+
+    <!-- Vue Root Element -->
+    <div id="vue-root"></div>
+
+    <!-- Initialize React and Vue -->
+    <script>
+        // React Component
+        class MyReactComponent extends React.Component {
+            render() {
+                return (
+                    <div className="react-component">
+                        MovieVerse App - React Component
+                    </div>
+                );
+            }
+        }
+
+        // Render React Component
+        ReactDOM.render(<MyReactComponent />, document.getElementById('react-root'));
+
+        // Vue Instance
+        new Vue({
+            el: '#vue-root',
+            data: {
+                message: 'MovieVerse App - Vue Component!'
+            },
+            template: '<div class="vue-component">{{ message }}</div>'
+        });
+    </script>
+
+    <!-- Page content, which will be dynamically populated by JS -->
+    <div class="container">
+        <div class="row">
+            <div class="col-12">
+                <h1 class="text-center">The MovieVerse Database</h1>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bootstrap and other necessary JavaScript -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+
+</body>
+
+</html>

MovieVerse-Mobile/www/MovieVerse-Middleware/README.md

@@ -0,0 +1,62 @@
+# The MovieVerse - `MovieVerse-Middleware` Directory
+
+## Overview
+
+Welcome to the Middleware directory of the MovieVerse project! This directory contains crucial middleware components that handle various aspects of the MovieVerse application. These components include authentication, logging, error handling, and data processing for the application's backend.
+
+## Directory Contents
+
+The Middleware directory consists of two primary files:
+
+1. **middleware.js**
+2. **app-middleware.py**
+
+### middleware.js
+
+This JavaScript file is built on the Node.js platform using the Express framework. It includes several middleware functions essential for the backend operations of the MovieVerse application.
+
+#### Key Features:
+
+- **Logger Middleware**: Logs every request to the server, including the request method, URL, and timestamp.
+- **Authentication Middleware**: Verifies JWT tokens in request headers to authenticate users.
+- **Movie Fetcher Middleware**: Retrieves movie details based on the provided movie ID.
+- **Error Handling Middleware**: Catches and handles errors occurring during request processing.
+- **Movie Data Validation Middleware**: Ensures that all required movie data fields are present in the request.
+- **Route-specific Middleware Application**: Demonstrates how to apply middleware to specific routes, such as the route for adding new movies.
+
+#### Usage:
+
+To use this middleware in your Node.js application, include it in your server file and apply it to your Express app instance as shown in the file.
+
+### app-middleware.py
+
+This Python file is created with Flask, a micro web framework. It includes custom middleware implementations suitable for a Flask application.
+
+#### Key Features:
+
+- **Logger Middleware**: A custom middleware that logs details about each request and its response time.
+- **Custom Request Processing Middleware**: Inspects incoming requests, logging method, path, content length, type, body, and headers.
+- **Custom Response Modification Middleware**: Processes responses after they are generated, providing information about the response status, headers, body, and processing time.
+- **Error and Exception Handling Middleware**: Handles specific HTTP errors (e.g., 404 not found) and general exceptions, returning JSON responses.
+- **Authentication Middleware**: Demonstrates how to handle routes with POST and GET methods, including a placeholder for authentication logic.
+
+#### Usage:
+
+To integrate this middleware into a Flask application, include it in your Flask server file. The middleware will automatically apply to all routes defined in the Flask app.
+
+## Getting Started
+
+1. **Clone the Repository**: Ensure you have the MovieVerse project repository cloned.
+2. **Navigate to the Middleware Directory**: Change your working directory to the Middleware directory within the project.
+3. **Install Dependencies**: Install necessary dependencies for Node.js (`npm install`) and Flask (`pip install flask`).
+4. **Integrate with Your Application**: Import these middleware modules into your main application server file and apply them as needed.
+
+## Contribution
+
+Contributions to improve or extend the functionality of these middleware components are welcome. Please adhere to the project's contributing guidelines and code of conduct when making contributions.
+
+## License
+
+This entire project is licensed under MIT's license. View the [LICENSE](../LICENSE) file for more details.
+
+---