timescale · kouqhar · Jun 13, 2021 · Jun 13, 2021 · Jun 13, 2021 · Jun 15, 2021
diff --git a/.env.sample b/.env.sample
@@ -1,3 +1,3 @@
 REACT_APP_MOVIE_DB_API_KEY=
-REACT_APP_API_DOMAIN = 'https://api.themoviedb.org/3';
-REACT_APP_API_BASE_IMAGE_URL = 'https://image.tmdb.org/t/p/original';
+REACT_APP_API_DOMAIN = https://api.themoviedb.org/3
+REACT_APP_API_BASE_IMAGE_URL = https://image.tmdb.org/t/p/original
diff --git a/README.md b/README.md
@@ -9,31 +9,30 @@ to help. Happy hacking!
 
 ## Assignment
 
-![Screenshot](./src/images/screenshot.png)
+![Screenshot](./src/assets/images/screenshot.png)
 
 You are tasked with building a movie discovery app built in react. This app will
 display movies in a grid and give the user more information when they click on
-one of the posters. To fetch the movie info, we will be using [The Movie DB][movieDB]
+one of the posters. To fetch the movie info, we will be using [The Movie DB][moviedb]
 and will include the API key for you to add to the `.env` in the initial email.
 
 ### Features
 
 The main features that should be implemented
+
 - On the initial visit to the site, it will show the most recent movies
 - Allow users to put in a search term and display the results in the same grid
 - When a user clicks on one of the cards, open a modal and display more information about the movie
 
-
 ### The rules
 
 - Follow the [designs in Figma][figma] as closely as possible
-- Use **only** the packages provided in the package.json. You dont have to use all of them, 
+- Use **only** the packages provided in the package.json. You dont have to use all of them,
   but we ask for you not to add any additional
 - Site should have a simple responsive design
 - Site should work in the latest Chrome on Mac OS
 - Fork the repo to your own account, make it public and send us the repo url when you are completed. We will
   clone and run the site on our local.
 
-
-[movieDB]: https://developers.themoviedb.org/3/getting-started/introduction
+[moviedb]: https://developers.themoviedb.org/3/getting-started/introduction
 [figma]: https://www.figma.com/file/KKkrDYSUAuRavpqRingRdZ/Movie-Grid?node-id=0%3A1
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,6 +7,8 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.21.1",
+    "dote": "^1.1.0",
+    "env-cmd": "^10.1.0",
     "moment": "^2.29.1",
     "node-sass": "^6.0.0",
     "react": "^17.0.2",
@@ -16,8 +18,8 @@
     "web-vitals": "^1.0.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "env-cmd -f .env.sample react-scripts start",
+    "build": "env-cmd -f .env.sample react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

diff --git a/public/index.html b/public/index.html
@@ -2,21 +2,18 @@
 <html lang="en">
   <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" />
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
     <!--
       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.
