Ido Evergreen
Ido Evergreen
  • 34
  • 21 789
Build an AI Voice Acting Studio with ElevenLabs API and Nextjs Route Handlers
In this video, I’ll take you through integrating the @elevenlabsio API with Next.js Route Handlers to build an AI-powered studio. You’ll learn how to create dynamic, realistic voices, select characters, and generate dialogues-all by consuming three key APIs from ElevenLabs:
Text-to-Speech: Convert text into lifelike speech.
Voices API: Retrieve all available voice options.
Voice Generation: Create unique voices for your characters.
I’ll guide you step-by-step through setting up the API routes in Next.js (whether you’re using Next.js 14, 15, or 16), explaining how each piece fits together. The goal is to focus on the technical aspects of API integration, so we’ll skip the UI setup and jump straight into building the functionality that powers the app. By the end of the video, you’ll have a solid understanding of how to work with ElevenLabs API in your Next.js projects and create dynamic, voice-driven experiences.
#AI #nextjs #elevenlabs
Переглядів: 129

Відео

Build Your First RAG Application with Langflow
Переглядів 94221 день тому
Docs: Langflow : www.langflow.org/ Motion : motion.dev/ In this video, I’ll show you how to create your first RAG (Retrieval-Augmented Generation) application using Langflow from @DataStaxDevs I’ll walk you through setting up Langflow, configuring LLMs, and interacting with a model to get real-time updates about Motion.dev (formerly Framer Motion), the modern animation library for JavaScript an...
PostCSS, Logux & The Future of CSS - Andrey Sitnik
Переглядів 1933 місяці тому
Join me as i chat with Andrey Sitnik, creator of PostCSS, in this season finale episode. We dove deep into the evolution of postCSS, what it means for the tool as it enters maintenance mode and the future of CSS. Plus, we got to chat about Andrey’s exciting work on the Logux project-a flexible JS framework to make a local-first sync engine. see you in season 2 Listen on the go : Spotify open.sp...
Next.js Type-Safe URL State Management Using nuqs - François Best
Переглядів 4484 місяці тому
I had an amazing conversation with François Best, the creator of nuqs, where we explored the ins and outs of this powerful library for type-safe URL state management in Next.js. We reviewed the documentation, discussing the core features and what to expect in future releases. Also listen on the go : open.spotify.com/show/0sWnW9Y5pGUCKjcaY3QA8p docs: nuqs.47ng.com/ X: x.com/nuqs47ng Don’t forget...
Getting started with astro - Ben Holmes
Переглядів 1345 місяців тому
I had a great conversation about Astro with @bholmesdev ​⁠​⁠​⁠ ​⁠who is the core maintainer at astro . Astro is a web framework for content-driven websites. Astro docs : astro.build/ Definitely check it out guys 🔥🔥🔥🔥
Getting started with frontend architecture - Maxi Ferreira
Переглядів 1,2 тис.5 місяців тому
I had an awesome conversation about frontend architecture with ​⁠​⁠@charca22 Maxi from Frontend at Scale. Listen to audio on spotify : open.spotify.com/episode/3PRugck6I4rLbTNchdWuHm?si=bbapZ5nfTZe2rzcpIq1qxg Check out Frontend at Scale frontendatscale.com/ and also follow Maxi on Twitter x.com/charca Also, check out maxi course : frontendatscale.com/workshop/ C4 model : c4model.com/ Timestamps...
ReactJS discussion - Gitcoder
Переглядів 2195 місяців тому
On this first episode we sit down with ​⁠@thegitcoder to explore the world of ReactJS! Yassin shares valuable insights into the latest React features, best practices for building efficient applications, and more. Connect with ​⁠@thegitcoder Blog : gitcoder.me UA-cam: youtube.com/@thegitcoder?si=zIgLHMGTU3LlVyRZ Follow me on Twitter: IdoEvergreen Follow me on Instagram: instagram.com...
Build Palette SVG Animations || Next.js || Framer Motion || Tailwind CSS
Переглядів 1397 місяців тому
In this video let's recreate the svg animation from the coolors site with framer motion, nextjs and tailwind css. #reactjs #tailwindcss #framermotion #css Link to full stack coolors clone : ua-cam.com/video/QhrEc3i4VM0/v-deo.htmlsi=8rZWmGdDZjEdoqAa Get svg used in video : drive.google.com/drive/u/0/mobile/folders/1BEQro5bxKTuxJUeHu4WDl7QE4-yyql7Z?usp=drive_link
Nextjs 14 and Framer Motion - The basics
Переглядів 4867 місяців тому
This is a collection of all my framer motion videos together , learn how use framer motion in your react application to handle animation . 🐦 Follow me on Twitter: IdoEvergreen 🖼️ Follow me on Instagram: evergreenx.dev
Build a Video Meeting App with Nextjs 14 and ZEGOCLOUD
Переглядів 6658 місяців тому
Build a video meeting application using Nextjs 14. Tailwind css, Typescript, and ZEGOCLOUD Get 10000 free mins with ZEGOCLOUD UIKits: bit.ly/3WivXY2 Take Advantage of ZEGOCLOUD: bit.ly/3WkEUQK 100% customized video call SDK: bit.ly/44iMPQu How to build a video call App: bit.ly/3UDZ5Ys ZEGOCLOUD video call SDK &API allows you to easily build your live video chat apps within minutes. Github: gith...
Build colors palette generator app with Nextjs 14, tailwindcss || No talking
Переглядів 6418 місяців тому
Build a colors palette generator web app like coolors with authentication, nice color palettes generator, exporting palettes as PNG, PDF, SVG, saving palettes and more using Next JS 14, Clerk, Supabase, Typescript, Tailwind CSS, Shadcn, React Hook Form, Zod, Colord and framer motion #framermotion #nextjs #typescript #reactjs 📚 Materials/References: Link: coollors.idoevergreen.me/ GitHub Reposit...
Build and deploy a Full Stack coolors clone with Nextjs 14, Supabase, Clerk, and Typescript
Переглядів 5 тис.8 місяців тому
Build a colors palette generator web app like coolors with authentication, nice color palettes generator, exporting palettes as PNG, PDF, SVG, saving palettes and more using Next JS 14, Clerk, Supabase, Typescript, Tailwind CSS, Shadcn, React Hook Form, Zod, Colord and framer motion #framermotion #nextjs #typescript #reactjs 📚 Materials/References: Link: coollors.idoevergreen.me/ GitHub Reposit...
Build and deploy a Full Stack coolors clone (Nextjs 14, Supabase, Clerk, and Typescript) (part 3)
Переглядів 3618 місяців тому
Build and deploy a Full Stack coolors clone (Nextjs 14, Supabase, Clerk, and Typescript) (part 3)
Build and deploy a Full Stack coolors clone (Nextjs 14, Supabase, Clerk, and Typescript) (part 2)
Переглядів 1698 місяців тому
Build and deploy a Full Stack coolors clone (Nextjs 14, Supabase, Clerk, and Typescript) (part 2)
Build and deploy a Full Stack coolors clone (Nextjs 14, Supabase, Clerk, and Typescript) (Part 1)
Переглядів 7728 місяців тому
Build and deploy a Full Stack coolors clone (Nextjs 14, Supabase, Clerk, and Typescript) (Part 1)
Build and deploy a Full Stack coolors clone (Nextjs 14, Supabase, Clerk, and Typescript) (Intro)
Переглядів 4498 місяців тому
Build and deploy a Full Stack coolors clone (Nextjs 14, Supabase, Clerk, and Typescript) (Intro)
Build an awwwards navigation with Nextjs and Framer Motion
Переглядів 3619 місяців тому
Build an awwwards navigation with Nextjs and Framer Motion
Text Animation with Framer motion
Переглядів 1,1 тис.9 місяців тому
Text Animation with Framer motion
React GSAP : Deep Dive - Installation
Переглядів 3449 місяців тому
React GSAP : Deep Dive - Installation
React GSAP : Deep Dive - Introduction
Переглядів 7569 місяців тому
React GSAP : Deep Dive - Introduction
Awwwards Page Transition with Framer Motion and Nextjs
Переглядів 2,2 тис.9 місяців тому
Awwwards Page Transition with Framer Motion and Nextjs
6 | Framer Motion React Tutorial: Deep dive - Transition property
Переглядів 6610 місяців тому
6 | Framer Motion React Tutorial: Deep dive - Transition property
5 | Framer Motion React Tutorial: Deep Dive - Animate property
Переглядів 7210 місяців тому
5 | Framer Motion React Tutorial: Deep Dive - Animate property
4 | Framer Motion React Tutorial: : Deep dive - Initial property
Переглядів 6210 місяців тому
4 | Framer Motion React Tutorial: : Deep dive - Initial property
How to use Active link in Next.js 14
Переглядів 19110 місяців тому
How to use Active link in Next.js 14
3 | Framer Motion React Tutorial: : Deep dive - Motion components
Переглядів 11310 місяців тому
3 | Framer Motion React Tutorial: : Deep dive - Motion components
2 | Framer Motion React Tutorial: Deep Dive - Installation and setup
Переглядів 10710 місяців тому
2 | Framer Motion React Tutorial: Deep Dive - Installation and setup
1 | Framer Motion React Tutorial: Deep Dive - Introduction
Переглядів 1,4 тис.11 місяців тому
1 | Framer Motion React Tutorial: Deep Dive - Introduction
Slider Animation with Reactjs, Framer Motion Tutorial
Переглядів 26111 місяців тому
Slider Animation with Reactjs, Framer Motion Tutorial
Page Transitions in React - Framer Motion and Next.js Tutorial
Переглядів 73911 місяців тому
Page Transitions in React - Framer Motion and Next.js Tutorial

