Main Page start

.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+    tabWidth: 4
+}

src/App.js

@@ -1,25 +1,12 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import MainPage from "./Screens/MainPage"
+
 
 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>
+    <React.Fragment>
+       <MainPage/>
+    </React.Fragment>
   );
 }
 

src/Screens/MainPage.js

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from "react";
+import "../assets/main_page.css";
+import Card from "../assets/card";
+
+export default function MainPage() {
+    const [headMovieTitle, setHeadMovieTitle] = useState(["Money Heist"]);
+    const [headIMDB, setHeadIMDB] = useState(8.9);
+    const [movieList, setMovieList] = useState([]);
+    const [shows, setShows] = useState([]);
+
+    const getShows = async () => {
+        const response = await fetch(
+            "https://www.episodate.com/api/most-popular?page=1"
+        );
+        const data = await response.json();
+        
+        await setShows(data.tv_shows)
+    };
+
+    useEffect(() => {
+        getShows();
+    }, []);
+
+    return (
+        <div>
+            <header>
+                <h1 className="head-title">{headMovieTitle}</h1>
+                <p className="head-rating">
+                    {" "}
+                    <span className="rating-heading">IMDB Rating:</span>
+                    {headIMDB}
+                </p>
+            </header>
+            <section>
+                {shows.map((item) => (
+                    <Card
+                        name={item['name']}
+                        // image="https://sm.mashable.com/t/mashable_pk/photo/default/vw05sgzdlorqja6lmz6b_hcvz.960.jpg"
+                        image={item['image_thumbnail_path']}
+                        network={item['network']}
+                    />
+                ))}
+            </section>
+        </div>
+    );
+}

src/assets/card.css

@@ -0,0 +1,32 @@
+* {
+    box-sizing: border-box;
+}
+.card {
+    display: flex;
+    border-radius: 7px;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    flex-direction: column;
+    height: 25rem;
+    width: 15rem;
+    box-shadow: 0px 5px 20px rgb(71, 71, 71);
+    margin: 20px;
+    padding: 0 0 1rem 1.2rem;
+    transition: all 0.4s;
+}
+
+.card h1, .card p {
+    color: white;
+    opacity: 0;
+    transition: all 0.6s;
+    text-shadow: 1px 1px grey;    
+}
+
+.card:hover {
+    /* filter: blur(5px); */
+    /* background-color: rgba(0, 0, 0, 0.3); */
+}
+
+.card:hover h1, .card:hover p {
+    opacity: 1;
+}

src/assets/card.js

@@ -0,0 +1,20 @@
+import React, { useState, useEffect } from "react";
+import "./card.css";
+
+function Card({ name, image, network }) {
+    return (
+        <div
+            className="card"
+            style={
+                {
+                 background: `url(${image}) no-repeat center center/cover`
+                }
+            }
+        >
+            <h1>{name}</h1>
+            <p>Network : {network} </p>
+        </div>
+    );
+}
+
+export default Card;

src/assets/kuchbhi,ks.txt

@@ -0,0 +1,59 @@
+import React from "react";
+import style from "./show.module.css";
+
+const Show = ({ name, network, image, start_date }) => {
+  return (
+    <div className={style.show}>
+      <h1>{name}</h1>
+      <p>{network}</p>
+      <img className={style.image} src={image} />
+      <p>{start_date}</p>
+    </div>
+  );
+};
+export default Show;
+
+*****************************************************************************************************************************************************
+
+import React, { useState, useEffect } from "react";
+import "./App.css";
+import Show from "./Show";
+
+function App() {
+  const [shows, setShows] = useState([]);
+  const [search, setSearch] = useState("");
+
+  // const query='https://www.episodate.com/api/most-popular?page=1';
+
+  const getShows = async () => {
+    const response = await fetch(
+      "https://www.episodate.com/api/most-popular?page=1"
+    );
+    const data = await response.json();
+    setShows(data.tv_shows);
+    console.log(data.tv_shows);
+  };
+
+  useEffect(() => {
+    getShows();
+  }, []);
+
+  return (
+    <div className="App">
+      <h1> binge!</h1>
+      <div className="shows">
+        {shows.map((show) => (
+          <Show
+            key={show.id}
+            name={show.name}
+            network={show.network}
+            image={show.image_thumbnail_path}
+            start_date={show.start_date}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default App;

src/assets/main_page.css

@@ -0,0 +1,51 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    --darkbg: #393e46;
+}
+
+body {
+    background-color: var(--darkbg);
+}
+
+body, #root, #root>div {
+    height: 100vh;
+}
+
+header {
+    height: 45%;
+    width: 100%;
+    background: url("https://images.unsplash.com/photo-1595804194379-ec2bbf153d1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80")
+        no-repeat center center/cover;
+    box-shadow: 0 5px 2rem rgba(0, 0, 0, 1);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0 2rem;
+    margin-bottom: 1.5rem;
+}
+
+header .head-title {
+    font-size: 3.5rem;
+    color: white;
+}
+
+
+header .head-rating .rating-heading{
+    color: grey;
+    margin-right: 0.5rem;
+}
+
+header .head-rating {
+    color: white;
+    font-size: 1.5rem;
+    margin-top: 1rem;
+}
+
+section {
+    /* height: 50vh; */
+    display: grid;
+    grid-template-columns: auto auto auto auto auto;
+    justify-content: center;
+}