![CodeBucks](/img/default-banner.jpg)
- Видео 59
- Просмотров 1 726 417
CodeBucks
Индия
Добавлен 5 сен 2020
Hi there!🙌
I'm a web developer and freelancer with a passion for creating awesome websites and sharing my knowledge on this RUclips channel💻. I love writing technical articles📝 and making tutorials📺 that make web development easy and fun to learn.
In my free time, I stay up-to-date with the latest tech trends and continue to grow my skillset📚. I'm always looking for new opportunities to help others learn and thrive in the world of web development🚀.
Let's code together and have some fun!😄
I'm a web developer and freelancer with a passion for creating awesome websites and sharing my knowledge on this RUclips channel💻. I love writing technical articles📝 and making tutorials📺 that make web development easy and fun to learn.
In my free time, I stay up-to-date with the latest tech trends and continue to grow my skillset📚. I'm always looking for new opportunities to help others learn and thrive in the world of web development🚀.
Let's code together and have some fun!😄
Using Next.js build an AI powered twitter Bio Generator | Groq | Shadcn | Llama 3 | Vercel AI SDK
Are you ready to dive into the world of Generative AI?
In this comprehensive tutorial, you'll learn how to build an AI-powered Twitter bio generator using Next.js and Groq. We'll leverage the power of ShadCn UI components, Magic UI components, and Llama 3 & Mistral models, all seamlessly integrated using the Groq LLM provider.🤩
Demo Link🖤: ai-powered-twitter-bio-generator.vercel.app/
Personal Blog📖: devdreaming.com
-----------------------------------------------------------------------------------------------------------
Final CODE:
➡ Link 💚(Give ⭐ to the repo): github.com/codebucks27/AI-Powered-Twitter-Bio-Generator
------------------------------------------------------------------------------...
In this comprehensive tutorial, you'll learn how to build an AI-powered Twitter bio generator using Next.js and Groq. We'll leverage the power of ShadCn UI components, Magic UI components, and Llama 3 & Mistral models, all seamlessly integrated using the Groq LLM provider.🤩
Demo Link🖤: ai-powered-twitter-bio-generator.vercel.app/
Personal Blog📖: devdreaming.com
-----------------------------------------------------------------------------------------------------------
Final CODE:
➡ Link 💚(Give ⭐ to the repo): github.com/codebucks27/AI-Powered-Twitter-Bio-Generator
------------------------------------------------------------------------------...
Просмотров: 922
Видео
Build an Amazing Personal Portfolio Website with Next.js, Three.js & Tailwind CSS
Просмотров 95 тыс.4 месяца назад
In this tutorial we will learn to Create a Mobile Responsive Personal Portfolio Website with Next.js, Three.js & Tailwind CSS🤩 Demo Link🖤: next-js-creative-portfolio-website.vercel.app/ 👉 Try out SquareX extension from here : sqrx.io/cb_yt If you're looking to learn more, check out their RUclips channel @SquareXTeam . Personal Blog📖: devdreaming.com Starter CODE: ➡ Link 💚(Give ⭐ to the repo): g...
Create Stunning Animations with Wix Studio: A Step-by-Step Tutorial
Просмотров 1,6 тыс.6 месяцев назад
In this video we will learn to add/create different types of animations for a website with the help of Wix Studio!🤩 Checkout Wix Studio's official website: bit.ly/411L2Ob Follow @wixstudio channel for more such tutorials. Hey there 👋, In this tutorial, we'll explore different types of animation that used to create stunning websites🚀. Perfect for both beginners and pros, From captivating typing ...
Implement Smooth Scroll & Parallax Effect in Next.js using Lenis and GSAP
Просмотров 14 тыс.7 месяцев назад
In this tutorial we will learn to implement how to add smooth scrolling with parallax effect in Next.js!🤩 Demo Link🖤: smooth-scroll-next-js.vercel.app/ Blog📖: devdreaming.com Final CODE: ➡ Link 💚(Give ⭐ to the repo): github.com/codebucks27/Smooth-Scroll-Next.js Hey there 👋, In this tutorial, we'll learn to implement smooth scrolling website Here's what you'll learn in this tutorial: 🌟 How to ad...
Build an Impressive Agency Website with Wix Studio: Step-by-Step Tutorial
Просмотров 17 тыс.7 месяцев назад
In this video we will create a stunning Aagency website with the help of Wix Studio!🤩 Checkout Wix Studio's official website: bit.ly/411L2Ob Follow @wixstudio channel for more such tutorials. 🌟 Projects file (for CMS): bit.ly/3N4tUSc Hey there 👋, In this tutorial, we'll create a stunning agency website using Wix Studio, a powerful website creation platform. We'll use advanced features like resp...
Wix Studio Tutorial: Create a Professional Real-Estate Website
Просмотров 3,6 тыс.9 месяцев назад
In this video we will create a stunning real-estate website with the help of Wix Studio!🤩 Checkout Wix Studio's official website: bit.ly/411L2Ob Follow @WixStudio channel for more such tutorials. Hey there 👋, In this tutorial, we'll create a stunning real estate agency website using Wix Studio, a powerful website creation platform. We'll use advanced features like responsive AI, CSS grid, secti...
Next.js Blog Tutorial: Build SEO Optimized Blog with Next.js, Contentlayer, and Tailwind CSS 🔥
Просмотров 39 тыс.10 месяцев назад
Tutorial😇 to build a amazing static blog using Nextjs, Tailwind css and contentlayer that has great lighthouse score. Demo Link🖤: create-blog-with-nextjs.vercel.app/ Blog📖: devdreaming.com Contentlayer documentation link (Temporary): website-git-new-landing-page-schick.vercel.app/docs Starter CODE: ➡ Link 💚: github.com/codebucks27/Nextjs-contentlayer-blog Final CODE: ➡ Link 1💚(Give ⭐ to the rep...
How to Create a Stunning Portfolio Website with Nextjs, Tailwind CSS and Framer-motion🌟
Просмотров 594 тыс.Год назад
Tutorial😇 to build a beautiful mobile responsive portfolio using Nextjs, Tailwind css and Framer-motion that has good lighthouse score. Demo Link🖤: minimal-nextjs-portfolio-website.vercel.app/ Blog📖: devdreaming.com Note⛔: In the useThemeSwitcher.js file in the following line, const preferDarkQuery = "(prefers-color-scheme: dark)"; use "prefers-color-scheme" with s and not "prefer-color-scheme"...
React Website Tutorial: ⭐Build Feature Rich Crypto Screener App with Tailwind CSS
Просмотров 29 тыс.Год назад
Tutorial😇 to build a fully functioning Crypto Screener App using React Tailwind css Context API React Router Demo Link🖤: crypto-bucks.netlify.app/ Blog📖: devdreaming.com ✅ Get $500 off your CoinGecko API Annual Plan subscription with my referral code: CGCODEBUCKS ✅ Get your API key from here: coingecko.com/api Hi there 👋, In this video, We are going to create an amazing Crypto Screener applicat...
How To Deploy React Application on Netlify with Custom Configuration (Env Variables and Router)
Просмотров 5 тыс.Год назад
Tutorial😇 to host React application on Netlify ☁ Blog📖: devdreaming.com Hi there 👋, In this video, We will use Netlify to host our React application. We will also learn to configure env variables on Netlify so that we can use them in our React application. You will also learn to add some additional configuration on netlify for react-router as well. Don't forget to watch the whole video, we're g...
🔥Build awesome 3D landing page for Apple iPhone using ReactJS + ThreeJS + GSAP
Просмотров 30 тыс.Год назад
Tutorial😇 to create Apple iPhone 14 landing page using ThreeJs ReactJS Demo Link🖤: apple-iphone14.vercel.app/ Blog📖: devdreaming.com Hi there 👋, In this video, We are going to create cool landing page for Apple iPhone 14 Pro Max where we will render 3D model using ThreeJs and add scrolling animations using GSAP. Here I have used different libraries to render 3D model in a React application and ...
🔥Build a Stunning Fashion Studio Website with React JS [ Locomotive Scroll + GSAP + Framer Motion ]
Просмотров 47 тыс.2 года назад
React JS Fashion Studio Website Landing Page Tutorial😇 Demo Link🖤: wibe-studio.netlify.app/ Blog📖: devdreaming.com Hi there 👋, In this video, I am going to create a Fashion Studio Website with Gsap, Framer-motion and Locomotive-scroll. Here I have used different libraries and made a unique design, You can check the demo link. For this project, we're going to use, ▶️ React JS (CRA) ▶️ GSAP for s...
🔥Create an NFT Collection Website Landing page with React JS [Mobile Responsive]
Просмотров 53 тыс.2 года назад
React JS NFT Collection Website Landing Page Tutorial😇 Demo Link🖤: the-weirdos.netlify.app/ Blog📖: devdreaming.com Hi there 👋, In this video, I am going to create a whole NFT Collection Landing Page with ReactJS. Here I have used very few libraries and made a unique design, You can check the demo link. NOTE 🔴: There is one change in the Button.js File. Wrap Btn inside Link component for the lin...
🔥Build a Stunning Portfolio Website with React JS [ Framer-motion + Styled-components ]
Просмотров 140 тыс.2 года назад
React Portfolio Website Tutorial😇 Demo Link🖤: react-portfolio-sigma.vercel.app/ Blog📖: devdreaming.com Hi there 👋, In this video, I am going to create a whole Portfolio Website with ReactJS. Here I have used very few libraries and made a unique design, You can check the demo link. For this project we're going to use, ▶️ Framer-motion (For Smooth Page Transition and Animations) ▶️ Styled-compone...
📝Form Validation✅ & Handling In ReactJS | By creating Custom Hook⚓
Просмотров 8 тыс.2 года назад
📝Form Validation✅ & Handling In ReactJS | By creating Custom Hook⚓
🤩Smooth Scrolling in React with Smooth-scrollbar
Просмотров 15 тыс.2 года назад
🤩Smooth Scrolling in React with Smooth-scrollbar
React Modal Tutorial using Hooks and Portals from scratch 🔴
Просмотров 9 тыс.3 года назад
React Modal Tutorial using Hooks and Portals from scratch 🔴
React Sidebar Navigation Menu Tutorial 🤩 [ Using Router + Page Transition with Frame-Motion ]
Просмотров 21 тыс.3 года назад
React Sidebar Navigation Menu Tutorial 🤩 [ Using Router Page Transition with Frame-Motion ]
React Website🤩 : Build Responsive website with ReactJS, Styled-Components & GSAP❣️
Просмотров 30 тыс.3 года назад
React Website🤩 : Build Responsive website with ReactJS, Styled-Components & GSAP❣️
Building a Todo List App with Redux 😍 | ( React-Redux ) Tutorial For Beginners
Просмотров 39 тыс.3 года назад
Building a Todo List App with Redux 😍 | ( React-Redux ) Tutorial For Beginners
Redux Toolkit : Create Slice Function | React Redux Tutorial - #7
Просмотров 4,6 тыс.3 года назад
Redux Toolkit : Create Slice Function | React Redux Tutorial - #7
Redux Toolkit | React Redux Tutorial - #6
Просмотров 7813 года назад
Redux Toolkit | React Redux Tutorial - #6
Combine reducers in Redux | React Redux Tutorial - #5
Просмотров 1,1 тыс.3 года назад
Combine reducers in Redux | React Redux Tutorial - #5
React Redux Tutorials [Connect ReactJS and Redux] - #4
Просмотров 1 тыс.3 года назад
React Redux Tutorials [Connect ReactJS and Redux] - #4
Redux debugging with Redux Dev Tools | React Redux Tutorial - #3
Просмотров 5 тыс.3 года назад
Redux debugging with Redux Dev Tools | React Redux Tutorial - #3
Redux simple example [ React Redux Tutorial ] - #2
Просмотров 3,1 тыс.3 года назад
Redux simple example [ React Redux Tutorial ] - #2
Redux Tutorial [ What is Redux? ] - #1
Просмотров 5 тыс.3 года назад
Redux Tutorial [ What is Redux? ] - #1
Build Dev.to Clone in React JS | Part 6 (Infinite Loading & Skeleton UI)
Просмотров 1,1 тыс.3 года назад
Build Dev.to Clone in React JS | Part 6 (Infinite Loading & Skeleton UI)
Build Dev.to Clone in React JS | Part 5 (Article Section)
Просмотров 6483 года назад
Build Dev.to Clone in React JS | Part 5 (Article Section)
Build Dev.to Clone in React JS | Part 4 (Right Sidebar)
Просмотров 3683 года назад
Build Dev.to Clone in React JS | Part 4 (Right Sidebar)
How to deploy it
Use vercel. Add code to your github repo and integrate vercel with your github account. Then you can directly go to vercel select the repo and deploy it.
This is so amazing and Cool, i really want to learn 3D but I'm unable to give time .
can someone give me the themeSwitcher code
Actually an awesome tutorial Very helpful 🎉❤ Could you please make another video for deployment of these kind of app 😊
Thanks for your kind words! Sure I will create one video for deployment.
is it possible if i follow this video and on the place of coins can i fetch US and indian stocks and add a login page using django?
You can do it but you should atleast have basic knowledge of Next.js or React.js.
doesnt making the lenis wrapper comp "use client" also all children "use client"?, sry im new to nextjs
Any component that requires interaction with DOM or user then you should include "use client" directive at the top of the component. Could you explain a bit more about lenis issue?
On running in live server in VS CODE, the website only showing file directory instead of any image or CSS. No index.html file is found. Please help to fix that issue.
Hey, It's not simple html, css and Js. It's build using Next.js so you have to first install the dependancies using "npm install" then run "npm run dev" then it should run the website in development mode. Make sure that you have Node.js installed in your system.
@@CodeBucks ok...Get it👍
Hello @CodeBucks , Wonderful piece of creation here 🔥, I wanted to ask what app and prompt did you use to create the wizard since you did an excellent job on showing us how you transformed the 3D model but not how was created, I am curious. Thanks in advance!
Hey, I have not created wizard 3d model, but I got it from sketchfab website. Creating 3d model is whole new skill that I don't possess.
What would be a good SaaS offer for services just on Wix?
You could join and leverage Wix Marketplace where you can provide different plugins/app or such for subscription or fixed price. You can also provide packages such as e-commerce package that includes setting up online stores, integrating payment gateways, inventory management, and implementing SEO strategies to drive traffic.
This is the best protfolio I have seen so far! Amazing work!
What plugins are you using for HTML that give suggestions to auto complete code for flex, justify etc.
I'm using Tailwind CSS IntelliSense to ger class names suggestions for tailwind css, for the basic html and stuff I'm using emmet.
@@CodeBucks Thank you ! Installing them instantly made my life easier when following your tutorial.
Dude How have you dont the react routing?
There is no need to do react routing because I have used Next.js. The Next.js uses file based routing so you can directly create the file name and it will take that name as route.
@CodeBucks but it's coming 404 not found error on every button I click...can you explain why?
@@asmitamondal9699 It could be because you may have made mistake when creating routes or adding links to those buttons. I suggest compare your code with the final code from github.
@@CodeBucks yes I have compared my code with yours....still I am getting 404 page not found error
@@asmitamondal9699 Could you share a link that you see when you hover on the button?
this is so f'ing awesome! im going to make a knight theme page
I'm glad you liked it! Knight theme sounds cool😎
Best porfolio ever, thanks a lot.
I'm glad you liked it😇
looks grear!
I'm glad you liked it😇
3:15:30
Hey codebucks, Amazing website I also want to make a one for me , can u please tell , are there any prerequisites needed for creating this or i can simply get along and follow your instructions and make ?
Hi Anjali, Thanks for your kind words. It's better if you have knowledge of Next.js or React.js before you start following this tutorial.
Bro, from which website you are getting the SVG's?
Hey, I'm getting svgs from iconify.design/. You can check readMe file of the github repo to get links for all the resources.
What are the pre-requisites for this.
As long as you are familier with next.js/react.js there is no additional requirenments. You'll be provided with all the details that is required to build this. Additionally It's better if you have knowledge about the LLM or used LLM before.
getting error global is not define ...
Can you tell me more about the error? In which file you are getting that error and also make sure to update the dependencies.
Im having an issue with lg breakpoint overriding other breakpoints. I used the styles.txt to copy the breakpoints and followed the tutorial but in dev tools its applying multiple breakpoints at once. usually the lg and md together. The main image doesnt come back on medium after lg:hidden is added. Ive been trying to figure it our for a day. has anyone had a similar issue? thank you!
Hey, we are using max-width media queries so if you write lg:hidden that means it will hide the image for smaller screens then the lg breakpoints. So you won't be able to see the image for medium screens unless you change display for medium screens.
@@CodeBucks thank you. I ended up buying the finished product to see where I went wrong because i was stumped. The problem was in the tailwind config file on my end. what a waste of 2 days! lmaoo Thanks man
@@jordonmarchesano9219 Okay great. Also thanks for your purchase.
Sir i merged your to github repository portfolio codes but not run . I don't know why it's happen but the error showing in the node_modukes what can i do ?
Can you provide the error message that you are getting?
thanks, that's great video, simple and worked!!.
Great to hear!
Being a Potterhead, this was the best thing I have come across yet
I'm glad you liked it😇
Done with this amazing project ☺️❤
That's awesome✨ I hope it gave you more understanding about the integration of LLMs. Now you should be able to create more such projects. Please share this tutorial so that other developers can also learn from this!❣️
Sir, Can I Style mdx in Material Ui
Yes I guess you can. You can use MDXRemote and in that component you can pass your own MUI components.
Wix project link can be embed and share in Behance?
Hey, I'm not sure you can try it out.
M not able to hover the button can anyone help me
Hey, you can compare your code with the final version of the code from github. If you still face any issue pease provide more details.
I have tried to do it but it's not working like I have used the exact code upto the navigation section everything is working properly but button is not responding
@@kislayrajput2250 Hey, I think the issue is z-index. Make sure that the z-index of button is higher then the background or model. You can check it through inspecting each elements.
Pardon sir, actually my button is not working🥺
@@kislayrajput2250 What do you mean by it's not working? You are not able to hover on it or it's not responding on click?
Has anyone used midJourney? It is asking for subscription!
I just watched both of the videos, its great! But a few things have changed in WIX UI, and maybe we can get a similar Tutorial with a new WIX version .... THANKSSS ALOTT!!!
Noted! Could you share like what things changed recently?
this was decent but...for complete beginners can you explain why you use things like containers, extra seemingly random padding, etc?? i see you doing it but have no idea why... or what exactly its used for
Hey, It is always better to put media or such elements inside container because it is easier to add padding/margin to the container instead of adding separate margin/padding for each individual elements. Also If you use containers instead of separate elements then you can easily make it mobile responsive without moving elements or adding different values for different screen sizes.
Decent project.. Please make more complex GenAI projects, maybe something like Perplexity where you combine LLMs and Web Search?
Thanks for your suggestion✨ Yes, I'm planning to create some complex projects using generative AI.
I love your video idea
bro i know mern stack and framework like nextjs i have 1 year experience as intern . now i am not getting full time job. even if i am apply and submit assignment they say your work is good . but we have already other person for this role. i am thinking to start freelancing please make video on that. so is there value for web dev as it has become saturated. so i am thinking to switch to ai engineer. bro please give some suggestions. how to start freelancing
Hey, there are Jobs for web developers but you should have some unique projects in your portfolio to attract the right kind of opportunities. You have to create few complex projects. If you want to learn more on generative AI then you can start with LLMs and then move towards the Image generation. There are multiple courses from big tech companies like Google, Microsoft etc. In the next few months I'm also thinking to create videos on generative AI.
@CodeBucks bro please make video on freelancing how to start as a fresher in freelancing
I hope you guys liked the video! 🌟 I'd love to hear your thoughts and ideas for my next tutorial. Are you interested in more generative AI projects, or is there something else you'd like to see? Let me know in the comments below! And don't forget to like, share, and subscribe to stay updated with my latest content! 🚀
Sir,,,, i want production level full stack e commerce website using next, typescript...with admin dashboard....
Will upload soon!
@@CodeBucksi will wait,,, thank you 🎉🎉🎉🎉
thanks 😊
No problem 😊
Nice project, but demo website is not working correctly. Network request returns 500 (server error) in most cases. Can you please fix this?
Hey, I have checked again and it's working on my end. could you please check it again? Ai response may take time because currently it uses groq's free version with limits.
Thank you for making such a helpful video! I found the solution to my problem. Keep up the great work!
Thanks for your kind words!
how to increase opacity of the model my model is having low opacity i guess plzz help
brother your content is awesome make more content like this and please make some projects that we can add to our portfolio to increase the chance of getting selected for an interview and please make a futuristic new unique portfolio website ❤
Sure I will! Thanks for your kind words😇
hi, @CodeBucks which is the main static file please let me know so that I can update my web.config file
Hey, what do you mean by web.config file?
Best video on pagination ❤ complete custom design
Glad you like it
What a creative portfolio website, i really enjoyed watching and learning from your video.
Happy to hear that!
thank you. i'm confused about what design i should use for my portofolio, so i decided to use this video
I'm glad that you liked it!😄
Fantastic tutorial mate, I have learnt alot. Thank you....😃
Great to hear!
can you give some instruction on how you were able to push this onto github? it is saying that "You may want to try Git Large File Storage"
I love this thank you so much!!!!!
I'm so glad!
do that video on same wave to create using mern stake tools expect next.js
I don't think portfolio websites needs this heavy techstack but sure I'll consider the tech stack for other type of websites.
I watched a lot of three js videos and Indians are the best in making videos xD <3
Thanks for your kind words😇 I'm glad you liked the video.