First Commit

package.json

@@ -3,12 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.6.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "axios": "^0.21.1",
+    "node-sass": "^6.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.4",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "redux": "^4.1.1",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

public/index.html

@@ -10,11 +10,14 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>   
     <!--
       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.

src/App.js

@@ -1,23 +1,26 @@
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import Home from "./components/Home/Home";
+import Header from "./components/Header/Header";
+import Footer from "./components/Footer/Footer";
+import PageNotFound from "./components/PageNotFound/PageNotFound";
+import MovieDetail from "./components/MovieDetail/MovieDetail";
+import "./App.scss";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className="app">
+      <Router>
+        <Header></Header>
+        <div className="container">
+          <Switch>
+            <Route path="/" exact component={Home} />
+            <Route path="/movie/:imdbID" component={MovieDetail} />
+            <Route component={PageNotFound} />
+          </Switch>
+        </div>
+        <Footer />
+      </Router>
     </div>
   );
 }

src/App.scss

@@ -0,0 +1,18 @@
+@import "../src/common/colors.scss";
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Open Sans", sans-serif;
+}
+a {
+  text-decoration: none;
+}
+
+body {
+  background: $primary-color;
+}
+.container {
+  margin: 0px 40px;
+}

src/common/apis/MovieApiKey.js

@@ -0,0 +1 @@
+export const APIKey = "53c800d";

src/common/apis/movieApi.js

@@ -0,0 +1,5 @@
+import axios from "axios";
+
+export default axios.create({
+  baseURL: "https://www.omdbapi.com",
+});

src/common/colors.scss

@@ -0,0 +1,4 @@
+$primary-color: #0f171e;
+$secondary-color: #1a242f;
+$font-primary: #ffffff;
+$font-secondary: #79b8f3;

src/components/Footer/Footer.js

@@ -0,0 +1,13 @@
+import React from "react";
+import "./Footer.scss";
+
+const Footer = () => {
+  return (
+    <div className="footer">
+      <div>Movie App</div>
+      <div>©2021, Movie, Inc. or its affiliates</div>
+    </div>
+  );
+};
+
+export default Footer;

src/components/Footer/Footer.scss

@@ -0,0 +1,10 @@
+@import "../../common/colors.scss";
+.footer {
+  background: $secondary-color;
+  height: 72px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: $font-primary;
+  flex-direction: column;
+}

src/components/Header/Header.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import user from "../../images/user.png";
+import "./Header.scss";
+
+const Header = () => {
+  return (
+    <div className="header">
+      <Link to="/">
+        <div className="logo">Movie App</div>
+      </Link>
+      <div className="user-image">
+        <img src={user} alt="user" />
+      </div>
+    </div>
+  );
+};
+
+export default Header;

src/components/Header/Header.scss

@@ -0,0 +1,22 @@
+@import "../../common/colors.scss";
+
+.header {
+  background-color: $secondary-color;
+  height: 72px;
+  padding: 0px 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  color: $font-primary;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.user-image,
+.user-image img {
+  width: 38px;
+  height: 38px;
+}

src/components/Home/Home.js

@@ -0,0 +1,23 @@
+import React, { useEffect } from "react";
+import MovieListing from "../MovieListing/MovieListing";
+
+import { useDispatch } from "react-redux";
+import {
+  fetchAsyncMovies,
+  fetchAsyncShows,
+} from "../../features/movies/movieSlice";
+const Home = () => {
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(fetchAsyncMovies());
+    dispatch(fetchAsyncShows());
+  }, [dispatch]);
+  return (
+    <div>
+      <div className="banner-img"></div>
+      <MovieListing />
+    </div>
+  );
+};
+
+export default Home;

src/components/MovieCard/MovieCard.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import "./MovieCard.scss";
+
+const MovieCard = (props) => {
+  const { data } = props;
+  return (
+    <div className="card-item">
+      <Link to={`/movie/${data.imdbID}`}>
+        <div className="card-inner">
+          <div className="card-top">
+            <img src={data.Poster} alt={data.Title} />
+          </div>
+          <div className="card-bottom">
+            <div className="card-info">
+              <h4>{data.Title}</h4>
+              <p>{data.Year}</p>
+            </div>
+          </div>
+        </div>
+      </Link>
+    </div>
+  );
+};
+
+export default MovieCard;

src/components/MovieCard/MovieCard.scss

@@ -0,0 +1,32 @@
+@import "../../common/colors.scss";
+.card-item {
+  background: $secondary-color;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  &:hover {
+    transform: scale(1.1);
+    transition: all 0.3s;
+  }
+}
+
+.card-top {
+  height: 300px;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.card-bottom {
+  padding: 20px;
+}
+.card-info {
+  color: $font-primary;
+  h4 {
+    font-size: 22px;
+    font-weight: 400;
+    margin-bottom: 10px;
+  }
+}