- 29
- 70 374
Program With Abu
Uganda
Приєднався 8 чер 2021
Welcome to the channel! I’m here to help you level up as a developer and designer, starting with the fundamentals and building from there.
In my videos, we’ll dive into web development, explore the magic of documentation, and harness the power of research to make your projects shine.
Ready to learn and create? Let’s jump in!
#JavaScript #React #React-Native #Wordpress #SQL
In my videos, we’ll dive into web development, explore the magic of documentation, and harness the power of research to make your projects shine.
Ready to learn and create? Let’s jump in!
#JavaScript #React #React-Native #Wordpress #SQL
PART 1 - Introduction to Next.js | Build a Blog Website with Sanity Backend
🚀 Welcome to the part 1 my Next.js tutorial series! In this exciting tutorial, I'll introduce you to the world of Next.js by building a powerful blog website with Sanity as the backend. Whether you're a beginner or an experienced developer, this step-by-step guide will help you kickstart your journey into Next.js and gain hands-on experience with a headless CMS like Sanity.
📚 What's Covered in This Tutorial:
- Setting up your development environment
- Understanding the basics of Next.js
- Creating a Next.js project from scratch
- Installing and configuring Sanity as our content management system
- Fetching and displaying blog content from Sanity in our Next.js application
- Creating dynamic routes for blog posts
- Building a stunning and responsive user interface with React components
🔥 By the end of this tutorial, you'll have a fully functional blog website with a clean and efficient Next.js frontend powered by Sanity's flexible backend. Whether you're looking to build your blog or enhance your web development skills, this tutorial will equip you with the knowledge and confidence to get started.
📦 Resources:
Check out part 2 👉 ua-cam.com/video/RYEBtwt_VbU/v-deo.html
Complete project: myawesomeblog.vercel.app/
Get started with Next.js: nextjs.org/
Sign up for a free Sanity account: www.sanity.io/docs
Code and project files: github.com/iAthman83/youtube-next-blog-sanity.git
👍 If you find this tutorial helpful, please give it a thumbs up, subscribe to our channel for more web development tutorials, and click the notification bell to stay updated with our latest content.
💬 If you have any questions or need assistance along the way, feel free to leave a comment below, and I'll do our best to help you out.
🌐 Stay connected with me:
Website: programwithabu.com/
Twitter: iathman83
LinkedIn: www.linkedin.com/in/abubakar-athman/
If you also feel like supporting this channel, use the link below
☕️Buy me coffee 👉 www.buymeacoffee.com/iathman83
📌 Don't forget to share this tutorial with your fellow developers and friends who might find it valuable. Let's embark on this exciting Next.js and Sanity journey together! 🔗 #NextJS #SanityCMS #WebDevelopment #Tutorial
Chapters:
00:00:00 - Introduction
00:03:02 - Setup git repository
00:04:02 - Install NextJS
00:05:45 - NextJS folder structure walkthrough
00:10:20 - Clean up initial installed project
00:21:50 - Nav bar and footer
00:35:40 - Hero section design
00:45:49 - Blog section design
📚 What's Covered in This Tutorial:
- Setting up your development environment
- Understanding the basics of Next.js
- Creating a Next.js project from scratch
- Installing and configuring Sanity as our content management system
- Fetching and displaying blog content from Sanity in our Next.js application
- Creating dynamic routes for blog posts
- Building a stunning and responsive user interface with React components
🔥 By the end of this tutorial, you'll have a fully functional blog website with a clean and efficient Next.js frontend powered by Sanity's flexible backend. Whether you're looking to build your blog or enhance your web development skills, this tutorial will equip you with the knowledge and confidence to get started.
📦 Resources:
Check out part 2 👉 ua-cam.com/video/RYEBtwt_VbU/v-deo.html
Complete project: myawesomeblog.vercel.app/
Get started with Next.js: nextjs.org/
Sign up for a free Sanity account: www.sanity.io/docs
Code and project files: github.com/iAthman83/youtube-next-blog-sanity.git
👍 If you find this tutorial helpful, please give it a thumbs up, subscribe to our channel for more web development tutorials, and click the notification bell to stay updated with our latest content.
💬 If you have any questions or need assistance along the way, feel free to leave a comment below, and I'll do our best to help you out.
🌐 Stay connected with me:
Website: programwithabu.com/
Twitter: iathman83
LinkedIn: www.linkedin.com/in/abubakar-athman/
If you also feel like supporting this channel, use the link below
☕️Buy me coffee 👉 www.buymeacoffee.com/iathman83
📌 Don't forget to share this tutorial with your fellow developers and friends who might find it valuable. Let's embark on this exciting Next.js and Sanity journey together! 🔗 #NextJS #SanityCMS #WebDevelopment #Tutorial
Chapters:
00:00:00 - Introduction
00:03:02 - Setup git repository
00:04:02 - Install NextJS
00:05:45 - NextJS folder structure walkthrough
00:10:20 - Clean up initial installed project
00:21:50 - Nav bar and footer
00:35:40 - Hero section design
00:45:49 - Blog section design
Переглядів: 650
Відео
PART 2 - Introduction to Next.js | Build a Blog Website with Sanity Backend
Переглядів 1,2 тис.10 місяців тому
🚀 Welcome to the part 2 of my Next.js tutorial series! In this exciting tutorial, I'll introduce you to the world of Next.js by building a powerful blog website with Sanity as the backend. Whether you're a beginner or an experienced developer, this step-by-step guide will help you kickstart your journey into Next.js and gain hands-on experience with a headless CMS like Sanity. 📚 What's Covered ...
React Firebase Tutorial: Securing Protected Routes in Your App
Переглядів 3 тис.Рік тому
In this tutorial, I will walk you through how to secure protected routes in your React app using Firebase Authentication. We will cover how to create and manage users using Firebase, and how to use React Router to create a private route that users must be authenticated to access. You will learn how to use Firebase's security rules to control access to data and resources, and how to authenticate...
ReactJS Redux Crash Course: Build a Simple Todo List
Переглядів 1,7 тис.Рік тому
In this ReactJS Redux CRUD Crash Course, you'll learn how to create a simple todo list application using ReactJS and Redux. You'll start by learning the basics of Redux, and then move on to building a simple todo list app that allows you to add, delete, update and edit items. Throughout the course, you'll learn how to use Redux to manage the state of your application, including how to create re...
React Pass forwardRef Hook Between Multiple Components
Переглядів 953Рік тому
Learn how to pass a forward ref hook between components in React! This technique allows you to access DOM elements directly. Watch this video to see a step-by-step example of how to use forward refs in your own code. Get ready to take your React skills to the next level! Props 👉 ua-cam.com/video/2HSBhv4qJRs/v-deo.html Subscribe to my channel 👉 www.youtube.com/@programwithabu Follow me on: Twitt...
Free Websites - Feels Illegal to Know and Use
Переглядів 210Рік тому
Hey everyone! In this video, I'm sharing my favorite websites that not many people know about. These sites are hidden gems that offer unique and useful content, and I think you'll love them as much as I do. Whether you're looking for obscure information, cool tools, or just something different, these websites have got you covered. Be sure to check them out and let me know what you think in the ...
React Native Integration with Tailwind CSS
Переглядів 296Рік тому
In this video, we'll be talking about React Native and Tailwind CSS. Together, React Native and Tailwind CSS make it easy to build beautiful, functional apps with a clean and modern design. Nativewind 👉 www.nativewind.dev/ Subscribe to my channel 👉 www.youtube.com/@UCPVAawyAdFtxPFwWS1hCjMQ Follow me on: Twitter 👉 iathman83 LinkedIn 👉 www.linkedin.com/in/abubakar-athman/ Buy me coffe...
Tailwind CSS - How To Work With Data Attributes
Переглядів 2,6 тис.Рік тому
In this video I show you how to work with data attribute in tailwind CSS to change the style of a component before rendering it to the user. Other tutorials on Tailwind CSS coming up soon. GitHub repo 👉 github.com/iAthman83/youtube-tailwind-data-attribute-variants Subscribe to my channel 👉 www.youtube.com/@programwithabu Follow me on: Twitter 👉 iathman83 LinkedIn 👉 www.linkedin.com/...
Mobile Bottom Navigation with WordPress
Переглядів 8052 роки тому
This this video I show you how to use WordPress and Elementor to create a bottom navigation menu that only displays when the user in browsing your website only on their mobile or tablet to give it a feel of a mobile app. Subscribe to my channel 👉 ua-cam.com/channels/PVAawyAdFtxPFwWS1hCjMQ.html Related videos Introduction to WordPress 👉 ua-cam.com/video/gPc2e_WP5kE/v-deo.html Mega Menu in WordPr...
React Responsive Navigation Menu [2022]
Переглядів 9192 роки тому
React Responsive Navigation Menu [2022]
JavaScript for Absolute Beginners [2022]
Переглядів 3872 роки тому
JavaScript for Absolute Beginners [2022]
Use React to Scroll to Specific Section on Your Website
Переглядів 53 тис.2 роки тому
Use React to Scroll to Specific Section on Your Website
How to use Free Tools to Create a Modern Mega Menu on WordPress Using Elementor and Elementskit
Переглядів 2382 роки тому
How to use Free Tools to Create a Modern Mega Menu on WordPress Using Elementor and Elementskit
Introduction To WordPress Complete Beginner Tutorial 2022
Переглядів 1552 роки тому
Introduction To WordPress Complete Beginner Tutorial 2022
Icon List Icon Not Sticking to First Line in Elementor - WordPress
Переглядів 1,9 тис.2 роки тому
Icon List Icon Not Sticking to First Line in Elementor - WordPress
React Context API - Introduction to Modern REACTJS - Part 7 (2021)
Переглядів 1163 роки тому
React Context API - Introduction to Modern REACTJS - Part 7 (2021)
React Router - Introduction to Modern REACTJS - Part 6 (2021)
Переглядів 1273 роки тому
React Router - Introduction to Modern REACTJS - Part 6 (2021)
React State - Introduction to Modern REACTJS - Part 5 (2021)
Переглядів 823 роки тому
React State - Introduction to Modern REACTJS - Part 5 (2021)
REACTJS Props - Introduction to Modern REACTJS - Part 4 (2021)
Переглядів 1353 роки тому
REACTJS Props - Introduction to Modern REACTJS - Part 4 (2021)
Design with React-Bootstrap - Introduction to Modern ReactJS - Part 3 (2021)
Переглядів 1473 роки тому
Design with React-Bootstrap - Introduction to Modern ReactJS - Part 3 (2021)
Project Refactoring - Introduction to Modern ReactJS - Part 2 (2021)
Переглядів 1073 роки тому
Project Refactoring - Introduction to Modern ReactJS - Part 2 (2021)
Introduction to Modern ReactJS - Part 1 (2021)
Переглядів 3093 роки тому
Introduction to Modern ReactJS - Part 1 (2021)
What a perfect video. I just needed a quick rundown on the data attribute to gap-fill. I was concerned I was going to have to watch a 1 hour video to extract 5 minutes of info. Thanks!
sir pls give your repo
thank you for this tutorial, wonderfully explained. But what if each section is a component on its own? For example the Nav is a component, the About section is another component. and all of them gathered in the App.js! I'm having problems understanding how can I do it when each section is a component on its own, HELP :(.
what is the use of usereef?
Thank you for your help!
🎉thank you So much for the knowledge
You save me man haha from the trouble on protection routes ... i cant even imagine it shows me on my local infinite loop and parsing error haha u earn my subs
I’m glad I could be of help to you! And thanks for the subscription 😎
Best redux tutorial ever! You're very good. Please add the link to your github in the description.
Thank you for this tutorual，it is very helpful，I will give it a try ❤
CCS animations 👍
thank you so much for this. I have a little question>>>> i don't want the id of the post to be the url. i want the slug generated to be the url . any idea on how i can make that happen?. i'll be glad to get a reply
The idea here is to use the useSearchParams hook to target the URL and change it according to the query Find more informations on the link below nextjs.org/docs/app/api-reference/functions/use-search-params
💃 Promo-SM
Abu, assalamou alaikoum. You are my man Abu, thank you very much. you tutorial is far more better than all these jerks that have hundreds of thousands of subscriber. keep doing you nice work. maachaallah
thanks alot for this video
Hey But what if I am trying to interrupt the scroll when user is scrolling up? How can I do that?
Interrupting the scroll? The way this one is setup is that the scroll goes up to the top of the page. You can setup yours with the mouse listener event, if I understand your question correctly
Since TCA i knew you were smart
Thanks for the kind words!
Sir, great Sanity/Next Js project! Question for you - when i update my posts in the deployed Sanity studio, the changes do not show in on my local:3000 frontend. Can I preview my changes? Thanks!
Great question. Can you get these posts in production? I ask because the way the sanity client (createClient) is setup is in away that it does not specify development or production. So I would advice you to check your client on nextjs if everything is setup ok, and also check the function that gets all the posts if that is also setup. If all these are ok, then also check the component that’s calling the function returning all the posts. Lemme know if it works.
@@programwithabu Sorry for getting back so late. Turns out - i just needed to use 'revalidate'. Everything's fine now!
@GregPeters1 Can you please share your repo for the reference and explain how this problem has resolved
@@GregPeters1 .
@@rahichauhan4655 I didn't create a repository. But, the issue is dynamic, and regardless of which CMS you're using, a thorough understanding of how Next JS/Vercel's tag works is needed. I say this because i spent half a day reading issues on github regarding this subject. As it turns out, chances are that you'll get unreliable results if you're using revalidating on multiple pages. The best advice i can give you is to visit Vercel's yt channel, look for the 25min vid posted on Jan 15, '24 titled: Next.js App Router Caching: Explained!
How would I implement this if I have multiple components in my react page? For example, my page has a navbar.js file which is exported to app.js(and this also imports all the sections from other files/components). How could I implement this in that case?
Hi, I created another video to solve this issue, you can find it on the link below ua-cam.com/video/_G5RxzxJz4A/v-deo.htmlsi=l75gYCqlR9_103TV How this helps out
My friend, you have the BEST delivery.
Thank you so much for your comments. It’s comments like this that give me the energy to create more content
Thank you so much Abu for explaining this, this will help me to apply in my portfolio website.
We’re most welcome, I’m glad I could help The video below might also help, where I show how to forward ref from one component to another ua-cam.com/video/_G5RxzxJz4A/v-deo.htmlsi=KCDBupMYFgbvxEwO
Thanks man you explained it so easily
Thank you for the step by step explanation
The video below might also help, where I show how to forward ref from one component to another ua-cam.com/video/_G5RxzxJz4A/v-deo.htmlsi=KCDBupMYFgbvxEwO
Thank you brother!
i just fell in love with your method of teaching. you are too good!!.
10/10
I have really enjoy this course with you
This is just what I needed. Thank you!
Response coming really late haha But I’m glad I could help
nice one man! thank you!
console.log("subscribed, great video!")
Amazing work mashallah, I’m learning a lot.
your git repo has nothing !!!
This was my mistake Huntx But here is the updated repo with the code github.com/iAthman83/youtube-react-authentication-with-firebase
Hehe nice bro 😁
Since somedays ago, I search how to work this feature and i finally found it today ! thanks to you ! you the best ! i follow you right now !
Thank you for your kind words Raiji, I’m glad I could help you out, makes me so happy that you figured out how this works 💪🏽
Second one is not that easy bruh💀
How to solve that white gap im a beginner
Sorry for responding to your comment late, Which white gap? But I hope you figured it out by now (:
Just finish the whole video. It took me several hours to finish. On the last part of the code, you created a handleSignOut constant instead of a handleSignOut. Because you used the same name on the form onSubmit, the app worked fine, but the name confuses a little bit. THANK YOU SO MUCH!!!!!
Thanks for pointing that out, I appreciate it Also awesome that your code worked just fine,
Thank You!!! This is exactly what I was looking for!!
I’m so glad I could help
Bro where is the repo link?
What do I do if the different sections are housed deep in custom components? How can i pass the ref from parent to deep nested child component?
We’re most welcome, I’m glad I could help The video below might also help, where I show how to forward ref from one component to another ua-cam.com/video/_G5RxzxJz4A/v-deo.htmlsi=KCDBupMYFgbvxEwO
nice tutorial, i'm more of angular but i know react too, i think both are amazing technologies, redux toolking has so many features that one video is impossible to check them all
its a great a easy to follow tutorial, but you did not remove the event in the useEffect. you should remove that event so when the component is closed that event is also closed. Thank you for such a good lecture :)
thank you so much for the tutorial, everything worked out!
Glad I could help
Very detailed 🎉
thanks, you made it very easy to undestand
Thank you! This was very helpful!
Glad I could help
Great at explaining and very thorough, hope you continue your journey in teaching! Thanks for the video.
Thanks Mitch. I’m glad the video helped out!
Wow
thanks mate for the amazing tutorial, i was searching so long for a up to date tutorial. Amazing work and easy to understand. can u do an update video with googleSignIn as a template how to integrate the other signin methods?
Thank for you’re kinds words. I will put your request into consideration for my upcoming videos. That’s a great idea though!
Really cool👍👍👍👍
I have to say this was awesome. Thanks a lot.
I’m glad I could help