├── .eslintrc.json ├── .idea ├── .gitignore ├── vcs.xml ├── misc.xml ├── inspectionProfiles │ └── profiles_settings.xml ├── modules.xml └── imdb.iml ├── public ├── favicon.ico ├── vercel.svg ├── spinner.svg ├── thirteen.svg └── next.svg ├── jsconfig.json ├── src ├── app │ ├── api │ │ └── hello │ │ │ └── route.js │ ├── globals.css │ ├── loading.js │ ├── error.js │ ├── layout.js │ ├── page.js │ ├── search │ │ └── [searchTerm] │ │ │ └── page.js │ ├── about │ │ └── page.js │ └── movie │ │ └── [id] │ │ └── page.js └── components │ ├── Navbar.js │ ├── MenuItem.js │ ├── Results.js │ ├── Providers.js │ ├── NavbarItem.js │ ├── DarkModeSwitch.js │ ├── Header.js │ ├── SearchBox.js │ └── Card.js ├── postcss.config.js ├── next.config.js ├── tailwind.config.js ├── .gitignore ├── README.md └── package.json /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rakibhassan01/imdb_nextJS/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./src/*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/app/api/hello/route.js: -------------------------------------------------------------------------------- 1 | export async function GET(request) { 2 | return new Response('Hello, Next.js!') 3 | } 4 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | html::-webkit-scrollbar { 6 | display: none; 7 | } 8 | 9 | html { 10 | scrollbar-width: none; 11 | } -------------------------------------------------------------------------------- /.idea/inspectionProfiles/profiles_settings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | // output: "export", 4 | experimental: { 5 | appDir: true, 6 | }, 7 | images: { 8 | domains: ["image.tmdb.org"], 9 | }, 10 | }; 11 | 12 | module.exports = nextConfig; 13 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/imdb.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/app/loading.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | export default function Loading() { 3 | return ( 4 |
5 | loading... 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /src/app/error.js: -------------------------------------------------------------------------------- 1 | "use client" 2 | import {useEffect} from 'react' 3 | 4 | export default function Error({error, reset}) { 5 | useEffect(()=>{ 6 | console.log(error) 7 | },[error]) 8 | return ( 9 |
10 |

Something went wrong

11 | 12 |
13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /src/components/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import NavbarItem from './NavbarItem' 3 | 4 | export default function Navbar() { 5 | return ( 6 |
7 | 8 | 9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /src/components/MenuItem.js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | import React from 'react' 3 | 4 | export default function MenuItem({ title, address, Icon }) { 5 | return ( 6 |
7 | 8 | 9 |

{title}

10 | 11 |
12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /src/components/Results.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Card from './Card' 3 | 4 | export default function Results({ results }) { 5 | return ( 6 |
{ 7 | results.map((res)=>( 8 | 9 | )) 10 | } 11 |
12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./app/**/*.{js,ts,jsx,tsx}", 5 | "./pages/**/*.{js,ts,jsx,tsx}", 6 | "./components/**/*.{js,ts,jsx,tsx}", 7 | 8 | // Or if using `src` directory: 9 | "./src/**/*.{js,ts,jsx,tsx}", 10 | ], 11 | theme: { 12 | extend: {}, 13 | }, 14 | plugins: [ require('@tailwindcss/line-clamp'),], 15 | darkMode: 'class', 16 | } 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | .env 31 | # vercel 32 | .vercel 33 | -------------------------------------------------------------------------------- /src/components/Providers.js: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { ThemeProvider } from 'next-themes' 4 | import React from 'react' 5 | 6 | export default function Providers({ children }) { 7 | return ( 8 | 9 |
10 | {children} 11 |
12 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # imdb_nextJS 3 | 4 | Open link with your browser to see the result. 5 | 6 | ## Live Demo : [https://imdb-next-js.vercel.app](https://imdb-next-js.vercel.app/) 7 | 8 |
9 | 10 | 11 |
12 | 13 | 14 | --- 15 | 16 | 17 | 18 | 19 | 20 | 21 | Feel free to explore, develop, and contribute to this repository to build exciting web applications with Next.js. 22 | 23 | Happy coding...! 24 | -------------------------------------------------------------------------------- /src/components/NavbarItem.js: -------------------------------------------------------------------------------- 1 | "use client" 2 | import Link from 'next/link' 3 | import { useSearchParams } from "next/navigation"; 4 | 5 | export default function NavbarItem({ title, param }) { 6 | const searchParams = useSearchParams(); 7 | const genre = searchParams.get('genre') 8 | return ( 9 |
10 | {title} 12 |
13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/spinner.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/app/layout.js: -------------------------------------------------------------------------------- 1 | import Header from '@/components/Header' 2 | import Navbar from '@/components/Navbar' 3 | import Providers from '@/components/Providers' 4 | import SearchBox from '@/components/SearchBox' 5 | import './globals.css' 6 | 7 | export const metadata = { 8 | title: 'IMDb: Ratings, Reviews', 9 | description: 'NextJS app', 10 | } 11 | 12 | export default function RootLayout({ children }) { 13 | return ( 14 | 15 | 16 | 17 |
18 | 19 | 20 | {children} 21 | 22 | 23 | 24 | ) 25 | } 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "imdb", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@tailwindcss/line-clamp": "^0.4.2", 13 | "dotenv": "^16.0.3", 14 | "eslint": "8.36.0", 15 | "eslint-config-next": "13.2.4", 16 | "next": "13.2.4", 17 | "next-themes": "^0.2.1", 18 | "react": "18.2.0", 19 | "react-dom": "18.2.0", 20 | "react-icons": "^4.8.0" 21 | }, 22 | "devDependencies": { 23 | "autoprefixer": "^10.4.14", 24 | "postcss": "^8.4.21", 25 | "tailwindcss": "^3.2.7" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/app/page.js: -------------------------------------------------------------------------------- 1 | import Results from "@/components/Results"; 2 | 3 | const API = process.env.NEXT_PUBLIC_IP_API_KEY; 4 | 5 | export default async function Home({ searchParams }) { 6 | const genre = searchParams.genre || "fetchTrending"; 7 | const res = await fetch( 8 | `https://api.themoviedb.org/3/${ 9 | genre === "fetchTopRated" ? "movie/top_rated" : "trending/all/week" 10 | }?api_key=${API}&language=en-US&page=1`, 11 | { next: { revalidate: 10000 } } 12 | ); 13 | if (!res.ok) { 14 | throw new Error("Failed to fetch data"); 15 | } 16 | const data = await res.json(); 17 | const results = data.results; 18 | return ( 19 |
20 | 21 |
22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /src/app/search/[searchTerm]/page.js: -------------------------------------------------------------------------------- 1 | import Results from "@/components/Results"; 2 | 3 | export default async function SearchPage({ params }) { 4 | const res = await fetch(`https://api.themoviedb.org/3/search/movie?api_key=${process.env.NEXT_PUBLIC_IP_API_KEY}&query=${params.searchTerm}&language=en-US&include_adult=false`) 5 | 6 | if (!res.ok) { 7 | throw new Error("Error fetching data"); 8 | } 9 | 10 | const data = await res.json(); 11 | 12 | const results = data.results; 13 | return ( 14 |
15 | {results && results.length === 0 && ( 16 |

No results found

17 | )} 18 | {results && } 19 |
20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /src/components/DarkModeSwitch.js: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { MdLightMode } from 'react-icons/md' 4 | import { BsFillMoonFill } from 'react-icons/bs' 5 | import { useTheme } from 'next-themes' 6 | import { useEffect, useState } from 'react' 7 | 8 | export default function DarkModeSwitch() { 9 | const { systemTheme, theme, setTheme } = useTheme() 10 | const [mounted, setMounted] = useState(false) 11 | useEffect(()=>setMounted(true),[]) 12 | const currentTheme = theme === 'system' ? systemTheme : theme 13 | return ( 14 | <> 15 | {mounted && ( currentTheme === 'dark' ? ( 16 | setTheme('light')} /> 17 | ) : ( 18 | setTheme('dark')} /> 19 | ))} 20 | 21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import MenuItem from './MenuItem' 3 | import { AiFillHome } from 'react-icons/ai' 4 | import { BsInfoCircleFill } from 'react-icons/bs' 5 | import Link from 'next/link' 6 | import DarkModeSwitch from './DarkModeSwitch'; 7 | 8 | export default function Header() { 9 | return ( 10 |
11 |
12 | 13 | 14 |
15 |
16 | 17 | 18 |

19 | 20 | IMDb 21 | 22 |

23 | 24 |
25 |
26 | ) 27 | } 28 | -------------------------------------------------------------------------------- /public/thirteen.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/SearchBox.js: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { useState } from "react"; 3 | import { useRouter } from "next/navigation"; 4 | 5 | export default function SearchBox() { 6 | const [search, setSearch] = useState(""); 7 | const router = useRouter(); 8 | const handleSubmit = (e) => { 9 | e.preventDefault(); 10 | if (!search) return; 11 | router.push(`/search/${search}`); 12 | } 13 | return ( 14 |
15 | setSearch(e.target.value)} 18 | type="text" 19 | placeholder='Search Keywords...' 20 | className="w-full h-14 rounded-sm placeholder-gary-500 outline-none bg-transparent flex-1" /> 21 | 28 |
29 | ) 30 | } 31 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Card.js: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import Image from "next/image"; 3 | import { FiThumbsUp } from "react-icons/fi"; 4 | 5 | export default function Card({ res }) { 6 | return ( 7 |
8 | 9 | image is not available 21 |
22 |

{res.overview}

23 |

24 | {res.title || res.name} 25 |

26 |

27 | {res.release_date || res.first_air_date} 28 | {res.vote_count} 29 |

30 |
31 | 32 |
33 | ) 34 | } 35 | -------------------------------------------------------------------------------- /src/app/about/page.js: -------------------------------------------------------------------------------- 1 | export default function About() { 2 | return ( 3 |
4 |

About

5 |

6 | Welcome to our movie database website! We are a team of passionate movie 7 | enthusiasts who have come together to create a one-stop destination for 8 | all your movie-related needs. 9 |

10 | 11 |

12 | Our website is designed to provide you with a comprehensive database of 13 | movies from all around the world, along with the latest news, reviews, 14 | and trailers. Our movie database is constantly updated with new 15 | releases, ensuring that you have access to the latest and greatest in 16 | the world of cinema. You can search for movies by title, director, 17 | actor, genre, or release date, making it easy to find the perfect movie 18 | for any occasion. 19 |

20 | 21 |

22 | In addition to our extensive movie database, we also offer a platform 23 | for movie lovers to connect and share their thoughts on the latest 24 | releases. Our community section includes a forum where you can discuss 25 | your favorite films with like-minded individuals and read reviews and 26 | ratings from other users. We also have a section dedicated to movie news 27 | and trailers, keeping you updated with the latest happenings in the 28 | world of cinema. Thank you for visiting our website and we hope you 29 | enjoy your time browsing through our movie database. If you have any 30 | feedback or suggestions, please feel free to contact us. We are always 31 | looking for ways to improve and enhance the user experience on our 32 | website. Happy browsing! 33 |

34 |
35 | ) 36 | } -------------------------------------------------------------------------------- /src/app/movie/[id]/page.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image" 2 | 3 | async function getMovie(movieId) { 4 | const res = await fetch(`https://api.themoviedb.org/3/movie/${movieId}?api_key=${process.env.NEXT_PUBLIC_IP_API_KEY}`) 5 | return await res.json() 6 | } 7 | 8 | export default async function MoviePage({ params }) { 9 | const movieId = params.id 10 | const movie = await getMovie(movieId) 11 | return ( 12 |
13 |
14 | Movie poster 28 |
29 |

30 | {movie.title || movie.name} 31 |

32 |

33 | Overview: 34 | {movie.overview} 35 |

36 |

37 | Date Released: 38 | {movie.release_date || movie.first_air_date} 39 |

40 |

41 | Rating: 42 | {movie.vote_count} 43 |

44 |
45 |
46 |
47 | ) 48 | } 49 | --------------------------------------------------------------------------------