- 36
- 182 774
Fullstack Simplified
India
เข้าร่วมเมื่อ 6 ก.ค. 2021
Fullstack Simplified created by Prasoon Goswami, is all about sharing full-stack development skills and techniques from scratch efficiently and practically. Fullstack Simplified has got all the tools you need, to learn the newest and most popular technologies to convert you from a no stack to a full stack developer. Fullstack Simplified also deep dives into advanced topics using the latest best practices for you seasoned web developers.
I started Fullstack Simplified in order to share my passion for full-stack development, and do what I truly love. Share my knowledge and inspire new web and mobile developers. I have been in love with full-stack development since 2017 when I did my first internship as an android developer. Really excited to share my experience with you guys.
Thank you for watching!
I started Fullstack Simplified in order to share my passion for full-stack development, and do what I truly love. Share my knowledge and inspire new web and mobile developers. I have been in love with full-stack development since 2017 when I did my first internship as an android developer. Really excited to share my experience with you guys.
Thank you for watching!
How to Implement Dark Mode in React Like a Pro
This video is all about how to use implement dark mode based on user as well system preferences in a React web app using material-ui 5, typescript, following best practices and industry standard coding patterns.
📚 Materials/References:
- React Context Tutorial: th-cam.com/video/DQxQQydJg3k/w-d-xo.html
- React useRef Tutorial: th-cam.com/video/gwFfzIaKnAU/w-d-xo.html
- Material UI: mui.com/material-ui/getting-started/
- Material UI Dark Mode: mui.com/material-ui/customization/dark-mode/
- Vite: vitejs.dev
💻 Topics Covered:
- Vite + React setup via CLI
- Setting up Material UI
- Creating custom themes
- React Context
- React Ref
🌎 Find Me Here:
My Website: prasoon.me
LinkedIn: www.linkedin.com/in/prosoon-goswami
Twitter: PraSoonGosWami4
GitHub: github.com/FullstackSimplified
Instagram: fullstack_simplified
📚 Materials/References:
- React Context Tutorial: th-cam.com/video/DQxQQydJg3k/w-d-xo.html
- React useRef Tutorial: th-cam.com/video/gwFfzIaKnAU/w-d-xo.html
- Material UI: mui.com/material-ui/getting-started/
- Material UI Dark Mode: mui.com/material-ui/customization/dark-mode/
- Vite: vitejs.dev
💻 Topics Covered:
- Vite + React setup via CLI
- Setting up Material UI
- Creating custom themes
- React Context
- React Ref
🌎 Find Me Here:
My Website: prasoon.me
LinkedIn: www.linkedin.com/in/prosoon-goswami
Twitter: PraSoonGosWami4
GitHub: github.com/FullstackSimplified
Instagram: fullstack_simplified
มุมมอง: 2 932
วีดีโอ
JavaScript Interview Questions 2023 - Polyfills
มุมมอง 520ปีที่แล้ว
JavaScript Interview Questions 2023 - Polyfills
React useEffect: Everything you should know
มุมมอง 545ปีที่แล้ว
React useEffect: Everything you should know
Build custom elements with Web Components using vanilla Javascript
มุมมอง 8K2 ปีที่แล้ว
Build custom elements with Web Components using vanilla Javascript
Firebase Hosting using GitHub Actions - React | CI/CD
มุมมอง 15K2 ปีที่แล้ว
Firebase Hosting using GitHub Actions - React | CI/CD
React Router v6 | Public and Protected Routes
มุมมอง 33K2 ปีที่แล้ว
React Router v6 | Public and Protected Routes
Firebase v9 Authentication in React | Google & GitHub Sign In
มุมมอง 4.3K2 ปีที่แล้ว
Firebase v9 Authentication in React | Google & GitHub Sign In
Firebase v9 Storage in React | Upload Files to Cloud
มุมมอง 30K3 ปีที่แล้ว
Firebase v9 Storage in React | Upload Files to Cloud
Firebase v9 Authentication in React | Email-Password Auth | Forgot Password
มุมมอง 20K3 ปีที่แล้ว
Firebase v9 Authentication in React | Email-Password Auth | Forgot Password
React Context API | Manage Global State
มุมมอง 2.4K3 ปีที่แล้ว
React Context API | Manage Global State
JavaScript Array Methods You Must Use (with Examples)
มุมมอง 3753 ปีที่แล้ว
JavaScript Array Methods You Must Use (with Examples)
Firebase v8 Storage in React | Upload Files to Cloud
มุมมอง 2.9K3 ปีที่แล้ว
Firebase v8 Storage in React | Upload Files to Cloud
Everything about React Portals in 10 minutes
มุมมอง 12K3 ปีที่แล้ว
Everything about React Portals in 10 minutes
Learn React Custom Hooks in 7 minutes | Create useFetch hook
มุมมอง 1.2K3 ปีที่แล้ว
Learn React Custom Hooks in 7 minutes | Create useFetch hook
Data fetching in React using Suspense | React Concurrent Mode
มุมมอง 1.7K3 ปีที่แล้ว
Data fetching in React using Suspense | React Concurrent Mode
5 Must Have Visual Studio Code Extensions - 2021
มุมมอง 3753 ปีที่แล้ว
5 Must Have Visual Studio Code Extensions - 2021
Deploying React Web App on Firebase - Completely free | Easy Hosting
มุมมอง 6K3 ปีที่แล้ว
Deploying React Web App on Firebase - Completely free | Easy Hosting
Building forms in React with Material-UI, Formik and Yup
มุมมอง 10K3 ปีที่แล้ว
Building forms in React with Material-UI, Formik and Yup
puedes compartir el codigo ?
You are a life savior.
Thanks a lot!!
are you copying the web dev simplified ???
Yes
from where I will get source code?
How to add custom color for light and dark theme, instead of default color
Commendable 👏🏻
Thank you
Thank you soooooooooooo MUCH!!❤
You’re welcome! Glad you liked it
web dev simplified - indian version?
Glad you consider the same. Trying to make things easier to understand.
Great tutorial! Thanks! You really helped me out with this stuff... ☺☺
Glad it helped.
usecase 2 and 2 not same?
How can we add environment variables?.. please reply
Finally, I learned how to implement a theme using MUI. Thanks a lot, buddy.
Glad it helped!
Good video man!
Glad you liked it..
what to input here if the repo is inside an organization ? ? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository)
What about showing and not showing Navbar?
You can do the similar thing, use ternary to show/hide navbar based on auth state
thank yoou
You're welcome!
thanks a lot for covering this complex subject, it works flawlessly
Really glad it helped
Thank you !!! it was relly clear , a could deployed , great !!!
Glad it helped
one of the best video of amaizng explanantion, I dont commit normally but you deserve.
Thanks a lot. Really glad you liked it
Amazing explanation 👏
Glad it helped. Thanks for watching
Great job, Rajat!
Thanks a lot. 🤩🤩
Thank You, Keep doing Indian
Thanks for watching. Do checkout my latest video on the channel as well on react dark mode - th-cam.com/video/VwvXjZIo7ys/w-d-xo.htmlsi=w3jhLV6RUt4WkCst
Bah darun Khub bhalo..... Congratulations 👌👌👌👌
Really appreciate how you explain things in a simple way. Loved it❤
Thanks for watching.
Nicely Explained
Thanks! Glad it helped
Great content . Amazing video and explanation 👏👏😊😊
Glad it helped
Prosoon Goswami just brewed up a React storm in his latest TH-cam masterpiece, "Master React Dark Mode: Unraveling Usee & System Theme Preferences in Material UI-5." 🌌 It's the tech fiesta for computer engineers, IT sorcerers, and CS-IT engineering mavens. Pro tip: Watching this video is like adding rocket fuel to your React journey-strap in and enjoy the ride! 🚀 Don't be shy; hit play, drop a like, and join the cool gang by subscribing to Prosoon's TH-cam channel. Let's turn this coding party into a rave! 🎉💻 #ReactDarkMode #MaterialUI5 #ReactTutorial #CodeMasters #ITDevelopment #CSStudents #TechGenius #SubscribeNow #CodingMagic #ReactThemePreferences
Glad you liked it
Amazing I got to learn alot from you!
Awesome, thank you!
what about the "secret api keys" how to handle them? do you also push them to the remote repo ?? I'm getting FirebaseError: Firebase: Error (auth/invalid-api-key).
For api keys you need to create your own. Ideally it is not recommended to push the secret api keys to remote git repo. You can add the particular file to .gitignore and it won’t push it to the remote repo
great explaination..
Thanks for watching. Glad this helped
A very clear explaination of useRef and forwardRef. Thanks. {2023-11-09}, {2024-03-22}
Glad you liked it. Thanks for watching
how do icheck token id in firebase console
I don’t think you can check for token id in the firebase console. They do have a function which you can use in your code to generate token id. You can read more about it here - firebase.google.com/docs/auth/admin/verify-id-tokens#web
Los indios van demasiado
Really nice video. But I have a problem. Right after newly registering, I can' see dislayName. Any suggestion?
Try checking the user call response by logging it to the console if displayName for the logged in account is available.
this is not working for me import ReactDOM from "react-dom"; import { AiOutlineClose } from "react-icons/ai"; const Modal = ({ onClose, isOpen, children }) => { return ReactDOM.createPortal( <> {isOpen && ( <> <div className="z-50 m-auto relative min-h-[200px] max-w-[80%] p-4 bg-white"> <div className="flex justify-end"> <AiOutlineClose onClick={onClose} className="text-2xl" /> </div> </div> <div onClick={onClose} className="absolute top-0 backdrop-blur z-40 h-screen w-screen" > {children} </div> </> )} </>, document.getElementById("portal") ); }; export default Modal;
very clean presentation and explanation. thank you very much
Glad it was helpful!
The easiest to understand explanation of this I've seen so far. Thank you 🙏🏽
Glad it was helpful!
React Portals, beautifully explained. Thanks. {2023-07-24}
Glad this helped
thank you for the easy-to-understand tutorial, bro!
Glad it was helpful!
noob, you can make it deploy in direct push , name: Firebase CI on: push: branches: master jobs: build: runs-on: ubuntu-latest strategy: matrix: node-version: [15.x] steps: - uses: actions/checkout@v2 - name: Use Node.js version ${{ matrix.node-version }} uses: actions/setup-node@v2 with: node-version: ${{ matrix.node-version }} - run: npm i - run: npm install -g firebase-tools - run: CI=false npm run build - name: Archive Build uses: actions/upload-artifact@v2 with: name: build path: build deploy: name: Deploy needs: build runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Download Build uses: actions/download-artifact@v2 with: name: build path: build - name: Deploy to Firebase uses: w9jds/firebase-action@master with: args: deploy --only hosting env: FIREBASE_TOKEN: "${{ secrets.FIREBASE_TOKEN }}"
Awesome! Thanks for sharing
you rock man....keep it up....your code helped alot
Awesome, thank you!
Thanks a lot for making this video, Its so precise and bulk with information 🎉🎉🥳🥳👍👍.
Glad you liked it
akhhhh tfooooooooooooo. stupid.
it's rare for me to upvote a tutorial video... even rarer for me to then comment on it... this is epic...👍
Thanks a lot for watching. Glad you liked it
Holistic, cohhesive and comprehensive tutorial. Thank you Prasoon.
Thanks alot for your reply. Glad it helped
Use fetch use krne pr vo length ka issue de raha h pata nahi kyo.... Data bhi fetch horra pr vo leanght vali error resolve nahi ho rahi
Can you please share your code snippet so that i can understand the error better
Thanks men for the firebase setup! great job
hey I want to store two images so how can i achieve that please guide me
You can select 2 images from the file picker by making it accept multiple images. Then you can loop over the selected images and call the upload function for all the selected images. Or if you want to select one photo at a time then you can open the file picker twice and upload the selected photos one by one using the same upload function
@@FullstackSimplified Actually I was planning to create separate file picker for both images like profileImage and CoverImage. So will I have to create separate handleImageChange Functions ? Or it can be done in one function itself?
You can use the same function for both. Only thing you need to take care is defining different firebase path/location while uploading the photo
@@FullstackSimplified Thanks!
position : fixed
Position fixed would add the modal to the under the same patent which we do not want portal doesn't only gives us styling options but also provides us the way to render elements out side the nested dom tree.
good explantion
Glad you liked it. Thanks for watching