- Видео 23
- Просмотров 3 775
Baqir Nekfar
Канада
Добавлен 6 авг 2024
Welcome to my channel! I'm Baqir Nekfar, a developer sharing my journey in coding and building a software business. Here, you'll find coding tips, tutorials, and updates on my side projects as I grow in my career. Subscribe to follow along and learn with me!
Full Frontend implementation ( AI chatbot part 3 with Nextjs, gemini & firebase)
In Part 3 of the “Build a Smart AI Chatbot” series, we’re diving into the full frontend implementation of our app, all within one hour! In this session, I’ll guide you through building a complete login page, setting up a user-friendly dashboard UI, and designing a sidebar along with the main chat UI for seamless interactions. Join me as we bring the visual elements of our AI chatbot to life!
Chapters:
00:00 - Breaking Down Complex UI as a frontend developer
03:00 - Designing the Login UI
14:41 - Introduction to the Main Dashboard
18:22 - Building the Left Sidebar
40:28 - Creating the Chat UI (right side)
#AIChatbot #FrontendDevelopment #Nextjs #TailwindCSS #TypeScript #UIImplementation #LoginPag...
Chapters:
00:00 - Breaking Down Complex UI as a frontend developer
03:00 - Designing the Login UI
14:41 - Introduction to the Main Dashboard
18:22 - Building the Left Sidebar
40:28 - Creating the Chat UI (right side)
#AIChatbot #FrontendDevelopment #Nextjs #TailwindCSS #TypeScript #UIImplementation #LoginPag...
Просмотров: 81
Видео
Project ideation, design and setup (AI Chat bot part 2)
Просмотров 9128 дней назад
In Part 2 of the “Build a Smart AI Chatbot” full course, I explore how to leverage AI to finalize your project idea and receive advice on selecting the right technical tools. You’ll learn how to use AI for making informed decisions, design a Figma file with reusable Next.js UI components, and finally, set up a Next.js project with Next.js UI installed and ready to go. This video is packed with ...
Build a Smart AI chatbot - Part 1
Просмотров 6128 дней назад
In this full course series, I guide you through the process of building a smart AI chatbot from scratch! In Part 1, we set the foundation using Next.js, TailwindCSS, and TypeScript to structure the project. You’ll also learn how to implement the UI with Next.js UI components and set up Firebase for data storage, along with using Gemini to integrate AI capabilities. Perfect for developers eager ...
Master Next.js: Create Stunning Typing Effects & Complex Layouts with Inner Scrollbars!
Просмотров 183Месяц назад
In this video, I'll guide you through creating a stunning text typing effect using Next.js. We'll also explore techniques for building complex layouts with inner scrollbars, perfect for enhancing your web applications. Whether you're a beginner or looking to improve your skills, this tutorial has something for everyone. Join me as we dive into the world of Next.js and create something amazing t...
You Won't Believe How EASY Building NEXTJS PWA Apps Can Be!
Просмотров 2 тыс.2 месяца назад
In this video, I’ll show you just how easy it is to turn your Next.js app into a Progressive Web App (PWA)! I’ll guide you through the step-by-step process of making your app PWA-ready, and also dive into the pros and cons of using PWAs. Whether you’re new to PWAs or looking to enhance your Next.js project, this video has you covered. Watch now to make your apps faster, more reliable, and ready...
How to Stand Out as a Frontend Developer in 2024: Must-Learn Technologies!
Просмотров 862 месяца назад
Want to be in the top 1% of frontend developers in 2024? In this video, I’m introducing the key technologies you need to master to elevate your skills and stand out from the crowd. Watch the full video to discover what you need to learn and how to stay ahead in the ever-evolving world of frontend development. #FrontendDevelopment #WebDevelopment #JavaScript #ReactJS #TypeScript #CSSinJS #WebPer...
A UI library every Frontend Developer (React) should Know about!
Просмотров 452 месяца назад
In today's video, I dive into Magic UI, a powerful library built in the same spirit as ShadCn UI but with a magical twist-extra animations that bring your projects to life! Whether you're working on your next landing page or just exploring new tools, Magic UI is a must-know for every developer. Tune in to learn how to integrate it into your workflow and make your designs pop! Website link: magi...
Designing a functional contact form with JavaScript & Email.js (Beginner guide)
Просмотров 873 месяца назад
Designing a functional contact form with JavaScript & Email.js (Beginner guide)
When someone fill this form in your portfolio, it is you who should receive the message on his behalf. Why is this a reply to the user
Most of the websites handle both Sending email to user to thank them Also one to yourself for informing It’s optional you can only choose to send to yourself but it’s good to send to user as well so that they feel engaged and be informed 🚀
That was totally worth watching. Thanks for the easy explanation and cool project. Please upload more videos like this one.
Great explanation, thanks for the video
It was very useful, whan will you post your next videu?
stay tuned for it, soon!
Looking forward...
wow great❤❤❤
🎉 good explanation
Thanks for this incredible explanation. I wait for your next video.
informative
Amazing 👏 ❤
I’ve followed your tutorial but i get a public folder everytime i make new project
Help me please
That could happen because of service worker is activated and that creates that folder you put it’s file You can disable the service workers by going to developer tools, applications tab and click on service worker and disable it
Hey, whats your twitter or email? i have a few questions about pwa
👏 interesting
thanks so much, but i dont have the install icon on chrome?
@@Tanner-cz4bd my be the issue is with the placement of json file
@@Tanner-cz4bd or send me your project GitHub link I will take look in it
I love PWA!
ruclips.net/video/gDwxL7_hUF0/видео.htmlsi=HyV6Uk2FTf8-liV3. 👈 full video plus code
great video! I found it useful!
Great video 🔥🔥 Thank you a lot 🙏🙏
Great 👍👍 informative
💬 What do you think are the most important technologies to master in 2024 as a frontend developer? Let me know in the comments below! Also, if you found this video helpful, don’t forget to like, share, and subscribe. Let’s grow together and become the top 1% in frontend development! 🚀
I think React is really cool, and I am planning on mastering it soon 😍
I love it too
It sounds cool
Loved them all
I found this tutorial understandable and beginner friendly, looking for more tutorial like this.
Astonishing
Informative
🔥🔥🔥🔥❤❤
Supper broooo
A lot 😅
❤❤
Great channels
Great bro ❤
Thanks for free sharing 😊
Great🔥
😂😂 wow such an alien
Wow❤
The best ghost solver
This is absolutely useful😊
Thank you for the vidéo 🙏🔥
Awesome😂
Interesting
>=12
Informative
Great resources
Interesting 😅
This is cool
Helpful. Thanks 😊
Insightful. Thank you for sharing
Literally all day 😁