@@ -26,7 +23,7 @@
       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`.
     -->
-    <title>React App</title>
+    <title>Movie App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/images/logo.svg → src/assets/images/logo.svg b/src/images/logo.svg → src/assets/images/logo.svg
diff --git a/src/images/screenshot.png → src/assets/images/screenshot.png b/src/images/screenshot.png → src/assets/images/screenshot.png
diff --git a/src/components/App.js b/src/components/App.js
@@ -1,7 +1,19 @@
-import logo from './logo.svg';
+import React from "react";
 
-const App = () => (
-	<img src={logo} alt="Timescale" />
-)
+import logo from "../assets/images/logo.svg";
+
+// Component
+import Movies from "./Movies/Movies";
+
+//  Styles
+import styles from "./styles/App.module.css";
+
+const App = () => {
+  return (
+    <div className={styles.Container}>
+      <Movies logo={logo} />
+    </div>
+  );
+};
 
 export default App;
diff --git a/src/components/Common/InputGroup.js b/src/components/Common/InputGroup.js
@@ -0,0 +1,29 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const InputGroup = ({ type, name, placeholder, value, onChange, required }) => {
+  return (
+    <input
+      type={type}
+      placeholder={placeholder}
+      name={name}
+      value={value}
+      onChange={onChange}
+      required={required}
+    />
+  );
+};
+
+InputGroup.propTypes = {
+  type: PropTypes.string,
+  name: PropTypes.string,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+InputGroup.defaultGroup = {
+  type: "text",
+};
+
+export default InputGroup;
diff --git a/src/components/Movies/Movie/MovieCard.js b/src/components/Movies/Movie/MovieCard.js
@@ -0,0 +1,24 @@
+import React from "react";
+
+//  Styles
+import styles from "./styles/MovieCard.module.css";
+
+const Movie = ({ title, poster, clicked, keyed, rating }) => {
+  const displayError = "Information Not Set!!!";
+  return (
+    <div className={styles.Card} onClick={clicked} key={keyed}>
+      <div className={styles.Card__poster}>
+        <img src={poster} alt={title} className={styles.Card__poster___image} />
+      </div>
+      <p className={styles.Card__rating}>{rating}</p>
+
+      <div className={styles.Card__details}>
+        <p className={styles.Card__details___title}>
+          {title !== "" ? title : displayError}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Movie;
diff --git a/src/components/Movies/Movie/styles/MovieCard.module.css b/src/components/Movies/Movie/styles/MovieCard.module.css
diff --git a/src/components/Movies/Movie/styles/MovieCard.module.css.map b/src/components/Movies/Movie/styles/MovieCard.module.css.map
diff --git a/src/components/Movies/Movie/styles/MovieCard.module.scss b/src/components/Movies/Movie/styles/MovieCard.module.scss
@@ -0,0 +1,56 @@
+@import "../../../styles/partials/mixin";
+@import "../../../styles/partials/mediaQueries";
+@import "../../../styles/partials/colors";
+
+.Card {
+    @include displayFlex();
+    flex-direction: column;
+    min-height: 20rem;
+    width: 200px;
+    background: $primaryGrey;
+    text-align: center;
+    position: relative;
+    box-shadow: 2px 2px 2px 3px $primaryGrey;
+    cursor: pointer;
+    border-radius: .5rem;
+    transition: transform .3s ease-in-out;
+
+    @include responsive(medium-screens) {
+        width: 100%;
+    }
+
+    &__poster {
+        @include heightWidth(auto, 100%);
+        min-height: 90%;
+
+        &___image {
+            @include heightWidth();
+            border-radius: .5rem;
+        }
+    }
+
+    &__rating {
+        @include heightWidth(2rem, 2rem);
+        @include centeredGrid();
+        border: 2px solid $primaryBlack;
+        background: $primaryWhite;
+        border-radius: 50%;
+        position: absolute;
+        top: 1%;
+        left: 5%;
+    }
+
+    &__details {
+        @include heightWidth(auto, 100%);
+        background: $primaryWhite;
+        font-weight: bold;
+        min-height: 10%;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+    }
+
+    &:hover {
+        transform: translate(3%, -3%);
+    }
+}
diff --git a/src/components/Movies/Movie/styles/dist/MovieCard.module.css b/src/components/Movies/Movie/styles/dist/MovieCard.module.css
@@ -0,0 +1,57 @@
+.Card {
+  display: flex;
+  justify-content: "center";
+  align-items: "center";
+  -ms-justify-content: "center";
+  -ms-align-items: "center";
+  flex-direction: column;
+  min-height: 20rem;
+  width: 200px;
+  background: #eee;
+  text-align: center;
+  position: relative;
+  box-shadow: 2px 2px 2px 3px #eee;
+  cursor: pointer;
+  border-radius: 0.5rem;
+  transition: transform 0.3s ease-in-out;
+}
+@media only screen and (max-width: 800px) {
+  .Card {
+    width: 100%;
+  }
+}
+.Card__poster {
+  height: auto;
+  width: 100%;
+  min-height: 90%;
+}
+.Card__poster___image {
+  height: 100%;
+  width: 100%;
+  border-radius: 0.5rem;
+}
+.Card__rating {
+  height: 2rem;
+  width: 2rem;
+  display: grid;
+  place-items: center;
+  border: 2px solid black;
+  background: white;
+  border-radius: 50%;
+  position: absolute;
+  top: 1%;
+  left: 5%;
+}
+.Card__details {
+  height: auto;
+  width: 100%;
+  background: white;
+  font-weight: bold;
+  min-height: 10%;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+.Card:hover {
+  transform: translate(3%, -3%);
+}