Technigo · wwenzz · Apr 2, 2024 · Apr 3, 2024 · Apr 3, 2024 · Apr 3, 2024
diff --git a/.gitignore b/.gitignore
@@ -12,6 +12,7 @@ dist
 dist-ssr
 *.local
 package-lock.json
+.env
 
 # Editor directories and files
 .vscode/*

diff --git a/README.md b/README.md
@@ -1,37 +1,23 @@
-<h1 align="center">
-  <a href="">
-    <img src="/src/assets/movies.svg" alt="Project Banner Image">
-  </a>
-</h1>
+<img src="/src/assets/finished-version.png" alt="Project thumbnail">
 
 # Movie Site Project
 
-Replace this readme with your own information about your project.
+This project is built around React Router and get utlise the useParams hook, Link and NavLink components. The website has 3 pages:
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+- Homepage: including movie list and each movie links to movie detail page;
+- Not Found Page;
+- Movie Detail Page
 
-## Getting Started with the Project
+Moreover I used query parameters to display clearly which list category and page the movie list is about. And then use the useSearchParams in other components.
 
-### Dependency Installation & Startup Development Server
+# The Problem
 
-Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.
+- API call: Access Token is used in the header section instead of the query params to make API call more secure.
+- Nested Routes: By implementing nested routes and using outlet component to insert route, it makes the route relationship clearer.
+- Query Params and params: This project uses both query params and params for components/pages detecting URL changes and using the params in the component building.
+- NavLink, Link and useNavigate: This takes some time to differentiate in terms of when to use and what properties they have. NavLink is used in the category bar and pagination where the active class is needed for styling. Whereas Link is used in normal situation. Lastly, useNavigate hook is implemented on some onClick functions or divs.
+- Lazy Loading: LoadImage component does all the lazy loading for images. It observes the part of the viewport the user is on and render the images accordingly. It saves the loading work under the hood and enhances the performance.
 
-The command below is a combination of installing dependencies, opening up the project on VS Code and it will run a development server on your terminal.
+# View it live
 
-```bash
-npm i && code . && npm run dev
-```
-
-### The Problem
-
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
-
-### View it live
-
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
-
-## Instructions
-
-<a href="instructions.md">
-   See instructions of this project
-  </a>
+[![Netlify Status](https://api.netlify.com/api/v1/badges/0de75402-1a29-48c8-988d-93e98f843d46/deploy-status)](https://app.netlify.com/sites/popcorn-movie-hub/deploys)
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/cinema.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Movie Site Project</title>
+    <title>Popcorn Movie</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/netlify.toml b/netlify.toml
@@ -0,0 +1,4 @@
+[[redirects]]
+  from= "/*"
+  to = "/index.html"
+  status = 200
diff --git a/package.json b/package.json
@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "lottie-react": "^2.4.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,3 +1,20 @@
+import Home from "./pages/Home";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import MovieList from "./components/MovieList";
+import Movie from "./pages/Movie";
+import PageNotFound from "./pages/PageNotFound";
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />}>
+          <Route index element={<Navigate replace to="browser" />} />
+          <Route path="browser" element={<MovieList />} />
+        </Route>
+        <Route path="/movies/:movieID" element={<Movie />} />
+        <Route path="*" element={<PageNotFound />} />
+      </Routes>
+    </BrowserRouter>
+  );
 };
diff --git a/src/assets/404.json b/src/assets/404.json
diff --git a/src/assets/cinema.png b/src/assets/cinema.png
diff --git a/src/assets/error-black.json b/src/assets/error-black.json
diff --git a/src/assets/error-pink.json b/src/assets/error-pink.json
@@ -0,0 +1 @@
+{"v":"5.5.10","fr":29.9700012207031,"ip":0,"op":75.0000030548126,"w":300,"h":335,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":25,"s":[148,190.571,0],"to":[0,1.667,0],"ti":[0,-1.667,0]},{"t":32.0000013033867,"s":[148,200.571,0]}],"ix":2},"a":{"a":0,"k":[0,31.75,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":25,"s":[0,0,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":32,"s":[119.25,136.286,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":34,"s":[86,98.286,100]},{"t":36.0000014663101,"s":[100,114.286,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[20,20],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,40.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":25.0000010182709,"op":372.000015151871,"st":-6.00000024438501,"bm":0,"completed":true},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[149,187.5,0],"ix":2},"a":{"a":0,"k":[0,78.156,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":19,"s":[52.459,2.459,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":27,"s":[52.459,61.459,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":30.5,"s":[52.459,45.459,100]},{"t":34.0000013848484,"s":[52.459,52.459,100]}],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"f","pt":{"a":0,"k":{"i":[[6.4719999999999995,87.33200000000001],[31.495,1.2890000000000015],[-30.587,-86.32900000000001],[-14.211,59.012]],"o":[[14.273,60.728],[31.587,-86.57],[-30.587,1.051000000000002],[-5.564000000000001,87.57000000000001]],"v":[[10.277,74.31],[31.587,-36.638],[-30.587,-36.638],[-9.624,74.31]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[234,260],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[5,1.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":19.0000007738859,"op":374.000015233332,"st":-4.00000016292334,"bm":0,"completed":true},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[150,167,0],"ix":2},"a":{"a":0,"k":[-4,-8.5,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.471,0.471,0.667],"y":[1,1,1]},"o":{"x":[0.48,0.48,0.333],"y":[0,0,0]},"t":7,"s":[0,0,100]},{"t":25.0000010182709,"s":[78.151,78.151,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[238,238],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.9569,0.7451,0.7451,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-4,-8.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":7.00000028511585,"op":385.000015681372,"st":7.00000028511585,"bm":0,"completed":true},{"ddd":0,"ind":6,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":20,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[150,167,0],"ix":2},"a":{"a":0,"k":[-4,-8.5,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.471,0.471,0.667],"y":[1,1,1]},"o":{"x":[0.48,0.48,0.333],"y":[0,0,0]},"t":3,"s":[0,0,100]},{"t":21.0000008553475,"s":[96.639,96.639,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[238,238],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.9569,0.7451,0.7451,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-4,-8.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":3.00000012219251,"op":381.000015518448,"st":3.00000012219251,"bm":0,"completed":true},{"ddd":0,"ind":7,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":10,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[150,167,0],"ix":2},"a":{"a":0,"k":[-4,-8.5,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.471,0.471,0.667],"y":[1,1,1]},"o":{"x":[0.48,0.48,0.333],"y":[0,0,0]},"t":0,"s":[0,0,100]},{"t":18.000000733155,"s":[110.084,110.084,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[238,238],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.9569,0.7451,0.7451,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[-4,-8.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":378.000015396256,"st":0,"bm":0,"completed":true}],"markers":[{"tm":40.0000016292334,"cm":"","dr":0}],"__complete":true}