КОМЕНТАРІ

  • @ovodo
    @ovodo 5 днів тому

    I like the text animation you used to open the video. Please how did you do that?

    • @idoevergreenx
      @idoevergreenx 4 дні тому

      Thanks . It a regular text animation on premiere pro

  • @pradip_suvram283
    @pradip_suvram283 5 днів тому

    When I am trying to run the basic app it's showing an error with a basic chat input and the model and chat output: langflow error error building component openai argument of type nonetype is not iterable What's the issue?

    • @idoevergreenx
      @idoevergreenx 5 днів тому

      @@pradip_suvram283 okay, if possible send me an email let debug the error together.

    • @pradip_suvram283
      @pradip_suvram283 5 днів тому

      @@idoevergreenx Sure sir.

    • @pradip_suvram283
      @pradip_suvram283 5 днів тому

      @@idoevergreenx What's email id sir?

    • @idoevergreenx
      @idoevergreenx 5 днів тому

      @ you could get that from my profile about. Check my channel

    • @pradip_suvram283
      @pradip_suvram283 5 днів тому

      @@idoevergreenx Tried seeing your email address sir. But it's not allowing me to see.

  • @chideraakamadu
    @chideraakamadu 11 днів тому

    What can it be used for

  • @princee9385
    @princee9385 17 днів тому

    Great job mate.

  • @verholomchuk
    @verholomchuk 2 місяці тому

    Thanks for review my website!

  • @Rechin1
    @Rechin1 2 місяці тому

    Thank you

  • @thegitcoder
    @thegitcoder 3 місяці тому

    Great 🙌🏻

  • @lollyinnovation1948
    @lollyinnovation1948 3 місяці тому

    Nice and informative Thanks

    • @idoevergreenx
      @idoevergreenx 3 місяці тому

      Glad you found the conversation informative

  • @elbertwilliam1683
    @elbertwilliam1683 3 місяці тому

    What if we want to use active link on scroll instead of going to another link, can we do the same method like in the video above?

  • @AvikNayak_
    @AvikNayak_ 3 місяці тому

    why did you use clerk when supabase itself offers authentication?

    • @santiagopereira4691
      @santiagopereira4691 3 місяці тому

      I have the same question? Is it more difficult to implement supabase authentication?

    • @AvikNayak_
      @AvikNayak_ 3 місяці тому

      @@santiagopereira4691 not at all. It's comparatively easier than next-auth.

    • @idoevergreenx
      @idoevergreenx Місяць тому

      Sorry Missed this comment . The reason I used clerk for auth is for simplicity purposes . Yes using supabase supports auth too but compare to the how fast you could just add clerk auth components is a faster implementation.

  • @franky47
    @franky47 4 місяці тому

    Thanks Ido for this great discussion! 🙌

  • @odiagaraymond4338
    @odiagaraymond4338 5 місяців тому

    Great stuff!

  • @codesplit7175
    @codesplit7175 5 місяців тому

    Very insightful 🔥

  • @thegitcoder
    @thegitcoder 5 місяців тому

    Great Discussion Guys

  • @chidiebere
    @chidiebere 5 місяців тому

    Nice. Weldone

  • @charca22
    @charca22 5 місяців тому

    Thanks for having me on the show, @idoevergreenx 🙌🏽

  • @thegitcoder
    @thegitcoder 5 місяців тому

    🙌🏻

  • @chideraakamadu
    @chideraakamadu 5 місяців тому

    If react.js is Js library is there need to go deep into Js before knowing react.js?

    • @idoevergreenx
      @idoevergreenx 5 місяців тому

      Thank you for your question . Yes definitely you should have solid foundations before picking a library like reactjs

    • @chideraakamadu
      @chideraakamadu 5 місяців тому

      Gitcoder made mention of a beginner starting with redux before react Js but I do not get why

    • @thegitcoder
      @thegitcoder 5 місяців тому

      Hey @@chideraakamadu , Redux is state management library, When you learn ReactJS then start learning Redux.

    • @chideraakamadu
      @chideraakamadu 5 місяців тому

      @@thegitcoder oh, Thank you very much

  • @thegitcoder
    @thegitcoder 5 місяців тому

    Thanks for inviting 🙌🏻

    • @idoevergreenx
      @idoevergreenx 5 місяців тому

      Thanks for the amazing insights you shared . 🔥🔥🔥🔥🔥

  • @ThinhTran-rq6so
    @ThinhTran-rq6so 5 місяців тому

    can we kick the users from the meeting

  • @samurai_10x
    @samurai_10x 5 місяців тому

    thank you bro

  • @abishek1808
    @abishek1808 6 місяців тому

    Awesome 🔥🔥Can u do scroll animations in framer motion

    • @idoevergreenx
      @idoevergreenx 6 місяців тому

      Yes definitely, that can be achieved with usescroll hook for framer motion . Checks docs for help

  • @thegitcoder
    @thegitcoder 6 місяців тому

    Great Man 🎉

  • @ogs102
    @ogs102 6 місяців тому

    great vid

  • @smartdriver2990
    @smartdriver2990 7 місяців тому

    Yes ,i like it

  • @ivanfilhoz
    @ivanfilhoz 8 місяців тому

    Nice job, man! Subscribed. Keep up the great work.

  • @paradoxrecapped
    @paradoxrecapped 8 місяців тому

    Great one boss But can this same cloud be used if i want to create a chrome extension of this same thing you did ?

    • @idoevergreenx
      @idoevergreenx 8 місяців тому

      Yes, definitely for that use case you might need some permission on chrome Here is a the link to the doc : docs.zegocloud.com/article/14933

  • @devgo-jb7dg
    @devgo-jb7dg 8 місяців тому

    Thanks for the video , zegocloud looks amazing will definitely check it out

  • @IdoEvergreen
    @IdoEvergreen 8 місяців тому

    Hope u guys enjoyed this video and make sure to leave a comment and share 😊😊

  • @reactnativelabs
    @reactnativelabs 8 місяців тому

    Amazing build man 🔥🔥🔥🔥

  • @javaris300
    @javaris300 8 місяців тому

    Source Code?

    • @idoevergreenx
      @idoevergreenx 8 місяців тому

      Check video description for code on GitHub

  • @reactnativelabs
    @reactnativelabs 8 місяців тому

    ❤‍🔥❤‍🔥❤‍🔥

  • @idoevergreenx
    @idoevergreenx 8 місяців тому

    Going back to working on this framer motion playlist

  • @cariyaputta
    @cariyaputta 8 місяців тому

    Thanks.

  • @idoevergreenx
    @idoevergreenx 8 місяців тому

    Also for those looking for the desktop svg we used on the home page . Check the iconx.tsx file on the Google drive that is in the video description. Happy coding again ❤

  • @SatyanshSingh-k7m
    @SatyanshSingh-k7m 8 місяців тому

    amazing tutorial mate

  • @idoevergreenx
    @idoevergreenx 8 місяців тому

    32:47 I realized most viewers have questions about what happening here , as mentioned the piece of code was from the documentation. So supabase is our database while clerk auth is our authentication provider, so we needed a way to connect both tools to each other to save the user palette based on the user_id provided by the clerk to database. Hope this helps. If u have any doubts still do leave a comment I will attend to it

  • @idoevergreenx
    @idoevergreenx 8 місяців тому

    32:47 I realized most viewers have questions about what happening here , as mentioned the piece of code was from the documentation. So supabase is our database while clerk auth is our authentication provider, so we needed a way to connect both tools to each other to save the user palette based on the user_id provided by clerk to database. Hope this helps. If u have any doubts still do leave a comment I will attend to it

  • @Imacul77Game
    @Imacul77Game 8 місяців тому

    Nice projects bro 🎉

  • @devgo-jb7dg
    @devgo-jb7dg 8 місяців тому

    Grewt work man 💯💯💯

  • @devgo-jb7dg
    @devgo-jb7dg 8 місяців тому

    The attention to details in this project is amazing ❤

  • @Jay-pj7ob
    @Jay-pj7ob 8 місяців тому

    Underrated

  • @paradoxrecapped
    @paradoxrecapped 8 місяців тому

    I love the interface it nice and it great project thank you

  • @devgo-jb7dg
    @devgo-jb7dg 8 місяців тому

    Awesome video I learned a lot thanks😮😮😮😮

  • @devgo-jb7dg
    @devgo-jb7dg 8 місяців тому

    Great explanation! Was looking for tutolial like this for several days

  • @chideraakamadu
    @chideraakamadu 8 місяців тому

    I think on a site the users should be able to see what the sites does before they sign in, some users may just be checking it randomly and just seeing the sign in first they may not have the time but, when the users is able to see what it is about and how it works maybe when they are about to save or download then the sign in notification can recommend them to do so when it has caught their interest. I am just saying this because the project is very unique and beautiful.

    • @idoevergreenx
      @idoevergreenx 8 місяців тому

      hi, your suggestion is excellent, I just had to go with the authentication first for simplicity for beginners.

    • @idoevergreenx
      @idoevergreenx 8 місяців тому

      If u coding along with me u can try implementing yours this way. It should be very quite easy to handle that. If u hit any blocker when trying to build yours with your suggestion do tell me know. I am willing to help.

    • @chideraakamadu
      @chideraakamadu 8 місяців тому

      Okay, that will be cool for me adding mine