firebase deploy

.firebase/hosting.YnVpbGQ.cache

@@ -0,0 +1,45 @@
+404.html,1697974907858,daa499dd96d8229e73235345702ba32f0793f0c8e5c0d30e40e37a5872be57aa
+index.html,1697974409422,570c5be829c02035d3b3fff97bc741f10fb89c6d1bd60212373f721e24115067
+asset-manifest.json,1697974409423,908aafbfd470ca997844897804252ce2546e003974676800d1a9fea5b7136d93
+manifest.json,1697560600017,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a
+robots.txt,1697560601425,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
+favicon.ico,1697560597901,eae62e993eb980ec8a25058c39d5a51feab118bd2100c4deebb2a9c158ec11f9
+images/group-icon.png,1697973506326,1798cb8ad7edb1138131e47b6817f65c4a55627cbaeaa979afad659d15abfd19
+logo192.png,1697560600952,3ee59515172ee198f3be375979df15ac5345183e656720a381b8872b2a39dc8b
+logo512.png,1697560601084,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331
+images/home-icon.svg,1697563366214,f5b4007dff7c18edadc6cc773b20f2bcec6242604045d944199758aefc086285
+images/cta-logo-one.svg,1697562875938,66ce22e859b8bde4fa8aaf450f855529f02864f8bbbb9212ed40f8217a8ca747
+images/cta-logo-two.png,1697562882375,b9b285d313e3f7f912d2798bff9aaa746e77869160f3342d72ed338b84c5a20a
+images/play-icon-black.png,1697973526631,c3387af7b93ec8277ec5b9a55f56bd7abc2c20094b6e566077715c8d8a38392a
+images/movie-icon.svg,1697563425269,d1ab665dd306e65aa4e62f85d2a13cd9f8da4d91b746059b62b6e0b88465789f
+images/original-icon.svg,1697563406078,f7343ba4e23979b11ede53671b5c9a97d519b60836bac82e872a497faf603c09
+images/play-icon-white.png,1697973532527,0229cddaba90d2c69898d6198ebfca134a73cb48da68c221117c979e870f22ee
+images/series-icon.svg,1697563418132,649c2bdfca076bcb9bf6eede2b5a7a865a2058e8ce224678f8df731cbcbe5429
+images/search-icon.svg,1697563383207,922033f1f347cb14781c1f1802e1975475f4f677112e5b81023a4d46e103e57d
+images/logo.svg,1697563232414,e25daeaa18d66d4fb7fa4d5d8ddcdad6998f7857f053f3215988eecfd5c8e84d
+images/viewers-disney.png,1697891659510,aa5eff06f089b2e52225238c5560eb935d31c6f244c6ff7ceb7de46215e72d26
+images/watchlist-icon.svg,1697563396257,92c817ceaea1aa0ec269065f22bc34c0ddc395d99b706a59db7cbf92cfb2a9f7
+images/viewers-marvel.png,1697891666474,94bddd6c074238483a891a5c0e69fcadd2aa6781b0332f022859fe67ba90ff31
+static/css/main.5d23abb1.css,1697974409435,adf97e4589f419331391874bc4c93e0629801d3cc9231dcd6abef6a906597e26
+images/viewers-pixar.png,1697891678242,cffb46dc9cdd4051ede17067e0571381053fce7c0bd3851ba3c5acc2f04b7bc3
+images/viewers-national.png,1697891697038,fcbbb9883766d4d49beaf561d20d5743fbe1351bb18a35db54e042b5c16ddcf5
+static/css/main.5d23abb1.css.map,1697974409434,b1eefa8147ae014262e7bf2b692161528032a1790b9f9c9f2b302d4a35a41336
+static/js/main.bd4305fc.js.LICENSE.txt,1697974409435,a671786eda4bb7418d3d0723a52990705866935758db1892b6e218721d68378b
+static/media/slick.2630a3e3eab21c607e21.svg,1697974409434,d00477d40ed40fa1dd3bdee27d9286804121b15fea83bae7d5415d902b055de0
+static/media/slick.295183786cd8a1389865.woff,1697974409434,029a727c9e1081d2f9e1015f02f18da88f268512ea4f58589a6f17f532928530
+static/media/slick.a4e97f5a2a64f0ab1323.eot,1697974409435,52b9a169969e053d43df6bd21c4dc789c2518d99afd8590a17ef50cd24c77cf6
+static/media/slick.c94f7671dcc99dce43e2.ttf,1697974409434,6aad751007cf9a89350af287f824ab64f096c472c7c9c679fb3d55b6174fc004
+images/viewers-starwars.png,1697891690782,aeb6d50178afdf24e6e6728f75040865ab6442290e0afa7c0c2c4617bb41fc16
+images/slider-badging.jpg,1697891433720,bf442e7f764a86daa6fb6d14140d9afe7cda865d75bbb1c2fad8c2988a4c82dc
+images/slider-scales.jpg,1697891469825,9371d8e5eb2a6107c91977877930553dce149a29e7b80462296f419a047015a9
+images/slider-badag.jpg,1697891462425,96a8ca6da0fecf5f8a0720dd762f44a67ec7d7cd6b5f104cb3055d88e4d7128d
+images/slider-scale.jpg,1697891447195,db3022ddc406882b1ff329bb6d3578f70b3393115d9fbf6695361e001e290fcd
+images/home-background.png,1697890882001,da30f5f71771e53a6c4a9b7b230cd5e53170f51f18454482442e6b8f9b941bca
+videos/1564676115-marvel.mp4,1697891765297,07e87ef642059ba8e7f3dd827b3fad2c2fd69d10ce3c1bf68c57d964180c1c86
+videos/1564674844-disney.mp4,1697891753152,b75349f41e10181823c43a00643e114d9f54d1b6a610fba093ea2fc4a6f0cbda
+videos/1564676714-pixar.mp4,1697891778466,bfd93694d25b61726ad8ac0a81c79fc69ad0f25284363d370668d7246f291e20
+images/login-background.jpg,1697562299912,bbfc903274847c5dc1100ec0ed045c3d953866bd6680b0651f9925413c2fe83c
+videos/1608229455-star-wars.mp4,1697891787060,b85f3e4140753c833e8d470f60c2d2fb0c83528d903f6ccd1e040df0514117e4
+static/js/main.bd4305fc.js,1697974409435,2d27575562a2d8bdb056a66f740cdaf243f152c945839a36e9c3f9c5e8e82859
+videos/1564676296-national-geographic.mp4,1697891772144,aa332a3912f9f579500863a8e7d63914d233b5def54eff2085374fb4060cc844
+static/js/main.bd4305fc.js.map,1697974409437,1cb5ac044aa6c2e0ab2377b5afaa4480af1bb66bd84ed5de80f1ea0c0dcb6ad4

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "magic-world-12f4f"
+  }
+}

