This is a didactic Next.js project which provide access to YouTube videos sorted into a few categories. Eventually, the site allows visitors to create an account using magic link - a secure, seamless and scalable authentication and private key management solution.

Once signed up you may watch videos from those categories, access the video page for more information, like or unlike it and see some statistics about the video. Every video you watch can be saved in your favourite list by clicking over like icon.

Next.js pages uses SSR and preserve the state after page reload.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

In dev mode it uses mock data. Notice /data folder. This is done like this because of limitation of YouTube API requests per day.

API routes can be accessed on http://localhost:3000/api/stats. This endpoint can be edited in pages/api/stats.js.

Technologies

• YouTube API for retrieving videos by categories from YouTube and use them as content for the site.
• Magic - user authentication and private key management solution for Web3 and Web2.
• JWT web tokens for decoding, verifying and generating JWT.
• Hasura GraphQL for database and quick access to GraphQL API.
• ChakraUI for quick building of React components.