app skeleton

src/App.tsx

@@ -1,26 +1,14 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import Layout from './Layout';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Layout />
     </div>
-  );
+  )
 }
 
 export default App;

src/ContentLayout/index.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import Filters from '../components/Filters';
+import Menu from '../components/Menu';
+import MoviesList from '../components/MovieList';
+
+
+const ContentLayout: FC = () => {
+
+    return (
+        <>
+            <div>
+                <Menu />
+                <Filters />
+            </div>
+            <MoviesList />
+        </>);
+}
+
+export default ContentLayout;

src/Header/index.tsx

@@ -0,0 +1,8 @@
+import React, { FC } from 'react';
+
+const Header: FC = () => {
+
+    return (<>header</>);
+}
+
+export default Header;

src/Layout/index.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+import ContentLayout from '../ContentLayout';
+import Header from '../Header';
+
+
+
+const Layout: FC = () => {
+
+    //const movies = 
+
+    return (
+        <>
+            layout
+            {/* <Header />
+            <ContentLayout /> */}
+        </>
+    );
+}
+
+export default Layout;

src/MovieCard/index.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+
+const MovieCard: FC<MovieCardInterface> = ({ title, description }) => {
+
+    return (
+        <div className="MovieCard">
+            <h3>{title}</h3>
+            <h3>{description}</h3>
+        </div>
+    );
+}
+
+interface MovieCardInterface {
+    title: string,
+    description: string,
+    coverUrl: string,
+}
+
+
+export default MovieCard;
+

src/components/Filters/index.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+
+
+import './App.css';
+
+const Filters: FC = () => {
+
+    return (
+        <>
+
+        </>
+    );
+}
+
+export default Filters;

src/components/Menu/index.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+
+
+import './App.css';
+
+
+
+
+const Menu: FC = () => {
+
+    return (
+        <>
+
+        </>
+    );
+}
+
+export default Menu;

src/components/MovieList/index.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+
+
+const MoviesList: FC = () => {
+
+    return (
+        <>
+
+        </>
+    );
+}
+
+export default MoviesList;

src/mock-data.json

