![Imran Codes](/img/default-banner.jpg)
- Видео 314
- Просмотров 136 843
Imran Codes
Великобритания
Добавлен 3 янв 2022
Hi there! I'm Imran, and this channel is all about learning web development in particular React and JavaScript projects.
Web development can be a bit intimidating at first, especially when you're trying to keep up with the latest frameworks in the world of Javascript like React and NextJS. That's why I've created this channel to share my tips and tricks that I've picked up as a Frontend Web Developer.
I have a passion for teaching people that coding can be a really fun career path-and most of the time it follows the same patterns for building websites and apps. My goal is to teach you those patterns in a modern approach so that you don't get discouraged by bugs or problems when writing code.
My videos include tutorials, walkthroughs, and Q&A sessions where I answer your questions about everything from debugging to job-hunting.
Web development can be a bit intimidating at first, especially when you're trying to keep up with the latest frameworks in the world of Javascript like React and NextJS. That's why I've created this channel to share my tips and tricks that I've picked up as a Frontend Web Developer.
I have a passion for teaching people that coding can be a really fun career path-and most of the time it follows the same patterns for building websites and apps. My goal is to teach you those patterns in a modern approach so that you don't get discouraged by bugs or problems when writing code.
My videos include tutorials, walkthroughs, and Q&A sessions where I answer your questions about everything from debugging to job-hunting.
Understanding Deployment Strategies: Pros, Cons, and Best Practices Explained
Discover the various deployment strategies used in software development and learn how to choose the right one for your projects! In this video, we break down the pros and cons of popular deployment methods like Blue-Green, Canary, Rolling, and A/B testing. We'll also provide practical implementation tips and best practices to ensure smooth and successful deployments. Whether you're a developer, DevOps engineer, or just curious about software deployment, this guide will help you understand the key concepts and make informed decisions.
🔔 Subscribe for more videos: Check Out My Links ⬇️
www.imrancodes.com/contact
Download 3 FREE Ebooks 🔗
www.imrancodes.com/ebooks#newsletter
Repository
github.com/...
🔔 Subscribe for more videos: Check Out My Links ⬇️
www.imrancodes.com/contact
Download 3 FREE Ebooks 🔗
www.imrancodes.com/ebooks#newsletter
Repository
github.com/...
Просмотров: 29
Видео
The Most Important Coding Principle You’ve Never Heard Of
Просмотров 39День назад
Are you ready to level up your development skills and take the next step towards becoming a Senior Developer? Understanding and implementing SOLID principles is a crucial milestone in your journey. In this video, we'll break down the five SOLID principles: Dependency Inversion Principle (DIP) Discover how these principles can help you write cleaner, more maintainable, and scalable code. We'll d...
The Interface Segregation Principle Explained
Просмотров 2014 дней назад
Are you ready to level up your development skills and take the next step towards becoming a Senior Developer? Understanding and implementing SOLID principles is a crucial milestone in your journey. In this video, we'll break down the five SOLID principles: Interface Segregation Principle (ISP) Discover how these principles can help you write cleaner, more maintainable, and scalable code. We'll ...
What is the Liskov Substitution Principle?
Просмотров 3721 день назад
Are you ready to level up your development skills and take the next step towards becoming a Senior Developer? Understanding and implementing SOLID principles is a crucial milestone in your journey. In this video, we'll break down the five SOLID principles: Liskov Substitution Principle (LSP) Discover how these principles can help you write cleaner, more maintainable, and scalable code. We'll di...
What is the Open/Closed Principle?
Просмотров 65Месяц назад
Are you ready to level up your development skills and take the next step towards becoming a Senior Developer? Understanding and implementing SOLID principles is a crucial milestone in your journey. In this video, we'll break down the five SOLID principles: Open/Closed Principle (OCP) Discover how these principles can help you write cleaner, more maintainable, and scalable code. We'll dive into ...
Why You Don't Understand Single Responsibility Principle (SRP)
Просмотров 201Месяц назад
Are you ready to level up your development skills and take the next step towards becoming a Senior Developer? Understanding and implementing SOLID principles is a crucial milestone in your journey. In this video, we'll break down the five SOLID principles: Single Responsibility Principle (SRP) Discover how these principles can help you write cleaner, more maintainable, and scalable code. We'll ...
What are SOLID Principles? Learn Why They're Essential for Becoming a Senior Dev!
Просмотров 155Месяц назад
Are you ready to level up your development skills and take the next step towards becoming a Senior Developer? Understanding and implementing SOLID principles is a crucial milestone in your journey. In this video, we'll break down the five SOLID principles: Single Responsibility Principle (SRP) Open/Closed Principle (OCP) Liskov Substitution Principle (LSP) Interface Segregation Principle (ISP) ...
3. Creating our Header component
Просмотров 29Месяц назад
Welcome to this step-by-step tutorial on building a multi-brand e-commerce site using Next.js 14 and TypeScript! 🎉 In this video, you'll learn how to: Creating our Header component 🔗 Resources Mentioned: Next.js Documentation: nextjs.org/docs TypeScript Documentation: www.typescriptlang.org/docs/ Vercel Deployment: vercel.com/docs 🛠️ Tools Used: Next.js 14 TypeScript Vercel Don't forget to like...
8. How to Fetch Data in Next.js 14 and Implement CRUD Methods with Optimization Tips
Просмотров 70Месяц назад
Welcome to this step-by-step tutorial on building a multi-brand e-commerce site using Next.js 14 and TypeScript! 🎉 In this video, you'll learn how to: How To Fetch Data In NextJS 14 And Other CRUD Methods - Optimization Tips 🔗 Resources Mentioned: Next.js Documentation: nextjs.org/docs TypeScript Documentation: www.typescriptlang.org/docs/ Vercel Deployment: vercel.com/docs 🛠️ Tools Used: Next....
6. Create The Login Page
Просмотров 43Месяц назад
Welcome to this step-by-step tutorial on building a multi-brand e-commerce site using Next.js 14 and TypeScript! 🎉 In this video, you'll learn how to: Create The Login Page 🔗 Resources Mentioned: Next.js Documentation: nextjs.org/docs TypeScript Documentation: www.typescriptlang.org/docs/ Vercel Deployment: vercel.com/docs 🛠️ Tools Used: Next.js 14 TypeScript Vercel Don't forget to like, commen...
7. Creating The Product Grid Component
Просмотров 24Месяц назад
Welcome to this step-by-step tutorial on building a multi-brand e-commerce site using Next.js 14 and TypeScript! 🎉 In this video, you'll learn how to: Creating The Product Grid Component 🔗 Resources Mentioned: Next.js Documentation: nextjs.org/docs TypeScript Documentation: www.typescriptlang.org/docs/ Vercel Deployment: vercel.com/docs 🛠️ Tools Used: Next.js 14 TypeScript Vercel Don't forget t...
10. Deployment For Both Multi-Brand Sites To Vercel
Просмотров 20Месяц назад
Welcome to this step-by-step tutorial on building a multi-brand e-commerce site using Next.js 14 and TypeScript! 🎉 In this video, you'll learn how to: Deployment for both sites to vercel 🔗 Resources Mentioned: Next.js Documentation: nextjs.org/docs TypeScript Documentation: www.typescriptlang.org/docs/ Vercel Deployment: vercel.com/docs 🛠️ Tools Used: Next.js 14 TypeScript Vercel Don't forget t...
5. How to Create a Custom Error Page in Next.js 14
Просмотров 299Месяц назад
Welcome to this step-by-step tutorial on building a multi-brand e-commerce site using Next.js 14 and TypeScript! 🎉 In this video, you'll learn how to: Create Custom Error Page For NextJS 14 🔗 Resources Mentioned: Next.js Documentation: nextjs.org/docs TypeScript Documentation: www.typescriptlang.org/docs/ Vercel Deployment: vercel.com/docs 🛠️ Tools Used: Next.js 14 TypeScript Vercel Don't forge...
9. Mastering Multi-Brand Themes & ENV Variables in Next.js 14 with TypeScript
Просмотров 77Месяц назад
Welcome to this step-by-step tutorial on building a multi-brand e-commerce site using Next.js 14 and TypeScript! 🎉 In this video, you'll learn how to: Implementing Multi-Brand Theme, Functionality And ENV Variables 🔗 Resources Mentioned: Next.js Documentation: nextjs.org/docs TypeScript Documentation: www.typescriptlang.org/docs/ Vercel Deployment: vercel.com/docs 🛠️ Tools Used: Next.js 14 Type...
4. How to Create a Custom 404 Not Found Page in Next.js 14
Просмотров 238Месяц назад
Welcome to this step-by-step tutorial on building a multi-brand e-commerce site using Next.js 14 and TypeScript! 🎉 In this video, you'll learn how to: Create Custom Not Found Page For NextJS 14 🔗 Resources Mentioned: Next.js Documentation: nextjs.org/docs TypeScript Documentation: www.typescriptlang.org/docs/ Vercel Deployment: vercel.com/docs 🛠️ Tools Used: Next.js 14 TypeScript Vercel Don't f...
1. Intro - Create a Multi-Brand Site with Next.js 14 & TypeScript
Просмотров 77Месяц назад
1. Intro - Create a Multi-Brand Site with Next.js 14 & TypeScript
2. Install The Project And Boilerplate
Просмотров 26Месяц назад
2. Install The Project And Boilerplate
How to build a Multi-Brand Site with Next.js in 2024
Просмотров 374Месяц назад
How to build a Multi-Brand Site with Next.js in 2024
How to Set Up and Optimize Your Project: ESLint, Husky, Semver, and Conventional Commits
Просмотров 3302 месяца назад
How to Set Up and Optimize Your Project: ESLint, Husky, Semver, and Conventional Commits
10. Configuring And Setting Up ESlint
Просмотров 2054 месяца назад
10. Configuring And Setting Up ESlint
4. Rollup JS setup and build the component library
Просмотров 2754 месяца назад
4. Rollup JS setup and build the component library
6. Installed babel and passed unit tests
Просмотров 544 месяца назад
6. Installed babel and passed unit tests
8. Install storybook to visually see your components
Просмотров 954 месяца назад
8. Install storybook to visually see your components
11. Conventional Commits and Best Practices
Просмотров 534 месяца назад
11. Conventional Commits and Best Practices
5. Install jest and react testing library and run our first test
Просмотров 1044 месяца назад
5. Install jest and react testing library and run our first test
7. Installed styled components and added unit tests to test the styling
Просмотров 604 месяца назад
7. Installed styled components and added unit tests to test the styling
9. Installed husky and added pre commit checks
Просмотров 1104 месяца назад
9. Installed husky and added pre commit checks
How to assign roles to user like admin or normal user & protect our routes accordingly & restrict the users who are not admin to not to able to delete or update the database?
You will need to store in your db and have maybe firestore rules to allow if user role is equal to admin. You could also do this in your db or both. So the crud methods can have a guard clause in there at the start if user.role !== admin don’t allow (update function for example)
This is so good to know.
Glad it helped!
Hello, great content! Do you know if it's possible to verify the email before registering the user in Firebase Authentication, to avoid bots from creating a lot of accounts without using real emails?
I have implemented a check I believe in the playlist that check if they have verified I think but if not then you can do that. It’s been a while since I worked on this but have a look at the docs
Explained very well❤❤
Thank you very much!
nice tutorial with great ui. ithink it would be resonable to extend the topic about custom user verification
Thanks for your comment. Maybe will do at some point in the future
same apporach on next js 14 ap router ?
Yes why not keep it simple. Or you can use middleware on serverside to determine the branch based on the URL in a switch statement and then pass the props to client and handle brand that way
I tried using PHP but I couldn't. Luckily, I found this playlist. Thank you.
Glad it helped!
Hey imran i want to do this for a local business website.. i want to pull states with state id from google sheets.. how can i do it
I did this years ago but use the Google sheets api to fetch the sheet data, the sheet should have an id or something. In your app make the get or post call and the you will get the sheet data in json. Once you have that transform the data and render it in your application
Is this best approach used in production? And what about if some one wants to use tools like sanity, Google analytics.. so on. Will you still recommend to use react or next.js?
In this scenario yes. You have rollup as your module bundler then the benefits of react to have the modularity and ability to use props. There’s no need for next js and that has an express server which you don’t need. With a component library you can host on npm and import into whatever project you are using. Can be next react or anything else then you can add tools such as sanity in your project.
What if I only want to install one ui component of the published package?
You can import the component that you want to use and with the tree shaking functionality that is the best approach. So you would need to install the entire library to do this
@@imrancodes Thank you
Thank you very much. You saved me
No problem glad it helped
It's very simple. But how to build an application when the settings come from the server?
Create a middleware in the server that handles the brand and then pass it down to the client
I try doing this on my own but I got lost. Finally, I saw this.
Thanks for watching!
great tutorial, keep going
Thanks, will do!
very nice and informative video. Thanks
Thanks a lot
awsome video bro keep up the good work 🥰
Appreciate it!
just what i needed. still getting comfortable but looking forward for more.
Thank you and keep it up
Thank you so much bro, that really help me alot!.
No worries. Glad it helped
is this also applicable for Redux toolkit?
Yes I believe its been a while since I used it
it is server side component how we get the id with client site component?? next/router is not working on client side
you would get the id from the page component and pass it down to the client component as props. const { id } = context.params;
@@imrancodes yes I did it yesterday it took my one whole day to find :) ✌️
Congratulations, Imran ... Really appreciate for this video tutorial, brother 🙂🙂🤝🤝🇻🇪🇻🇪
Thank you so much Javier. Hopefully it helps you out
Keep it up mate, there really not many people who is talking about these sort of things. Followed on LN, maybe we could chat a bit in the future if you will have some time. Thank you.
Yeah for sure. Thanks for the nice comment and will try and keep more vids coming
Thanks i've been looking for a video as clear and well explained as this one.
Glad it helped!
This was a great practical tutorial, thank you!
Glad you enjoyed it!
Is restfulapi used to handle the crud? Please tell
Its restful
Thanks for this. Short and straightforward.
Glad it was helpful!
Great Tutorial
Glad it was helpful!
I have a very big challenge understanding the concept of redux.
Hopefully this video helps you get a better understanding. You just need to build projects with it and stay persistent and you will eventually understand it
Please make a turbo repo version with all those libraries tutorial~~
I will have a look at this
@@imrancodes Thanks!!!
How can I update a user's email who authenticates only with phone authentication. I've been at this for 2 days now. Today is the deadline (Take home coding test from an interview). updateEmail function says the given sign-in provider is disabled. But I have Phone, Email/password (including passwordless authentication) and Google all enabled. The docs do not cover this case and all the solutions I found do not work. This interview too will be a failure at this rate 😭
Hey, I don’t have access to a computer as I am on my holidays but I cannot imagine it being too difficult. Your task should give you guides or information on where the docs are at least. Worst case if you cannot find them then just copy what I have done for the web and say that you improvised as there is no documentation. This will show initiative and show that you found an alternative solution as opposed to doing nothing
wow short & clear of meaning , easy to understand <3
Glad it was helpful!
Imran, I wonder why RUclips underestimated your channel and didn't populate your videos. Such a nice tutorial! Maybe you should do more MERN projects or Nextjs projects compared to other topics. People have been searching for it recently.
Thank you, I will bare that in mind and glad it helped
EDIT: Or actually, you could just make a separate component that uses useState then pass in the ref as props. Is that verbose? ok. this depends on use case tho e.g., if you wanted a counter to count how many characters is entered into a text input (some like "100/2000") then you'd need to use useState right? Sorry if you already said that in the video and I missed it.
It depends on many scenarios. I would say choose what you think is best for your situation
In the scenario you described I would just use the input element props to handle this behaviour of a character count or you can use a form library like react hook form or last resort you can use use state but this will re render your component each time a character is typed
How would you extend this code to store all the data in say “formData” to send to backend for example?
You would just store the key and values in an object and then send that wherever you need to. This can be done with state or ref. Also react hook form is good when working with form data
Very Informative!!
Glad it was helpful!
hii imran sir i need your help kindly tell me what is : LOCAL_VERSION GH_TOKEN CURRENT_VERSION and how can i implement them
These are environment variables that you can save in the circle ci project I recommend doing the release and publish to npm jobs manually
bro whenever i downloads the image it is not downloaded as image fromat but something different
Make sure the url is the same as what you have in the firebase storage so just console.log the url that you are downloading. Also make sure you are uploading correctly as well so again check the video where I do that and check your firebase storage
Hello! Can you make a video on how to change all firebase error pages on custom ones?
If you look at video 10 where I log out the errors you can build an error page that you redirect to and output the Errored message. Then you can create a back button to the previous page and a link to the home page
amazing
Thanks
The eslint that I installed doesn't have a JSON config format option, and by default it creates a config file with MJS format, how about that?
This should be fine just follow along the steps. You can always change your eslint config file when it’s created
Promo'SM
Hi, My email is getting updated but i am not receiving any email in my old email id that my email was changed to xyz as in the firebase console we have a option to customize Email address change ,I want to know how to trigger Email address change Template . I basically mean that if someone change their email then they should be informed that their email has been changed
I think I have done that already in the playlist somewhere have a look through and you will find it
It should be there in the firebase console templates
thanks, i realy appreciate the formation 👍👍👍
Glad it was helpful!
this API working for search movies ?
No it is not but if you follow along you can create the api yourself and use it :)
very nice video.. please make more videos on Hooks with these type of real working scenarios. it really helps to understand concepts in one go. Keep growing. Subscribed!
Thank you, I will
I have a question before I start watch this play list, would you teach me in this playlist how I can display "add a new hotel" just to admins and hide it from everyone else ?
You can watch this and to hide only for admins you can watch this video in my firebase auth playlist ruclips.net/video/Gq8lOUi1jyw/видео.html
@@imrancodes Thank you imran :>
Can you change the input value using ref? Im using a modal which takes data. And set it to input values. Can you do Titleref.vurrent.value = data
Yes, you can change the input value using a ref in React. Here's how you can do it: Create a Ref: First, create a ref using useRef() hook or React.createRef(). Attach Ref to Input: Attach the ref to the input element you want to manipulate. Access and Modify Value: Access the current property of the ref to manipulate the input value. Example: import React, { useRef } from 'react'; function MyComponent() { const inputRef = useRef(); // Function to update input value const updateInputValue = (newValue) => { inputRef.current.value = newValue; }; return ( <div> <input type="text" ref={inputRef} /> <button onClick={() => updateInputValue('New Value')}> Set Value </button> </div> ); } In the provided example, inputRef is a ref that points to the input element. The updateInputValue function updates the input value by accessing inputRef.current.value and assigning a new value to it. Remember to handle validations etc I hope this helps :)
@@imrancodes thank you very much. Subbed ❤
may Allah bless you, thanks a lot
You too and thanks for watching!
My updateTodo(Completing/checking off you completed an item) is not working. there is issue saying the isCompleted "React does not recognize the `isCompleted` prop on a DOM element" also I get an error code 404 whenever I click on an item. Do you know what the issue would be? The deleteTodo works perfectly fine so I assume its not a backend issue.
Hey, It might be a few things: 1. Make sure you are passing in the props to the TodoItem component and console log to see if they are showing up in the todoItem component. 2. I would copy and paste the code in the repo to see if that works as there might be a typo I would just console.log everywhere to see if everything is being passed through correctly and you will find the issue
can you add database connectivity and storing that data there and then fetching it
View Full stack Mern app in description with MongoDB