First Commit

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/Header.js

@@ -0,0 +1,27 @@
+import Image from "next/image"
+import HeaderItem from "./HeaderItem"
+import {
+    BadgeCheckIcon,
+    CollectionIcon,
+    HomeIcon,
+    LightningBoltIcon,
+    SearchIcon,
+    UserIcon
+} from "@heroicons/react/outline"
+function Header() {
+    return (
+        <div className="flex flex-col sm:flex-row m-5 justify-between items-center h-auto">
+            <div className="flex flex-grow justify-evenly max-w-2xl">
+                <HeaderItem title="HOME" Icon = {HomeIcon}/>
+                <HeaderItem title="TRENDING" Icon = {LightningBoltIcon}/>
+                <HeaderItem title="VERIFIED" Icon = {BadgeCheckIcon}/>
+                <HeaderItem title="COLLECIONS" Icon = {CollectionIcon}/>
+                <HeaderItem title="SEARCH" Icon = {SearchIcon}/>
+                <HeaderItem title="ACCOUNT" Icon = {UserIcon}/>
+            </div>
+            <Image className="object-contain" src='https://links.papareact.com/ua6' width={200} height={100} alt="hulu icon"/>
+        </div>
+    )
+}
+
+export default Header

components/HeaderItem.js

@@ -0,0 +1,10 @@
+function HeaderItem( {Icon, title}) {
+    return (
+        <div className="flex flex-col items-center cursor-pointer group w-12 sm:w-20 hover:text-white">
+            <Icon className="h-8 mb-1 group-hover:animate-bounce" />
+            <p className="opacity-0 group-hover:opacity-100 tracking-widest">{title}</p>
+        </div>
+    )
+}
+
+export default HeaderItem

components/Nav.js

@@ -0,0 +1,28 @@
+/* eslint-disable react/jsx-key */
+import { route } from "next/dist/server/router"
+import { useRouter } from "next/router"
+import requests from "../utils/requests"
+function Nav() {
+    const router = useRouter();
+    return (
+        <nav className="relative">
+            <div className="flex px-10 sm:px-20 text-2xl whitespace-nowrap space-x-10 sm:space-x-20 overflow-x-scroll scrollbar-hide">
+            {Object.entries(requests).map(([key, {title, url }]) => (
+                <h2
+                key = {key}  
+                onClick={() => {
+                    router.push(' /?genre='+key)
+                } } 
+                className="last:pr-24 cursor-pointer transition duration-100 transform hover:scale-125 hover:text-white active:text-red-500">
+                    {title}
+                </h2>
+            ))}
+            </div>
+            <div className="absolute top-0 right-0 bg-gradient-to-l from-[#06202A] h-10 w-1/6">
+
+            </div>
+        </nav>
+    )
+}
+
+export default Nav

components/Results.js

@@ -0,0 +1,21 @@
+import Thumbnail from "./Thumbnail"
+import FlipMove from "react-flip-move"
+function Results( {results}) {
+    // (result) => 
+    // (
+    //     <Thumbnail key={result.id} result={result} />
+    // )
+    // results.map( result =>{})
+    var myArr = null;
+    return (
+        <div className="px-5 sm:grid md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5">
+            {
+                results.map( result => (<Thumbnail key={result.id} result={result} />))
+            }   
+        </div>
+    )
+}
+
+
+
+export default Results

components/Thumbnail.js

