This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

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

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Tech Stack

• Nextjs 14 - an interactive Next.js tutorial.
• Clerk - Authentication and User management
• Video and Audio by Stream - Stream
• CSS framework - tailwindcss
• UI component library - shadcn
• TypeScript

Deploy on Vercel

Production url

More

Detail tutorial

Question & Solution

• HomeCard dynamic class names

  

• Prevent user from clicking too fast on buttons

import debounce from 'lodash.debounce';
function App() {
  ...
	const handleClick = event => {
		const debouncedSave = debounce(() => saveToDb(nextValue), 1000);
		debouncedSave();
	};
  ...
}

This doesn't actually work beacause debouncedSave function will recreated on each handleClick function call. we use useCallback or useRef hook could solve this problem.

	const debouncedSave = useCallback(
		debounce(nextValue => saveToDb(nextValue), 1000),
		[], // will be created only once initially
	);
	const handleClick= event => {
		...
		// Even though handleClick is created on each render and executed
		// it references the same debouncedSave that was created initially
		debouncedSave(nextValue);
	};

	const debouncedSave = useRef(
		debounce(nextValue => saveToDb(nextValue), 1000)
	).current;
	const handleClick= event => {
		...
		debouncedSave(nextValue);
	};