Merge pull request #190 from hoangsonww/new-feature/add-media-gallery

Added media gallery for movies

.github/README.md

@@ -1,10 +1,16 @@
 # The MovieVerse App
 
-Welcome to The MovieVerse - your digital compass to the cinematic universe. Created by [Son Nguyen](https://github.com/hoangsonww) in 2023 and currently attracting more than **100,000 monthly users**, this application is a completely **free-to-use** app, designed to serve as a bridge connecting movie enthusiasts with an extensive collection of films across various genres and periods. Dive into an ocean of narratives, where stories come to life, right at your fingertips with MovieVerse!
+<p align="center" style="cursor: pointer">
+  <a href="https://movie-verse.com">
+    <img src="../images/uwu.webp" alt="The MovieVerse App Interface" style="border-radius: 10px" width="200"/>
+  </a>
+</p>
 
-Star this repository to show your support and stay updated on the latest features and enhancements. Feel free to contribute to the project, and let's build a vibrant community of movie lovers together 🎬🍿!
+Welcome to **The MovieVerse** - your digital compass to the cinematic universe. Created by [Son Nguyen](https://github.com/hoangsonww) in 2023 and currently attracting more than **150,000 monthly users**, this application is completely **free-to-use**, designed to serve as a bridge connecting movie enthusiasts with an extensive collection of films across various genres and periods. Dive into an ocean of narratives, where stories come to life, right at your fingertips with **MovieVerse**!
 
-**This app is currently available at [movie-verse.com](https://movie-verse.com)!**
+🌟 Star this repository to show your support and stay updated on the latest features and enhancements. Feel free to contribute to the project, and let's build a vibrant community of movie lovers together 🎬🍿!
+
+**This app is currently available at [movie-verse.com](https://movie-verse.com).**
 
 ---
 
@@ -75,9 +81,9 @@ Through The MovieVerse, users can search for movies, view detailed information,
 ## Project Structure
 
 The MovieVerse is a full-stack application with a robust backend and a user-friendly frontend. The project is divided into the following **3 main** directories:
-1. `MovieVerse-Backend`: The backend directory contains the server-side code, including the API, database, and server configuration.
-2. `MovieVerse-Frontend`: The frontend directory contains the client-side code, including the user interface, user experience, and client configuration.
-3. `MovieVerse-Mobile`: The mobile app directory contains the mobile application code, built using Apache Cordova, including the mobile user interface, user experience, and mobile client configuration.
+1. `MovieVerse-Backend`: The [backend directory](../MovieVerse-Backend) contains the server-side code, including the API, database, and server configuration.
+2. `MovieVerse-Frontend`: The [frontend directory](../MovieVerse-Frontend) contains the client-side code, including the user interface, user experience, and client configuration.
+3. `MovieVerse-Mobile`: The [mobile app directory](../MovieVerse-Mobile) contains the mobile application code, built using Apache Cordova, including the mobile user interface, user experience, and mobile client configuration.
 
 There are also additional directories and files for project configuration, testing, and other utilities. The project is built using a variety of technologies, including `.github`, `utilities`, `project-config`, `MovieVerse-APIs`, `MovieVerse-Databases`, `MovieVerse-Middleware`, `MovieVerse-Design`, `images`, and more. Each directory serves a specific purpose in the development, deployment, and maintenance of The MovieVerse application.
 
@@ -101,7 +107,6 @@ The app is using `Netlify` for the frontend deployment and `Heroku` for the back
 | [SASS](https://sass-lang.com/)                                  | [JavaScript](https://www.javascript.com/)                       |                                                 |                                                                   | [TensorFlow](https://www.tensorflow.org/)                       |
 | [Single Spa](https://single-spa.js.org/)                        |                                                                 |                                                 |                                                                   |                                                                 |
 
-
 ## Contributing
 
 Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
@@ -187,10 +192,8 @@ Please also note that the **MovieVerse** is an ever-evolving platform, and more
 
 Additionally, I'd like to express special gratitude to [The Movie Database (TMDb)](https://www.themoviedb.org/) for providing additional movie data that greatly enriches The MovieVerse experience!
 
-Also, if our service is down sometimes, especially the database overloaded failure during durations of high traffic, please be patient as we are working hard to maintain the platform and ensure a seamless experience for all users. 
-
 Thank you for your understanding and support! 🎬🍿
 
 ---
 
-Created with ❤️ in 2024 by [Son Nguyen](https://github.com/hoangsonww). All rights reserved.
+Created with ❤️ in 2023 by [Son Nguyen](https://github.com/hoangsonww). All rights reserved.

404.html

@@ -170,19 +170,44 @@
                 {
                     label: "Favorite Movies",
                     getValue: () => {
-                        const favoritedMovies = JSON.parse(localStorage.getItem('favoritesMovies')) || [];
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
                         return favoritedMovies.length;
                     }
                 },
                 {
                     label: "Favorite Genre",
                     getValue: () => {
                         const mostCommonGenreCode = getMostCommonGenre();
-                        const genreArray = JSON.parse(localStorage.getItem('genreMap')) || [];
-                        const genreObject = genreArray.reduce((acc, genre) => {
-                            acc[genre.id] = genre.name;
-                            return acc;
-                        }, {});
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
                         return genreObject[mostCommonGenreCode] || 'Not Available';
                     }
                 },
@@ -429,11 +454,11 @@
         })
     </script>
     <header>
-        <a href="https://movie-verse.com/" style="text-decoration: none; color: inherit; cursor: pointer">
-            <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
-                The Mo<span class="highlight">vieV</span>erse
-            </h1>
-        </a>
+        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+            <a id="indexLink" href="https://movie-verse.com" style="text-decoration: none; color: inherit; cursor: pointer">
+                The Mo<span class="highlight" id="highlight">vieV</span>erse
+            </a>
+        </h1>
 
         <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
@@ -454,8 +479,8 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
         </button>
         <form id="form1">
             <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+                <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" style="margin-right: 0"/>
+                <button type="button" id="button-search" onclick="handleSearch()" style="margin-left: 0">Search</button>
             </div>
             <div id="search-results" class="search-results"></div>
             <div class="buttons-container">
@@ -763,25 +788,21 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
                 const query = searchBar.value.trim();
                 if (query) {
                     if (window.innerWidth > 800) {
-                        myHeading.style.display = 'none';
-                        localTime.style.display = 'none';
-                        myHeading.style.zIndex = '0.05';
-                        searchBar.style.marginTop = '16px';
-                        searchButton.style.marginTop = '16px';
+                        myHeading.style.visibility = 'hidden';
+                        myHeading.style.opacity = '0';
+                        localTime.style.visibility = 'hidden';
+                        localTime.style.opacity = '0';
                     }
                 }
                 else {
-                    myHeading.style.display = '';
-                    localTime.style.display = '';
-                    searchBar.style.marginTop = '';
-                    searchButton.style.marginTop = '';
+                    myHeading.style.visibility = 'visible';
+                    myHeading.style.opacity = '1';
+                    localTime.style.visibility = 'visible';
+                    localTime.style.opacity = '1';
                 }
             }
-
             searchBar.addEventListener('input', toggleVisibility);
-
             toggleVisibility();
-
         });
     </script>
 
@@ -793,6 +814,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             const searchResultsContainer = document.getElementById('search-results');
             const myHeading = document.getElementById('my-heading');
             const localTime = document.getElementById('local-time');
+            const searchButton = document.getElementById('button-search');
 
             function toggleButtons() {
                 const query = searchInput.value.trim();
@@ -806,10 +828,10 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
                 toggleButtons();
                 searchInput.focus();
 
-                myHeading.style.display = '';
-                localTime.style.display = '';
-                searchInput.style.marginTop = '';
-                searchButton.style.marginTop = '';
+                myHeading.style.visibility = 'visible';
+                myHeading.style.opacity = '1';
+                localTime.style.visibility = 'visible';
+                localTime.style.opacity = '1';
             });
 
             toggleButtons();
@@ -1048,5 +1070,4 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
     </footer>
 
 </body>
-
 </html>

App.vue

@@ -39,13 +39,20 @@ export default {
       { name: 'robots', content: 'index, follow' },
       { name: 'revisit-after', content: '1 day' },
       { name: 'language', content: 'English' },
-      { name: 'theme-color', content: '#7378c5' }
+      { 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://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' }
     ]
   }
 };

MovieVerse-Frontend/README.md

@@ -6,7 +6,7 @@ Welcome to the MovieVerse app, your ultimate guide to the world of movies! This
 
 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:
 
-### CSS Directory
+### CSS Directory - `css`
 
 This directory contains the Cascading Style Sheets (CSS) files responsible for the styling of the web pages.
 
@@ -15,7 +15,7 @@ This directory contains the Cascading Style Sheets (CSS) files responsible for t
 - `discussions.css`: Styles specific to the discussions page.
 - `trivia.css`: Styles for the trivia section of the app.
 
-### HTML Directory
+### HTML Directory - `html`
 
 The HTML directory includes all the markup files necessary for the structure of the web pages.
 
@@ -46,7 +46,7 @@ The HTML directory includes all the markup files necessary for the structure of
 - `404.html`: A 404 error page for when a page is not found.
 - `index.ejs`: The entry point for the app.
 
-### JS Directory
+### JS Directory - `js`
 
 The JavaScript directory contains scripts that add interactivity and functionality to the web pages.
 
@@ -72,7 +72,7 @@ The JavaScript directory contains scripts that add interactivity and functionali
 - `single-spa-config.js`: Configuration file for the single-spa framework used in the app.
 - `systemjs-importmap.js`: Import map for the systemJS module loader.
 
-### React Directory
+### React Directory - `react`
 
 The React directory contains a collection of React components developed for the MovieVerse application.
 
@@ -88,7 +88,7 @@ Please note that it is currently under development, and the components may under
 - `UserProfile.jsx`: Component for managing user profiles
 - `FeaturedMoviesCarousel.jsx`: Component for featured movies carousel
 
-### Tests Directory
+### Tests Directory - `tests`
 
 The tests directory contains a collection of test scripts for the MovieVerse application. These tests are designed to ensure that the app's functionality is working as expected and to identify any potential issues or bugs.
 

MovieVerse-Frontend/css/style.css

@@ -739,6 +739,12 @@ header h1 {
     transition: 0.1s linear;
 }
 
+.circle-text {
+    font-size: 25px;
+    font-weight: bold;
+    dominant-baseline: middle;
+}
+
 #back-to-top-btn {
     position: fixed;
     bottom: 20px;
@@ -1874,11 +1880,11 @@ strong {
     border-radius: 32px;
     color: white;
     margin: 5px auto;
-    max-width: 480px;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+    max-width: 500px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
-@media (max-width: 800px) {
+@media (max-width: 700px) {
     #settings-container {
         max-width: calc(100% - 10px);
         margin: 10px 10px;
@@ -2568,6 +2574,14 @@ ol li:hover {
     cursor: pointer;
 }
 
+#rating-link {
+    color: white;
+}
+
+#rating-link:hover {
+    color: #ff8623;
+}
+
 #company-logo:hover {
     transform: scale(1.05);
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
@@ -2677,6 +2691,7 @@ canvas {
     .chart-container {
         flex-direction: column;
     }
+
     .chart-box {
         height: auto;
     }
@@ -3032,10 +3047,10 @@ canvas {
 .timeline-container {
     margin: 20px auto;
     background-color: rgba(255,255,255,0.1);
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
     padding: 20px;
-    max-width: 75%;
-    border-radius: 8px;
+    width: calc(100% - 24px);
+    border-radius: 16px;
     margin-top: 50px;
     text-align: center;
 }

MovieVerse-Frontend/css/trivia.css

@@ -930,14 +930,15 @@ main {
     background-color: rgba(255, 255, 255, 0.2);
     padding: 20px;
     border-radius: 10px;
-    max-width: 500px;
+    max-width: calc(100% - 20px);
+    width: 600px;
     margin: 10px auto;
     box-sizing: border-box;
     box-shadow: 0 2px 5px rgba(0,0,0,0.2);
 }
 
 #quiz-form {
-    max-width: 500px;
+    width: calc(100% - 20px);
     margin: 10px auto;
     box-sizing: border-box;
     padding: 0 10px;
@@ -1021,10 +1022,10 @@ main {
         cursor: pointer;
         position: absolute;
         top: 0;
-        margin-left: 188px;
+        margin-left: 189px;
         border-radius: 8px;
-        padding-left: 10px;
-        padding-right: 10px;
+        padding-left: 12px;
+        padding-right: 12px;
         box-sizing: border-box;
     }