@@ -0,0 +1,60 @@
+import { ThumbUpIcon } from "@heroicons/react/outline";
+import Image from "next/image";
+import React from "react"
+function Thumbnail(resultvalue) {
+    const result = resultvalue.result;
+    const lineWrap = React.useRef()
+    const desc = React.useRef()
+    const BASE_URL = "https://image.tmdb.org/t/p/original";
+    var img1 = result.backdrop_path
+    var img2 = result.poster_path
+    var img3 = result.poster_path
+    var image = null
+    if (!img1 && !img2) {
+        image = img3
+    }else if (!img1) {
+        image = img2
+    }else{
+        image = img1
+    }
+    image = BASE_URL + image
+    // console.log(image)
+    return (
+        <div className="p-2 group cursor-pointer min-w-fit">
+            <Image
+                layout="responsive"
+                src={image}
+                alt=""
+                height={1080}
+                width={1920}
+            />
+            <div className="p-2">
+
+                <div className="relative">
+                    <p ref={desc} className="line-clamp-2 group-hover:t max-w-[75%]" id="desc">{result.overview}</p>
+                    <div ref={lineWrap} className="absolute right-0 text-blue-700 -bottom-1" onClick={
+                        () => {
+                            if (lineWrap.current.innerHTML == "Read More") {
+                                lineWrap.current.innerHTML = "Read Less"
+                                desc.current.classList.remove("line-clamp-2")
+                            } else if(lineWrap.current.innerHTML == "Read Less"){
+                                desc.current.classList.add("line-clamp-2")
+                                lineWrap.current.innerHTML = "Read More"
+                            }
+                        }
+                    }>Read More</div>
+                </div>
+
+                <h2 className="mt-1 text-2xl text-white transition-all duration-100 ease-in-out group-hover:font-bold">{result.title || result.original_name}</h2>
+
+                <p className="flex items-center opacity-0 group-hover:opacity-100">
+                    {/* {result.media_type && ' .'}{" "} */}
+                    {result.release_date || result.first_air_date} .{" "}
+                    <ThumbUpIcon className="h-5 mx-2"/> {result.vote_count}
+                </p>
+            </div>
+        </div>
+    )
+}
+
+export default Thumbnail

genres.json

@@ -0,0 +1,23 @@
+{
+  "genres": [
+    { "id": 28, "name": "Action" },
+    { "id": 12, "name": "Adventure" },
+    { "id": 16, "name": "Animation" },
+    { "id": 35, "name": "Comedy" },
+    { "id": 80, "name": "Crime" },
+    { "id": 99, "name": "Documentary" },
+    { "id": 18, "name": "Drama" },
+    { "id": 10751, "name": "Family" },
+    { "id": 14, "name": "Fantasy" },
+    { "id": 36, "name": "History" },
+    { "id": 27, "name": "Horror" },
+    { "id": 10402, "name": "Music" },
+    { "id": 9648, "name": "Mystery" },
+    { "id": 10749, "name": "Romance" },
+    { "id": 878, "name": "Science Fiction" },
+    { "id": 10770, "name": "TV Movie" },
+    { "id": 53, "name": "Thriller" },
+    { "id": 10752, "name": "War" },
+    { "id": 37, "name": "Western" }
+  ]
+}

next.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  reactStrictMode: false,
+  images: {
+    domains: ["links.papareact.com", "image.tmdb.org"],
+  },
+};

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "huluclone",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@heroicons/react": "^1.0.5",
+    "@tailwindcss/line-clamp": "^0.3.1",
+    "next": "12.0.8",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-flip-move": "^3.0.4",
+    "tailwind-scrollbar-hide": "^1.1.7"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.2",
+    "eslint": "8.6.0",
+    "eslint-config-next": "12.0.8",
+    "postcss": "^8.4.5",
+    "tailwindcss": "^3.0.13"
+  }
+}

pages/_app.js

@@ -0,0 +1,7 @@
+import '../styles/globals.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

pages/api/hello.js

@@ -0,0 +1,5 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+export default function handler(req, res) {
+  res.status(200).json({ name: 'John Doe' })
+}

pages/index.js

@@ -0,0 +1,47 @@
+import Head from 'next/head'
+import Header from '../components/Header'
+import Nav from '../components/Nav'
+import Results from '../components/Results'
+import requests from '../utils/requests'
+
+export default function Home(results) {
+  console.log(results)
+  return (
+    <div>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      {/* Header */}
+      <Header/>
+
+      {/* Nav */}
+
+      <Nav />
+
+      <Results results = {results.result}/>
+
+    </div>
+  )
+}
+
+export async function getServerSideProps(context) {
+  const genre = context.query.genre;
+  var link = requests.fetchActionMovies.url;
+  if (genre != null) {
+    link = requests[genre].url
+  }
+  link = 'https://api.themoviedb.org/3' + link
+  // const request = await fetch(link).then( (res) => res.json() );
+
+  const fetchRes = await fetch(link);
+
+  const resulting = await fetchRes.json();
+  let x = resulting.results
+  return{
+    props:{
+      result: x,
+    }
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

styles/globals.css

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base{
+  body{
+    @apply bg-[#06202A] text-gray-300
+  }
+}

tailwind.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  mode:'jit',
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      screens: {
+        "3xl": "2000px",
+      },
+    },
+  },
+  plugins: [require("tailwind-scrollbar-hide"),require('@tailwindcss/line-clamp'),]
+};