Welcome to "discover-videos" — your gateway to seamless video exploration.
Elevate your content discovery with our curated collection. 🎥📺
Repository Overview
Welcome to the repository for 'Discover Videos', a project featured in the Complete Next.js Developer course by Zero To Mastery. This repository serves as a comprehensive demonstration, showcasing both fundamental and advanced concepts in Next.js development. Explore the intricacies of Authentication, Incremental Static Regeneration (ISR), and GraphQL integration, alongside core features like Routing, Static Site Generation (SSG), and Serverless Functions. Dive into the depth of Next.js capabilities with this illustrative (Netflix clone) application.
This is a Next.js project bootstrapped with create-next-app.
To begin exploring and contributing to this project, follow these steps:
git clone https://github.com/ThomasCode92/discover-videos
yarn install # install dependencies
# add .env.local file, as described below
yarn dev # start development serverOpen 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. The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
For this project to function properly, it's essential to set up a couple of API keys. Without them, the videos won't display correctly. The needed keys are for:
- magic.link, passwordless authentication
- YouTube API, video search and viewing.
- Hasura, instant real-time GraphQL API engine
For that, you need to create a .env.local file in your project that will look like this:
YOUTUBE_API_KEY=<REPLACE THIS>
NEXT_PUBLIC_MAGIC_PUBLISHABLE_API_KEY=<REPLACE THIS>
MAGIC_SECRET_KEY=<REPLACE THIS>
NEXT_PUBLIC_HASURA_GRAPHQL_URL=<REPLACE THIS>
JWT_SECRET=<RANDOM_STRING>Obtain the necessary environment values by referring to the documentation links provided above. Once retrieved, paste them into the appropriate placeholders.
During local development, it's advisable to include the environment variable DEVELOPMENT=true. This setting prevents fetching videos from the YouTube API and instead accesses them from data/videos.json. This approach helps avoid reaching the YouTube API quota during development, allowing you to continue your work without concerns about exhausting API calls.
Start the development server with DEVELOPMENT=true yarn dev
The application is deployed on the Vercel Platform. Vercel is a hoisting platform build by the creators of Next.js.
Check out the Next.js deployment documentation for more details.