firebase.json

@@ -0,0 +1,10 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  }
+}

public/index.html

@@ -1,43 +1,89 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Welcome to Firebase Hosting</title>
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
+    <!-- update the version number as needed -->
+    <script defer src="/__/firebase/10.5.0/firebase-app-compat.js"></script>
+    <!-- include only the Firebase features as you need -->
+    <script defer src="/__/firebase/10.5.0/firebase-auth-compat.js"></script>
+    <script defer src="/__/firebase/10.5.0/firebase-database-compat.js"></script>
+    <script defer src="/__/firebase/10.5.0/firebase-firestore-compat.js"></script>
+    <script defer src="/__/firebase/10.5.0/firebase-functions-compat.js"></script>
+    <script defer src="/__/firebase/10.5.0/firebase-messaging-compat.js"></script>
+    <script defer src="/__/firebase/10.5.0/firebase-storage-compat.js"></script>
+    <script defer src="/__/firebase/10.5.0/firebase-analytics-compat.js"></script>
+    <script defer src="/__/firebase/10.5.0/firebase-remote-config-compat.js"></script>
+    <script defer src="/__/firebase/10.5.0/firebase-performance-compat.js"></script>
+    <!-- 
+      initialize the SDK after all desired features are loaded, set useEmulator to false
+      to avoid connecting the SDK to running emulators.
     -->
-    <title>React App</title>
+    <script defer src="/__/firebase/init.js?useEmulator=true"></script>
+
+    <style media="screen">
+      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
+      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
+      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
+      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
+      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
+      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
+      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
+      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
+      @media (max-width: 600px) {
+        body, #message { margin-top: 0; background: white; box-shadow: none; }
+        body { border-top: 16px solid #ffa100; }
+      }
+    </style>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
+    <div id="message">
+      <h2>Welcome</h2>
+      <h1>Firebase Hosting Setup Complete</h1>
+      <p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
+      <a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
+    </div>
+    <p id="load">Firebase SDK Loading&hellip;</p>
 
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        const loadEl = document.querySelector('#load');
+        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
+        // // The Firebase SDK is initialized and available here!
+        //
+        // firebase.auth().onAuthStateChanged(user => { });
+        // firebase.database().ref('/path/to/ref').on('value', snapshot => { });
+        // firebase.firestore().doc('/foo/bar').get().then(() => { });
+        // firebase.functions().httpsCallable('yourFunction')().then(() => { });
+        // firebase.messaging().requestPermission().then(() => { });
+        // firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
+        // firebase.analytics(); // call to activate
+        // firebase.analytics().logEvent('tutorial_completed');
+        // firebase.performance(); // call to activate
+        //
+        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
 
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+        try {
+          let app = firebase.app();
+          let features = [
+            'auth', 
+            'database', 
+            'firestore',
+            'functions',
+            'messaging', 
+            'storage', 
+            'analytics', 
+            'remoteConfig',
+            'performance',
+          ].filter(feature => typeof app[feature] === 'function');
+          loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`;
+        } catch (e) {
+          console.error(e);
+          loadEl.textContent = 'Error loading the Firebase SDK, check the console.';
+        }
+      });
+    </script>
   </body>
 </html>

src/App.js

@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import Login from './components/Login';
 import Header from './components/Header';
 import Home from './components/Home';
+import Detail from "./components/Detail";
 
 function App() {
   return (
@@ -12,6 +13,7 @@ function App() {
         <Routes>
           <Route exact path="/" element={<Login />} />
           <Route exact path="/home" element={<Home />} />
+          <Route path="/detail/:id" element={<Detail />} />
         </Routes>
       </Router>
     </div>