@@ -0,0 +1,96 @@
+[
+  {
+    "id": "1",
+    "title": "Game Night",
+    "year": "2018",
+    "genres": ["Action", "Comedy", "Crime"],
+    "contentRating": "11",
+    "duration": "PT100M",
+    "releaseDate": "2018-02-28",
+    "averageRating": 0,
+    "originalTitle": "",
+    "storyline": "A group of friends who meet regularly for game nights find themselves trying to solve a murder mystery.",
+    "actors": ["Rachel McAdams", "Jesse Plemons", "Jason Bateman"],
+    "imdbRating": "",
+    "posterurl": "https://images-na.ssl-images-amazon.com/images/M/MV5BMjQxMDE5NDg0NV5BMl5BanBnXkFtZTgwNTA5MDE2NDM@._V1_SY500_CR0,0,337,500_AL_.jpg"
+  },
+  {
+    "id": "2",
+    "title": "Area X: Annihilation",
+    "year": "2018",
+    "genres": ["Adventure", "Drama", "Fantasy"],
+    "contentRating": "R",
+    "duration": "",
+    "releaseDate": "2018-02-23",
+    "averageRating": 0,
+    "originalTitle": "Annihilation",
+    "storyline": "A biologist's husband disappears. She puts her name forward for an expedition into an environmental disaster zone, but does not find what she's expecting. The expedition team is made up of the biologist, an anthropologist, a psychologist, a surveyor, and a linguist.",
+    "actors": ["Tessa Thompson", "Jennifer Jason Leigh", "Natalie Portman"],
+    "imdbRating": "",
+    "posterurl": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTk2Mjc2NzYxNl5BMl5BanBnXkFtZTgwMTA2OTA1NDM@._V1_SY500_CR0,0,320,500_AL_.jpg"
+  },
+  {
+    "id": "3",
+    "title": "Hannah",
+    "year": "2017",
+    "genres": ["Drama"],
+    "contentRating": "",
+    "duration": "PT95M",
+    "releaseDate": "2018-01-24",
+    "averageRating": 0,
+    "originalTitle": "",
+    "storyline": "Intimate portrait of a woman drifting between reality and denial when she is left alone to grapple with the consequences of her husband's imprisonment.",
+    "actors": [
+      "Charlotte Rampling",
+      "Andr\u00e9 Wilms",
+      "St\u00e9phanie Van Vyve"
+    ],
+    "imdbRating": 6.5,
+    "posterurl": "https://images-na.ssl-images-amazon.com/images/M/MV5BNWJmMWIxMjQtZTk0Mi00YTE0LTkyNzAtYzQxYjcwYjE4ZDk2XkEyXkFqcGdeQXVyMTc4MzI2NQ@@._V1_SY500_SX350_AL_.jpg"
+  },
+  {
+    "id": "4",
+    "title": "The Lodgers",
+    "year": "2017",
+    "genres": ["Drama", "Horror", "Romance"],
+    "contentRating": "R",
+    "duration": "PT92M",
+    "releaseDate": "2018-03-09",
+    "averageRating": 0,
+    "originalTitle": "",
+    "storyline": "1920, rural Ireland. Anglo Irish twins Rachel and Edward share a strange existence in their crumbling family estate. Each night, the property becomes the domain of a sinister presence (The Lodgers) which enforces three rules upon the twins: they must be in bed by midnight; they may not permit an outsider past the threshold; if one attempts to escape, the life of the other is placed in jeopardy. When troubled war veteran Sean returns to the nearby village, he is immediately drawn to the mysterious Rachel, who in turn begins to break the rules set out by The Lodgers. The consequences pull Rachel into a deadly confrontation with her brother - and with the curse that haunts them.",
+    "actors": ["Charlotte Vega", "David Bradley", "Moe Dunford"],
+    "imdbRating": 5.8,
+    "posterurl": "https://images-na.ssl-images-amazon.com/images/M/MV5BM2FhM2E1MTktMDYwZi00ODA1LWI0YTYtN2NjZjM3ODFjYmU5XkEyXkFqcGdeQXVyMjY1ODQ3NTA@._V1_SY500_CR0,0,337,500_AL_.jpg"
+  },
+  {
+    "id": "5",
+    "title": "Beast of Burden",
+    "year": "2018",
+    "genres": ["Action", "Crime", "Drama"],
+    "contentRating": "R",
+    "duration": "",
+    "releaseDate": "2018-02",
+    "averageRating": 0,
+    "originalTitle": "",
+    "storyline": "Sean Haggerty only has an hour to deliver his illegal cargo. An hour to reassure a drug cartel, a hitman, and the DEA that nothing is wrong. An hour to make sure his wife survives. And he must do it all from the cockpit of his Cessna.",
+    "actors": ["Daniel Radcliffe", "Grace Gummer", "Pablo Schreiber"],
+    "imdbRating": "",
+    "posterurl": "https://images-na.ssl-images-amazon.com/images/M/MV5BMjEyNTM3MDQ2NV5BMl5BanBnXkFtZTgwMDI5Nzk1NDM@._V1_SY500_CR0,0,336,500_AL_.jpg"
+  },
+  {
+    "id": "6",
+    "title": "The Chamber",
+    "year": "2016",
+    "genres": ["Horror", "Thriller"],
+    "contentRating": "",
+    "duration": "PT88M",
+    "releaseDate": "2017-03-10",
+    "averageRating": 0,
+    "originalTitle": "",
+    "storyline": "A claustrophobic survival thriller set beneath the Yellow Sea off the coast of North Korea where the pilot of a small submersible craft and a three man Special Ops team on a secret recovery mission become trapped underwater in a fight for survival.",
+    "actors": ["Johannes Kuhnke", "Charlotte Salt", "James McArdle"],
+    "imdbRating": 4.4,
+    "posterurl": "https://images-na.ssl-images-amazon.com/images/M/MV5BNTVlODgwMjgtZGUzMy00ZTY1LWIyMDEtYTI2Y2JlYzVjZTNkXkEyXkFqcGdeQXVyNTg0MDM1MzY@._V1_SY500_CR0,0,337,500_AL_.jpg"
+  }
+]