Send Newsletter Emails Using Resend Broadcasts Hamed Bahram 2024-08-27 | In this video, we'll learn to send broadcast marketing/newsletter emails efficiently using Resend. 👉🏼 Part I video – NextJs mdx portfolio→ youtu.be/hSi_x29bBmE👉🏼 Project source code → hamedbahram.io/notes/next-mdx-portfolio👉🏼 The ultimate NextJs course→ hamedbahram.io/courses/nextjs👉🏼 Resend → resend.com
Building a waitlist system in NextJs Hamed Bahram 2025-02-25 | In this video, we'll build a waitlist using Clerk's Waitlist component in NextJs. 👉🏼 Clerk waitlist component→ go.clerk.com/g7eOpzA👉🏼 AI engineering path→ scrimba.com/?via=hamedbahram👉🏼 Let's connect→ hamedbahram.io/contact
Appointment booking app with NextJs, Neon, Clerk & Cal.com Hamed Bahram 2025-02-11 | In this video, we'll build an appointment booking application using NextJs, Neon Postgres database, Clerk authentication, and Cal.com for calendar integration. 👉🏼 Project source code→ hamedbahram.io/notes/booking-application👉🏼 Neon serverless Postgres→ https://fyi.neon.tech/4hb👉🏼 Clerk authentication→ go.clerk.com/ohHYWoU👉🏼 AI engineering learning path→ scrimba.com/?via=hamedbahram
The easiest way to manage state in NextJs Hamed Bahram 2025-02-04 | This video will look at managing the state in NextJs by lifting it to the URL using the `nuqs` package.👉🏼 Project source code→ github.com/HamedBahram/next-nuqs👉🏼 Learn AI→ scrimba.com/?via=hamedbahram👉🏼 Get in touch with me→ hamedbahram.io/contact
Advanced search filtering in NextJs 15 ft Aurora Scharff Hamed Bahram 2025-01-28 | In this conversation, I'm joined by Aurora Scharff, a web developer from Crayon Consulting, discussing her journey into web development, her experiences with NextJs, and the evolution of its APIs. We delve into performance optimization, data fetching strategies, and the innovative use of URLs as state in applications. Aurora shares insights on implementing suspense and optimistic UI, advanced search parameters, and the benefits of using nuqs for managing state. The conversation concludes with a discussion on caching strategies in NextJs 15 and the future directions of the framework.👉🏼 Connect with Aurora→ https://x.com/aurorascharff👉🏼 Link to Aurora's blog post→ https://aurorascharff.no/posts/managing-advanced-search-param-filtering-next-app-router/👉🏼 Learn AI→ scrimba.com/?via=hamedbahram👉🏼 Connect with me→ hamedbahram.io/contactChapters00:00 Introduction to Aurora Scharff and Web Development Journey02:53 Transitioning to Next.js and App Router Challenges05:51 Exploring Next.js: Choosing the Right Tech Stack09:00 Current State of Next.js and Future Changes11:55 Performance Optimization in Next.js14:48 Data Fetching Strategies and Suspense in Next.js18:06 Managing Search Parameters and Client-Side Interactivity21:04 Caching Strategies and React 19 API23:52 User Experience Considerations with Suspense26:56 Using the New use API for Client Components28:53 Introduction to API for Internationalization30:02 Advanced Search Parameters in App Router31:20 Using URL as State for User Feedback33:01 Optimizing User Interactivity with Transitions36:01 Implementing Optimistic UI for Better UX40:52 Managing Search and Filter States47:00 Exploring nuqs for Search Parameter Management53:11 Next.js 15 Changes and Caching Strategies
Optimizing your NextJs app with after() Hamed Bahram 2025-01-21 | In this video, we'll look at the after() function in NextJs and how it can help us run tasks without blocking the response.
From Idea to Execution: Building AI Tools ft @HassanElMghari Hamed Bahram 2025-01-14 | In this conversation, Hamed and Hassan discuss the rapid evolution of AI app development, sharing insights from Hassan's journey into AI, the challenges of monetization, and the importance of prompt engineering. They explore various applications, including real estate and the innovative Llama Coder project, while emphasizing the significance of building and iterating on AI tools. The discussion also touches on the future of AI, particularly the potential of agents and function calling in enhancing app functionalities.👉🏼 Together AI→ together.ai👉🏼 Connect with Hassan→ https://x.com/nutlope👉🏼 Let's talk→ hamedbahram.io/contactChapters00:00 Introduction to AI App Development02:51 Hassan's Journey into AI05:35 The Success of Room GPT08:14 Monetization Challenges and Strategies11:06 Exploring New AI Projects13:50 Building AI Applications: The Process16:22 Together AI: An Overview18:57 The Future of AI and Its Applications27:30 The Duality of AI: Potential vs. Misuse28:40 Introducing Lama Coder: Building AI Apps32:05 Interactive Coding: A Demo of Lama Coder37:57 The Art of Prompt Engineering42:38 Exploring AI Models: Llama and Beyond47:52 Local vs. Cloud: The AI Hosting Debate51:09 Future Innovations: AI Agents and Function Calling
Build shadcn forms faster Hamed Bahram 2025-01-07 | In this video, we're going to look at a tool that helps building forms with shadcn, react-hook-forms, and zod much faster. 👉🏼 Shadcn form builder→ https://shadcn-form-build.vercel.app👉🏼 Arcjet protection→ launch.arcjet.com/4Y6ZM9n👉🏼 Learn AI with Scrimba (get 20% discount)→ scrimba.com/?via=hamedbahram👉🏼 My courses→ hamedbahram.io/courses👉🏼 Let's connect → hamedbahram.io/contact
How I would learn AI in 2025 Hamed Bahram 2024-12-31 | Sneak peak into Scrimba's AI engineering path.👉🏼 Try Scrimba and get 20% discount→ scrimba.com/?via=hamedbahram👉🏼 Web development roadmap / resources→ hamedbahram.io/notes/web-developer-roadmap-2024👉🏼 Get in touch with me→ hamedbahram.io/contact
Unlocking the Power of AI with Vercel SDK ft Nico Albanese Hamed Bahram 2024-12-24 | In this conversation, we'll focus on the Vercel AI SDK, the fundamentals of language models, and the importance of effective prompting techniques in building applications and chatbots, with practical examples emphasizing the significance of structured outputs and schemas in AI applications.👉🏼 Vercel AI SDK→ sdk.vercel.ai👉🏼 Resources / examples discussed → https://build-ai-app-dec-24.vercel.app/docs👉🏼 Get in touch with me→ hamedbahram.io/contactChapters00:00 Introduction to AI and Versel AI SDK01:13 Nico's Journey into AI10:23 Understanding AI and Language Models27:26 Exploring the AI SDK34:38 Introduction to AI SDK Project Setup39:04 Understanding Classification in AI Models46:26 Leveraging Zod for Structured Data Generation54:51 Expanding Functionality with Urgency and Language Detection01:03:40 Building a Chatbot with AI SDK
Build a Simple API with Cloudflare Workers Hamed Bahram 2024-12-17 | In this video, we'll learn about Cloudflare Workers, a serverless computing provider that allows you to build serverless applications deployed instantly across the globe. 👉🏼 Cloudflare workers→ developers.cloudflare.com/workers👉🏼 My courses→ hamedbahram.io/courses👉🏼 Get in touch with me→ hamedbahram.io/contactChapters:0:00 Intro2:45 Serverless computing4:30 Cloudflare workers8:15 Setup14:00 Cloudflare CLI22:24 Environment variables26:50 Recap
Building robust forms in NextJs 15 Hamed Bahram 2024-12-10 | In this video, we'll look at how to build robust forms in NextJs 15 using server actions, the new `useActionState,` Zod schema validation, and Arcjet for rate limiting and protection against spam and common attacks.👉🏼 Project source code→ github.com/HamedBahram/next-forms👉🏼 Arcjet protection→ launch.arcjet.com/4Y6ZM9n👉🏼 The ultimate NextJs course→ hamedbahram.io/courses👉🏼 Let's connect → hamedbahram.io/contactChapters:0:00 Intro2:40 Project setup6:16 Add useActionState20:30 Add Zod validation31:25 Add spam protection36:45 Recap
How to use Clerk auth in NextJs 15 Hamed Bahram 2024-12-03 | In this video, we'll set up Clerk v6 in a new NextJs 15 app and walk through the breaking API changes when migrating from an older version.👉🏼 Clerk auth→ go.clerk.com/HB-v6👉🏼 Upgrade to @clerk/nextjs v6→ go.clerk.com/HB-v6guide👉🏼 NextJs 15 guide→ youtu.be/-yXjzsP0s54Chapters0:00 Intro1:30 Breaking changes7:25 Setting up a new app14:00 Migrating to v616:00 Default rendering strategy21:15 Recap
From sales to software: Shaundais journey to Netflix Hamed Bahram 2024-11-26 | In this conversation, Hamed interviews Shaundai Person, a senior software engineer at Netflix, about her journey into tech from a sales background. Shaundai shares insights on her unstructured workday at Netflix, the importance of curiosity and persistence in career growth, and how her sales experience has shaped her engineering skills. She discusses her transition into tech, the significance of networking, and her plans for content creation, including a TypeScript course aimed at enterprise users.👉🏼 Connect with Shaundai→ https://x.com/shaundai👉🏼 Connect with me→ https://x.com/HaamedBahram👉🏼 Let's talk about your project→ hamedbahram.io/contactChapters00:00 Introduction to Shaundai Person and Her Journey05:27 Curiosity and Growth in Tech11:04 The Importance of Soft Skills in Tech16:46 Learning to Code: The Self-Taught Journey22:03 Conclusion and Reflections on Career Paths27:50 Transitioning from Sales to Engineering40:07 Future Aspirations: Content Creation and Courses
Securing your application using Arcjet Hamed Bahram 2024-11-19 | In this video, we'll use Arcjet to secure our application by implementing bot protection, rate limiting, email validation, and more in just a few lines of code.👉🏼 Arcjet→ launch.arcjet.com/4Y6ZM9n👉🏼 My courses → hamedbahram.io/courses👉🏼 Let's connect→ hamedbahram.io/contact
The easiest way to build a sidebar menu in NextJs 15 Hamed Bahram 2024-11-12 | In this video, we'll use the new sidebar component in shadcn/ui to build a dashboard in NextJs 15.👉🏼 Project source code→ github.com/HamedBahram/next-15-shadcn👉🏼 The ultimate NextJs course→ hamedbahram.io/courses/nextjs👉🏼 Let's connect→ hamedbahram.io/contactChapters0:00 Intro1:00 Project setup5:00 Site layout15:00 Dashboard layout27:20 Sidebar components47:50 Styling50:50 Recap
Using shadcn/ui with NextJs 15 and React 19 Hamed Bahram 2024-11-05 | In this video, we'll look at setting up shadcn/ui in NextJs 15 and React 19 and how to deal with peer dependencies that don't yet support React 19. 👉🏼 shadcn/ui setup guide→ ui.shadcn.com/docs/react-19👉🏼 NextJs 15 docs→ nextjs.org/docs👉🏼 My courses→ hamedbahram.io/courses👉🏼 Let's connect→ hamedbahram.io/contact
Introduction to NextJs 15 Hamed Bahram 2024-10-29 | This video will explore the new APIs and breaking changes in NextJs15, caching, and what's next in partial prerendering.👉🏼 NextJs 15 release notes→ nextjs.org/blog/next-15👉🏼 New caching APIs in NextJs→ nextjs.org/blog/our-journey-with-caching👉🏼 NextJs conf talks (Partial prerendering)→ youtube.com/watch?v=WLHHzsqGSVQ&t=23837s👉🏼 NextJs conf talks→ nextjs.org/conf👉🏼 The ultimate NextJs course→ hamedbahram.io/courses
The most popular open-source platform for commerce Hamed Bahram 2024-10-23 | In this video, we'll build an ecommerce backend with a NextJs storefront using Medusa, an open-source commerce platform with a built-in framework for customization.👉🏼 Medusa.js→ medusajs.com👉🏼 Medusa documentation→ docs.medusajs.com/v2👉🏼 The ultimate NextJs course→ hamedbahram.io/courses👉🏼 Learn AI with Scrimba (get 20% discount)→ scrimba.com/?via=hamedbahram👉🏼 Let's connect→ hamedbahram.io/contactChapters:00:00:00 Intro00:07:30 Project setup00:12:40 NextJs storefront00:18:30 Medusa backend00:22:00 Basics: Medusa container00:25:15 Basics: Modules00:37:20 Basics: API routes00:39:20 Basics: Commerce modules00:40:54 Basics: Loaders00:43:40 Basics: Events and subscribers00:49:45 Basics: Scheduled jobs00:53:15 Basics: Workflows01:05:00 Basics: Admin customization01:09:30 Recap
Product-Led Growth ft Steven Tey from Dub Hamed Bahram 2024-10-22 | In this conversation, Steven Tey shares his journey from being a developer advocate at Vercel to founding Dub, a link management platform. He discusses his early entrepreneurial experiences, the importance of design in product development, and the evolution of Dub from a side project to a successful startup. Steven emphasizes the significance of product-led growth, the tech stack behind Dub, and the value of open source in fostering community and security. He also reflects on the challenges of transitioning from a developer to a founder and shares insights on the role of AI in development and customer support.👉🏼 Dub.co→ dub.co👉🏼 Steven on X→ https://x.com/steventey👉🏼 The ultimate NextJs course→ hamedbahram.io/courses👉🏼 Let' connect → hamedbahram.io/contactChapters00:00 Introduction to Steven Tey and Dub02:03 Early Entrepreneurial Journey and Background08:32 Transition from Vercel to Dub15:14 The Birth of Dub and Its Evolution20:00 Understanding Dub's Features and Offerings24:58 The Importance of Product-Led Growth31:32 Tech Stack Behind Dub35:31 The Value of Open Source43:06 Life as a Developer vs. Founder47:55 AI in Customer Support and Development50:30 The Future of AI in Development
How to use Vercel blob storage in NextJs Hamed Bahram 2024-10-15 | Vercel Blob is a scalable and cost-effective object storage service for static assets such as images, videos, audio files, and more. In this video, we'll add image upload functionality to our notion-style text editor.👉🏼 The ultimate NextJs course→ hamedbahram.io/courses/nextjs👉🏼 Project source code → github.com/HamedBahram/next-novel👉🏼 Novel: rich text editor in NextJs→ youtu.be/hP0TcRcr95Q👉🏼 Vercel blob storage → vercel.com/docs/storage/vercel-blob
Visual website builder for NextJs, shadcn/ui, and Tailwind Hamed Bahram 2024-10-08 | In this video, we will build an ecommerce site using Reweb, a visual builder for NextJs, Tailwind, and shadcn/ui.👉🏼 Reweb → https://www.reweb.so👉🏼 Promotion code for 20% discount→ hamedbahram.io/partners/reweb👉🏼 Courses→ hamedbahram.io/courses
Medium Clone with NextJs, Convex, and Clerk Hamed Bahram 2024-10-01 | In this video, we'll build a Medium clone using NextJs, Convex, and Clerk. We'll use the Convex real-time database to get immediate updates and file storage to store our images conveniently. We'll integrate Clerk with Convex to access the auth context in our Convex functions. We'll also use a webhook to store user data in our Convex database.👉🏼 Project source code → hamedbahram.io/notes/medium-clone👉🏼 NextJs Clerk starter template → github.com/HamedBahram/next-clerk👉🏼 Live demo→ https://medium-clone-eight-ebon.vercel.app👉🏼 Convex→ https://convex.dev/c/hamed👉🏼 Clerk auth→ clerk.com👉🏼 My courses → hamedbahram.io/courses👉🏼 Work with me→ hamedbahram.io/contactChapters:00:00:00 Intro00:05:00 Setting up Clerk00:15:30 Setting up Convex00:28:10 Adding Clerk auth to Convex00:35:25 Storing user data in Convex00:43:30 Defining users schema and functions00:59:00 Creating an HTTP endpoint01:06:00 Defining posts schema and the create post form01:30:00 Uploading a file to Convex storage01:37:50 Defining posts query functions01:49:50 Creating dynamic slug page01:53:50 Using convex in server components01:59:34 Building the home page02:11:00 Recap
Build a realtime messaging app in 60 min | NextJS, Clerk & Stream Hamed Bahram 2024-09-24 | We will build a realtime messaging app like WhatsApp using NextJs, shadcn/ui, Clerk for authentication, and Stream for messaging APIs and SDKs to build in-app chat.👉🏼 Project source code→ hamedbahram.io/notes/realtime-chat-app👉🏼 React chat tutorial→ https://dub.sh/Gc6ARrh👉🏼 React video calling tutorial→ https://dub.sh/KRzluBg👉🏼 NextJs Clerk shadcn/ui template→ github.com/HamedBahram/next-clerk👉🏼 Clerk authentication→ go.clerk.com/1zHTbA5👉🏼 My courses → hamedbahram.io/coursesChapters00:00:00 Intro00:02:18 Project setup00:05:00 Clerk setup 00:11:10 Stream setup00:23:30 Generating JWT tokens00:30:00 Custom chat layout00:33:30 Initial chat components00:48:15 Add dark theme00:50:15 Customizing UI component01:04:00 Creating new channels01:28:30 Add sidebar nav01:31:40 Recap
User onboarding with NextJs, Neon, Clerk, and Upstash Hamed Bahram 2024-09-19 | Learn how to build a community platform with a focus on user onboarding using NextJs, Prisma, Neon, Clerk, and Upstash workflows.👉🏼 The ultimate NextJs course→ hamedbahram.io/courses👉🏼 Project source code→ hamedbahram.io/notes/customer-onboarding👉🏼 Clerk auth→ go.clerk.com/D8l9fJ3👉🏼 Neon database → https://fyi.neon.tech/3hb👉🏼 Upstash workflows→ upstash.comChapters:00:00:00 Intro00:01:20 Project setup00:04:25 Adding Prisma & Neon00:28:30 Fetching data00:37:20 Dynamic slug page00:41:40 Adding Clerk authentication00:56:30 Clerk webhooks01:08:00 Add onboarding flow01:37:50 Adding Upstash workflow02:02:28 Recap
8 ways to handle state in React ft Cory House Hamed Bahram 2024-09-10 | In this video, we'll explore the React state, all the different ways you can manage it, and when to consider each—featuring Cory House.👉🏼 Cory's courses→ pluralsight.com/author/cory-house👉🏼 Cory's consulting→ reactjsconsulting.com👉🏼 Cory's Twitter→ https://x.com/housecor👉🏼 The Ultimate NextJs Course→ hamedbahram.io/courses👉🏼 Let's connect → hamedbahram.io/contact
useActionState in React 19 ft Sam Selikoff Hamed Bahram 2024-08-20 | In this video, we'll talk about actions, transitions, and the new useActionState hook in React 19 with Sam Selikoff from BuildUI. 👉🏼 Build UI→ buildui.com👉🏼 Advanced React component patterns course→ Advanced React Component Patterns👉🏼 Sam's Youtube channel→ youtube.com/samselikoff👉🏼 Frontend first podcast → buildui.com/frontend-first👉🏼 The ultimate NextJs course→ hamedbahram.io/courses/nextjs👉🏼 Let's talk→ hamedbahram.io/contact
Build a Video Course Platform Using Mux, Clerk, Neon, Prisma, and NextJs Hamed Bahram 2024-08-08 | In this video, we will create a video course platform using Mux for video upload and streaming, Clerk for authentication, Neon as our serverless Postgres database, and Prisma as our type-safe ORM. We will be using Next.js and then deploying it to Vercel.👉🏼 The Ultimate NextJs Course→ hamedbahram.io/courses/nextjs👉🏼 Project source code→ hamedbahram.io/notes/video-course-platform👉🏼 Live demo→ https://www.learnn.dev👉🏼 Mux platform→ mux.com👉🏼 Clerk authentication→ go.clerk.com/Ch93q6G👉🏼 Neon database→ https://fyi.neon.tech/hamed👉🏼 Work with me→ hamedbahram.io/contactChapters0:00 Intro10:40 Tech stack12:23 Project structure13:17 Adding Clerk19:30 Adding Prisma & Neon Db28:20 Teacher dashboard37:16 Adding a course47:47 Adding lessons & Mux integration1:22:20 All courses page1:24:30 Course landing page & Stripe checkout integration 1:43:32 Recap & next steps
Handle Form Submissions with Basin Hamed Bahram 2024-07-30 | In this video, we'll examine how to handle form submissions using Basin, server actions, react-hook-form, and Zod.👉🏼 The Ultimate NextJs Course → hamedbahram.io/courses/nextjs👉🏼 Project source code→ github.com/HamedBahram/next-basin👉🏼 Basin website→ usebasin.com👉🏼 Work with me→ hamedbahram.io/contactChapters0:00 Intro3:00 Project setup5:30 Server action11:36 Recap
Notion-style Rich Text Editor in NextJs Hamed Bahram 2024-07-27 | In this video, we'll look at Novel, a Notion-style WYSIWYG editor with AI-powered autocompletion, Prisma, and Neon to build a blogging application.👉🏼 The Ultimate NextJs Course (75% Off)→ hamedbahram.io/courses/nextjs👉🏼 Project source code→ github.com/HamedBahram/next-novel👉🏼 Novel website→ https://novel.sh👉🏼 Work with me→ hamedbahram.io/contactChapters0:00 Intro1:40 Project setup3:20 Novel editor7:50 Adding server action10:00 Using prisma13:00 Dynamic routes14:30 Tailwind typography15:48 Recap
Freehand Drawing Canvas for React Hamed Bahram 2024-07-23 | In this video, we'll look at React sketch canvas, a freehand vector drawing component for React using SVG as canvas 🖌👉🏼 The Ultimate NextJs Course → hamedbahram.io/courses👉🏼 Project source code→ github.com/HamedBahram/canvas👉🏼 Next shadcn template→ github.com/HamedBahram/next-shadcn👉🏼 Work with me→ hamedbahram.io/contact
React Charts in Shadcn/ui Hamed Bahram 2024-07-20 | In this video, we'll look at charts in shadcn/ui built on top of the amazing Recharts library.👉🏼 The Ultimate NextJs Course (75% off)→ hamedbahram.io/courses/nextjs👉🏼 shadcn/ui charts → ui.shadcn.com/charts👉🏼 Work with me→ hamedbahram.io/contactChapters0:00 Intro3:00 Adding charts9:40 Adding grid10:30 Adding axis11:15 Adding tooltip12:20 Adding legend13:00 Chart config14:00 Theming18:10 Accessibility18:30 Example codes19:25 Recap
Pragmatic educational content ft Alex Sidorenko Hamed Bahram 2024-07-16 | Join me in a friendly conversation with Alex Sidorenko about creating educational NextJs content in different forms and platforms. 👉🏼 The Ultimate NextJs Course (75% off)→ hamedbahram.io/courses👉🏼 Alex Sidorenko→ https://x.com/asidorenko_
We did it folks! Hamed Bahram 2024-07-13 | Reflecting back on our journey, 121 videos and over two years later, we've passed 100K subscribers. 👉🏼 The Ultimate NextJs Course (75% off)→ hamedbahram.io/courses
Rate Limiting in NextJs with Middleware, Vercel KV Storage & Upstash Hamed Bahram 2024-07-06 | In this video, we'll look at rate limiting your NextJs application using edge middleware functions, Vercel KV (Kay value storage), and the Upstash rate limiting package.👉🏼 The Ultimate NextJs Course (75% Off)→ hamedbahram.io/courses/nextjs👉🏼 Project source code → github.com/HamedBahram/next-rate-limiting👉🏼 Vercel KV Quickstart → vercel.com/docs/storage/vercel-kv/quickstart👉🏼 Upstash Rate Limit package→ github.com/upstash/ratelimit-js👉🏼 Work with me → hamedbahram.io/hire
Caching in NextJs ft Delba Oliveira from Vercel Hamed Bahram 2024-07-02 | In this video, we'll discuss caching in NextJs with Delba Oliveira, developer advocate at Vercel, and the beautiful mind behind NextJs documentation.👉🏼 The Ultimate NextJs Course→ hamedbahram.io/courses/nextjs👉🏼 NextJs caching documentation→ nextjs.org/docs/app/building-your-application/caching👉🏼 Work with me → hamedbahram.io/hire
Neon: Serverless Postgres Database Hamed Bahram 2024-06-29 | In this video, we'll build an expense tracker using Prisma, NextJs 15 RC, and Neon, a serverless Postgres database in the cloud that scales up and down automatically based on your application's workload. 👉🏼 Neon database→ https://fyi.neon.tech/hamed👉🏼 The Ultimate NextJs Course (75% discount)→ hamedbahram.io/courses/nextjs👉🏼 Project source code→ github.com/HamedBahram/next-neon👉🏼 Work with me→ hamedbahram.io/hireChapters0:00 Intro0:30 Neon features4:30 Setting up NextJs 156:00 Adding Prisma18:00 Querying our data20:00 Adding server action25:40 Neon branches27:20 Recap
How to build custom UIs on top of Clerks APIs Hamed Bahram 2024-06-25 | Introducing Clerk Elements, a new set of unstyled components that make it easy to build custom UIs on top of Clerk's API without having to manage the underlying logic.👉🏼 Clerk elements documentation→ go.clerk.com/elements-docs👉🏼 Clerk website→ go.clerk.com/hamed-bahram👉🏼 New Clerk course→ hamedbahram.io/courses👉🏼 NextJs Clerk template→ github.com/HamedBahram/next-clerk👉🏼 Project source code→ github.com/HamedBahram/clerk-elements👉🏼 Work with me→ hamedbahram.io/hireChapters0:00 Intro1:30 Project setup4:00 Adding Clerk elements14:00 Adding verification step24:00 Recap
React Resizable Panels Hamed Bahram 2024-06-22 | In this video, we're going to use React resizable panels to build resizable components in NextJs. 👉🏼 New courses→ hamedbahram.io/courses👉🏼 Project source code→ github.com/HamedBahram/react-resizable👉🏼 React resizable panels→ https://react-resizable-panels.vercel.app👉🏼 Work with me→ hamedbahram.io/hireChapters0:00 Intro1:00 Project setup1:46 Adding React resizable7:30 Shadcn abstraction8:44 Recap
In conversation with Colby Fayock from Cloudinary Hamed Bahram 2024-06-18 | Join me in a conversation with Colby Fayock from Cloudinary, where we will dive into his journey as a web developer, content creator, and now developer advocate at Cloudinary.👉🏼 Colby's channel→ youtube.com/@UC7Wpv0Aft4NPNhHWW_JC4GQ 👉🏼 New courses → hamedbahram.io/courses👉🏼 Let’s talk about your project→ hamedbahram.io/contact
Serverless Postgres ft Mahmoud from Neon Hamed Bahram 2024-06-15 | Join me for a deep dive into Neon, a serverless Postgres database, and Prisma, a type-safe ORM, with Mahmoud, Developer advocate at @neondatabase.👉🏼 New courses→ hamedbahram.io/courses👉🏼 Neon's website→ https://neon.tech👉🏼 Let’s talk about your project→ hamedbahram.io/contact
Schema validation using Valibot Hamed Bahram 2024-06-11 | This video will teach us about Valibot, a type-safe schema validation tool.👉🏼 New courses→ hamedbahram.io/courses👉🏼 Project source code→ github.com/HamedBahram/next-valibot👉🏼 Next shadcn template→ github.com/HamedBahram/next-shadcn👉🏼 Valibot website→ https://valibot.devChapters0:00 Intro1:00 Installation7:30 Implementation16:10 Client side validation17:50 Recap
The Easiest Way to Add Charts in NextJs Hamed Bahram 2024-06-08 | This video will look at adding charts in NextJs using Tremor.👉🏼 My NextJs Course→ hamedbahram.io/courses👉🏼 Project source code→ github.com/HamedBahram/next-tremor👉🏼 Tremor site→ https://www.tremor.so👉🏼 Work with me → hamedbahram.io/hire
Blurred placeholder for dynamic images in NextJs Hamed Bahram 2024-06-04 | In this video, we’ll look at generating `blurDataURL` to use as a placeholder when lazy loading dynamic images in NextJs using the plaiceholder package.👉🏼 The ultimate NextJs course→ hamedbahram.io/courses👉🏼 Project source code→ github.com/HamedBahram/next-image-component👉🏼 Work with me→ hamedbahram.io/hire
The New React Compiler Hamed Bahram 2024-06-01 | In this video, we'll look at the new open-sourced React compiler released in React 19 RC. We'll learn what it does and how to use it in NextJs 15 RC.👉🏼 New courses→ hamedbahram.io/courses👉🏼 Source code→ github.com/HamedBahram/next-15rc👉🏼 React compiler docs→ https://react.dev/learn/react-compiler👉🏼 React conf 2024 recap→ https://react.dev/blog/2024/05/22/react-conf-2024-recap👉🏼 Let’s talk about your project→ hamedbahram.io/contactChapters0:00 Intro0:30 What is React compiler?3:35 What does it do?7:30 Preflight check8:23 Getting started10:40 Code example18:00 Troubleshooting19:40 Caveats21:10 Recap
React Conf 2024 Recap | React 19 RC Release Hamed Bahram 2024-05-28 | Reflecting on React conf 2024, this video will review the React 19 RC release and the new features coming to stability.👉🏼 New courses→ hamedbahram.io/courses👉🏼 React conf 2024→ https://react.dev/blog/2024/05/22/react-conf-2024-recap👉🏼 React 19 RC→ https://react.dev/blog/2024/04/25/react-19👉🏼 Work with me→ hamedbahram.io/hireChapters0:00 Intro4:50 Actions & transitions12:05 The use API14:26 Server components15:10 Server actions16:40 ref as a prop17:20 Context provider17:50 More updates18:20 Recap
Whats New in NextJs 15 Hamed Bahram 2024-05-25 | In this video, we'll review the latest features in NextJs 15 Release Candidate (RC) before the upcoming stable release.👉🏼 The ultimate NextJs course→ hamedbahram.io/courses👉🏼 React Conf 2024→ youtube.com/live/T8TZQ6k4SLE?t=1788👉🏼 Vercel ship 2024→ vercel.com/ship👉🏼 Let’s talk about your project→ hamedbahram.io/contactChapters0:00 Intro2:00 React compiler3:30 Hydration error improvement4:40 Default caching behaviour11:00 Partial prerendering13:35 The after function15:20 create-next-app updates17:10 Bundling external packages17:50 Live code example22:18 NextJs 15 upgrade guide24:30 Recap
Animating Background Gradients using Framer Motion Hamed Bahram 2024-05-21 | In this video, we'll use framer motion to animate our background gradient colors.👉🏼 New courses→ hamedbahram.io/courses👉🏼 Project source code→ github.com/HamedBahram/bg-gradient-animation👉🏼 Work with me→ hamedbahram.io/contact
Sync Clerk Data to Your Database Using Webhooks Hamed Bahram 2024-05-18 | In this video, we'll examine how to sync user data from Clerk to our database using webhooks. We will use Prisma as our ORM to connect to Mongodb for end-to-end type safety.👉🏼 Clerk Authentication→ go.clerk.com/9AXfPV7👉🏼 Learn Clerk→ hamedbahram.io/courses👉🏼 Clerk setup guide→ youtu.be/aI-tDJxWI6A👉🏼 Next–Clerk template→ github.com/HamedBahram/next-clerk👉🏼 Project source code→ github.com/HamedBahram/clerk-webhooks👉🏼 Work with me→ hamedbahram.io/contactChapters0:00 Intro1:30 Project setup3:45 Clerk webhooks7:40 Using ngrok9:30 Create an endpoint in Clerk13:50 Add a route handler in NextJs17:00 Setting up Prisma21:00 Testing our webhook24:38 Recap
Project Structure and File Conventions in NextJs 14 Hamed Bahram 2024-05-14 | In this video, we'll review the project structure and file conventions in the App router in NextJs 14.👉🏼 New courses→ hamedbahram.io/courses👉🏼 Project source code (Github)→ github.com/HamedBahram/next-file-conventions👉🏼 Work with me → hamedbahram.io/hireChapters0:00 intro1:20 Top level folders1:40 Top level files2:50 Layout4:30 Page5:50 Loading UI7:45 Not found10:50 Error boundary13:20 Component hierarchy14:30 Global Error boundary15:50 Route handlers17:00 Template19:15 Default UI20:30 Nested routes30:00 Dynamic routes21:52 Route groups23:15 Private folders24:10 Metadata24:35 Recap
