- 34
- 21 789
Ido Evergreen
Nigeria
Приєднався 12 сер 2016
Hi 👋
Am creating a Universe of content for software developers
Am creating a Universe of content for software developers
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
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
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
I like the text animation you used to open the video. Please how did you do that?
Thanks . It a regular text animation on premiere pro
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?
@@pradip_suvram283 okay, if possible send me an email let debug the error together.
@@idoevergreenx Sure sir.
@@idoevergreenx What's email id sir?
@ you could get that from my profile about. Check my channel
@@idoevergreenx Tried seeing your email address sir. But it's not allowing me to see.
What can it be used for
you mean elevenlabs API ?
@idoevergreenx yes
They are an AI audio platform.
@@idoevergreenx can pictures or video also added or just audio
Yes
Great job mate.
Thanks 👍
Thanks for review my website!
it is my pleasure 😌😌😌
Thank you
No problem 👍
Great 🙌🏻
🔥🔥🔥
Nice and informative Thanks
Glad you found the conversation informative
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?
yes it is possible to do that
why did you use clerk when supabase itself offers authentication?
I have the same question? Is it more difficult to implement supabase authentication?
@@santiagopereira4691 not at all. It's comparatively easier than next-auth.
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.
Thanks Ido for this great discussion! 🙌
Great stuff!
Very insightful 🔥
Great Discussion Guys
🔥🔥
Nice. Weldone
@@chidiebere 🔥🔥🔥
Thanks for having me on the show, @idoevergreenx 🙌🏽
🙌🏻
If react.js is Js library is there need to go deep into Js before knowing react.js?
Thank you for your question . Yes definitely you should have solid foundations before picking a library like reactjs
Gitcoder made mention of a beginner starting with redux before react Js but I do not get why
Hey @@chideraakamadu , Redux is state management library, When you learn ReactJS then start learning Redux.
@@thegitcoder oh, Thank you very much
Thanks for inviting 🙌🏻
Thanks for the amazing insights you shared . 🔥🔥🔥🔥🔥
can we kick the users from the meeting
Yes we can do that .
thank you bro
You're welcome!
Awesome 🔥🔥Can u do scroll animations in framer motion
Yes definitely, that can be achieved with usescroll hook for framer motion . Checks docs for help
Great Man 🎉
Thanks man 👍
great vid
Thanks
Yes ,i like it
💯💯
Nice job, man! Subscribed. Keep up the great work.
Awesome, thank you!
Great one boss But can this same cloud be used if i want to create a chrome extension of this same thing you did ?
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
Thanks for the video , zegocloud looks amazing will definitely check it out
Hope u guys enjoyed this video and make sure to leave a comment and share 😊😊
Thanks all
Amazing build man 🔥🔥🔥🔥
Appreciate it!
Source Code?
Check video description for code on GitHub
❤🔥❤🔥❤🔥
Going back to working on this framer motion playlist
Thanks.
Welcome!
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 ❤
amazing tutorial mate
Thanks a ton!
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
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
Nice projects bro 🎉
Thanks ✌
Grewt work man 💯💯💯
Big up
The attention to details in this project is amazing ❤
Yeah thanks
Underrated
I love the interface it nice and it great project thank you
U welcome 💯💯💯
Awesome video I learned a lot thanks😮😮😮😮
Glad you enjoyed it!
Great explanation! Was looking for tutolial like this for several days
Glad it was helpful!
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.
hi, your suggestion is excellent, I just had to go with the authentication first for simplicity for beginners.
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.
Okay, that will be cool for me adding mine