Muslim Helalee
Muslim Helalee
  • Видео 248
  • Просмотров 41 532
Issue Tracker App for Absolute Beginners - Project #3 - React from Confusion to Clarity
Hi Everyone! #typescript #tailwindcss #react #reactfrontend #reactrouter
Welcome to the 3rd app of this tutorial series. In this video, we will create an Issue Tracker. The app has 3 pages, an all issues page, an open issues page and a closed issues page. We will start coding the app using Vanilla Typescript and style it with Tailwind CSS. Then we will code the app with React and implement the app routing with React Router. In the third and final iteration of the app, we will implement routing with TanStack.
*-*-*-*-* Learning Objectives
- Learning to code a feature rich app using vanilla technologies
- Understanding the differences in approach between imperative and declarative programming
-...
Просмотров: 1 011

Видео

Conditional Rendering in React - React from Confusion to Clarity
Просмотров 25721 день назад
Hi Everyone! Conditional rendering allows us to build dynamic user interfaces that change based on state, props, data availability, or any condition. Whether it’s toggling UI elements, showing different layouts for logged-in vs. logged-out users, or loading different components based on application state, understanding conditional rendering is essential for creating interactive and robust React...
User Profile App - Project #2 - React from Confusion to Clarity
Просмотров 231Месяц назад
Hi Everyone! This is a simple user profile app built with React, TypeScript, and Tailwind CSS. The goal of this project is to help you understand how to update the UI of an app and how to handle external communication of React components. *-*-*-*-* Example App - Simple user profile app that fetches user data from JSON placeholder API. *-*-*-*-* Source Code github.com/ArnaCode/React-Typescript-T...
Shopping Cart App - Project #1 - React from Confusion to Clarity
Просмотров 505Месяц назад
Hi Everyone! This is a simple shopping cart project built with React, TypeScript, and Tailwind CSS. The goal of this project is to help you understand the differences between state and props in React while creating a functional shopping cart application. *-*-*-*-* Example App - Simple shopping cart app that showcases the differences between state and props. *-*-*-*-* Source Code github.com/Arna...
useRef vs. useState - React from Confusion to Clarity
Просмотров 173Месяц назад
Hi Everyone! In this video, we are going to code a simple Stopwatch app to showcase the differences between managing states that result in re-renders and persist data without causing re-renders. *-*-*-*-* Example App - Simple Stopwatch app to showcase when to re-render the UI based of changes in the state of the app. *-*-*-*-* Source Code github.com/ArnaCode/useRef-vs-useState-React-from-Confus...
useEffect vs. useState - React from Confusion to Clarity
Просмотров 143Месяц назад
Hi Everyone! In this video, we are going to take a look at what state changes and side effects are, what are the differences between them, how to implement state and side effects professionally. *-*-*-*-* Example App - During this video, we will work with a simple app that displays user information from a third party API endpoint. *-*-*-*-* Source Code github.com/ArnaCode/useEffect-vs-useState-...
React's Synthetic Events Explained - React from Confusion to Clarity
Просмотров 202Месяц назад
Hi Everyone! In this video, we are going to take a look at 6 different examples, from beginner to advanced, in order to understand React's Synthetic Events with Typescript. *-*-*-*-* Examples - Handling Button Click Event - Input Change Event - Handling Form Submit Event - Mouse Enter and Leave Events - Custom Input Component with Event Forwarding - Drag and Drop Event Handling *-*-*-*-* Source...
What is the Virtual DOM - React from Confusion to Clarity
Просмотров 92Месяц назад
Hi Everyone! In this video, we are going to take a look at 6 different examples in order to understand React's Virtual DOM. *-*-*-*-* Examples - Understanding DOM Updates - Conditional Rendering - Highlighting Diff Mechanism - Updating Complex State - Understanding Reconciliation - Dynamic List Rendering with Conditional Styling *-*-*-*-* Source Code github.com/ArnaCode/What-is-the-Virtual-DOM-...
The Truth About JSX - React from Confusion to Clarity
Просмотров 157Месяц назад
Hi Everyone! In this video, we are going to take a look at 10 different examples in order to understand JSX. *-*-*-*-* Examples - JSX Transpilation to React.createElement - Nesting Elements - Passing Props - Functional Component with JSX - Conditional Rendering - Rendering Lists - Handling Events - Using Fragments - Inline Styling - Controlled Component (Form Input) *-*-*-*-* Source Code github...
New Course Announcement - Tailwind CSS - The Practical Bootcamp in 2024
Просмотров 2123 месяца назад
Hi Everyone! #tailwindcss I am super excited to let all of you know that I just released my Tailwind CSS - The Practical Bootcamp in 2024. Coupon Links: 30 Day (14.99 USD) www.udemy.com/course/tailwind-css-the-practical-bootcamp/?couponCode=A8DBB9E96AE1D7B3E779 5 Day (9.99 USD) www.udemy.com/course/tailwind-css-the-practical-bootcamp/?couponCode=ED9AAEE3BC2836E461DD Bootcamp Source Code and Doc...
States - Tailwind CSS for Devs in a Hurry
Просмотров 3723 месяца назад
Hi everyone, In this video, I will show you how to get started with States in Tailwind CSS as fast as possible. *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Support me by buying me a coffee www.buymeacoffee.com/arnacode *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Support me by becoming a patron www.patreon.com/ArnaCode *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Source Code GitHub github.com/ArnaCode/States-Tailwind-CS...
Grid Layout - Tailwind CSS for Devs in a Hurry
Просмотров 8004 месяца назад
Hi everyone, In this video, I will show you how to get started with Grid Layout in Tailwind CSS as fast as possible. *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Support me by buying me a coffee www.buymeacoffee.com/arnacode *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Support me by becoming a patron www.patreon.com/ArnaCode *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Source Code GitHub github.com/ArnaCode/Grid-Layout-T...
Flexbox Layout - Tailwind CSS for Devs in a Hurry
Просмотров 1744 месяца назад
Hi everyone, In this video, I will show you how to get started with Flexbox Layout in Tailwind CSS as fast as possible. *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Support me by buying me a coffee www.buymeacoffee.com/arnacode *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Support me by becoming a patron www.patreon.com/ArnaCode *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Source Code GitHub github.com/ArnaCode/Flexbox-La...
Scroll Snap - Tailwind CSS for Devs in a Hurry
Просмотров 4954 месяца назад
Hi everyone, In this quick video, I will show you how to get started with Scroll Snap in Tailwind CSS as fast as possible. *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Support me by buying me a coffee www.buymeacoffee.com/arnacode *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Support me by becoming a patron www.patreon.com/ArnaCode *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Source Code GitHub github.com/ArnaCode/Scroll-...
Tables - Tailwind CSS for Devs in a Hurry
Просмотров 2504 месяца назад
Hi everyone, In this quick video, I will show you how to get started with Tables in Tailwind CSS as fast as possible. *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Support me by buying me a coffee www.buymeacoffee.com/arnacode *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Support me by becoming a patron www.patreon.com/ArnaCode *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Source Code GitHub github.com/ArnaCode/Tables-Tailw...
Variables - Tailwind CSS for Devs in a Hurry
Просмотров 2,3 тыс.5 месяцев назад
Variables - Tailwind CSS for Devs in a Hurry
Dark Mode - Tailwind CSS for Devs in a Hurry
Просмотров 1,4 тыс.5 месяцев назад
Dark Mode - Tailwind CSS for Devs in a Hurry
Animations - Tailwind CSS for Devs in a Hurry
Просмотров 1 тыс.5 месяцев назад
Animations - Tailwind CSS for Devs in a Hurry
Transitions - Tailwind CSS for Devs in a Hurry
Просмотров 8055 месяцев назад
Transitions - Tailwind CSS for Devs in a Hurry
Transforms - Tailwind CSS for Devs in a Hurry
Просмотров 1566 месяцев назад
Transforms - Tailwind CSS for Devs in a Hurry
Columns - Tailwind CSS for Devs in a Hurry
Просмотров 3436 месяцев назад
Columns - Tailwind CSS for Devs in a Hurry
Positions - Tailwind CSS for Devs in a Hurry
Просмотров 2976 месяцев назад
Positions - Tailwind CSS for Devs in a Hurry
Spacing - Tailwind CSS for Devs in a Hurry
Просмотров 3656 месяцев назад
Spacing - Tailwind CSS for Devs in a Hurry
Typescript for Beginners - Type Narrowing Revisited - Lesson 34
Просмотров 5457 месяцев назад
Typescript for Beginners - Type Narrowing Revisited - Lesson 34
Typescript for Beginners - Generic Type Aliases - Lesson 33
Просмотров 937 месяцев назад
Typescript for Beginners - Generic Type Aliases - Lesson 33
Typescript for Beginners - Generic Arrays - Lesson 32
Просмотров 577 месяцев назад
Typescript for Beginners - Generic Arrays - Lesson 32
Typescript for Beginners - Getting Started with Generics - Lesson 31
Просмотров 2247 месяцев назад
Typescript for Beginners - Getting Started with Generics - Lesson 31
Typescript for Beginners - Class Inheritance - Lesson 30
Просмотров 777 месяцев назад
Typescript for Beginners - Class Inheritance - Lesson 30
Typescript for Beginners - Getter and Setter Methods - Lesson 29
Просмотров 1158 месяцев назад
Typescript for Beginners - Getter and Setter Methods - Lesson 29
Typescript for Beginners - Parameter Properties - Lesson 28
Просмотров 448 месяцев назад
Typescript for Beginners - Parameter Properties - Lesson 28

Комментарии

  • @PrMovies0
    @PrMovies0 День назад

    *Can tell which file/folder icons theme that your are using it in this wonderful tutorial video please tell me 😢*

    • @MuslimHelalee
      @MuslimHelalee День назад

      The extension is called icons and the author is "Mhammed Talhaouy."

  • @Sarajboos12
    @Sarajboos12 2 дня назад

    bro please build app like omegle

  • @FrontendNerd-lg3oh
    @FrontendNerd-lg3oh 3 дня назад

    whats next brother ?

    • @MuslimHelalee
      @MuslimHelalee 3 дня назад

      Typescript, React, Next and MERN. I am also working on a new series called "Zero to Interview Ready in JavaScript, Typescript, Python, Go and Rust," and I will start uploading the videos in the next few days. I hope tomorrow will be the first video. This series will be the biggest series anyone has done on the topic of Software Engineering and interview Preparation on RUclips and will be running for a long time with several hundred videos.

  • @Nadim166
    @Nadim166 3 дня назад

    Thanks

  • @kim92se64
    @kim92se64 4 дня назад

    First time, I understand the main idea how Typescript deal with Generics Declaration will be generic and Execution will be specific Awesome ! Regards Khan Imran from Pakistan

  • @rashmiranjannayak8638
    @rashmiranjannayak8638 29 дней назад

    is it going to be a A-Z react course or we have to wait for that ?

    • @MuslimHelalee
      @MuslimHelalee 27 дней назад

      The aim of this playlist is as the title suggests. I want to simplify such an unnecessarily complicated technology.

  • @Steven-r5m8y
    @Steven-r5m8y Месяц назад

    Great content, as always! Could you help me with something unrelated: My OKX wallet holds some USDT, and I have the seed phrase. (alarm fetch churn bridge exercise tape speak race clerk couch crater letter). Could you explain how to move them to Binance?

    • @MuslimHelalee
      @MuslimHelalee Месяц назад

      I'm not familiar with cryptocurrency wallet transfers, but I recommend keeping your seed phrase private, consulting OKX's official guide on transferring USDT, and ensuring the network matches your Binance deposit address (e.g., ERC-20 or BEP-20) to avoid losing funds.

  • @tamerahmed9860
    @tamerahmed9860 Месяц назад

    Thank you

  • @MAHADEVUNIMADHUBABU
    @MAHADEVUNIMADHUBABU Месяц назад

    U made learning react easy, Thanks man

  • @MAHADEVUNIMADHUBABU
    @MAHADEVUNIMADHUBABU Месяц назад

    Thanks man, a good one

    • @MuslimHelalee
      @MuslimHelalee Месяц назад

      You're welcome!

    • @MAHADEVUNIMADHUBABU
      @MAHADEVUNIMADHUBABU Месяц назад

      @@MuslimHelalee can you place all the htm files in some github repo, i mean those which you are copying from

    • @MuslimHelalee
      @MuslimHelalee Месяц назад

      The file is already in the repo and is called "starter-markup.html". It is in the main directory of the project committed to GitHub. Here is the link github.com/ArnaCode/React-Typescript-Tailwind-Shopping-Cart-App1-React-from-Confusion-to-Clarity/blob/main/starter-markup.html

  • @mohaymenul-islam
    @mohaymenul-islam Месяц назад

    Excellent 👌

  • @salsalazar7646
    @salsalazar7646 Месяц назад

    i love ur way of teaching really simple and clear. nice vid

  • @tamerahmed9860
    @tamerahmed9860 Месяц назад

    Thank you!

  • @abhishekpratap05
    @abhishekpratap05 Месяц назад

    I knew how jsx works and createElement but its good to see the components side by side, it reminds you why changing one props trigger re-render all the children components when you look at createElement element.

    • @MuslimHelalee
      @MuslimHelalee Месяц назад

      I am glad you found this video useful.

  • @tamerahmed9860
    @tamerahmed9860 2 месяца назад

    I am looking forward to your react & NextJs course ! Thank you

    • @MuslimHelalee
      @MuslimHelalee 2 месяца назад

      You are welcome! Happy coding and learning

  • @rashmiranjannayak8638
    @rashmiranjannayak8638 2 месяца назад

    Completed Thread. Now looking forward to phoxul website after that will continue project number 2.

    • @MuslimHelalee
      @MuslimHelalee 2 месяца назад

      Congrats on coming this far. See you there

  • @rashmiranjannayak8638
    @rashmiranjannayak8638 2 месяца назад

    Man you are a gem.

    • @MuslimHelalee
      @MuslimHelalee 2 месяца назад

      I am glad you like the projects.

  • @adegunloyerebecca2671
    @adegunloyerebecca2671 2 месяца назад

    @MuslimHelalee We reaching out to discuss an exciting business proposition regarding your Udemy course. Our aim is to enhance the visibility of your course, increase sales, expand your student audience, and cultivate positive reviews. We are eager to explore potential collaboration opportunities with you to achieve these objectives. Looking forward to the possibility of working together.

  • @rashmiranjannayak8638
    @rashmiranjannayak8638 2 месяца назад

    Complete the whole footer section html and css before moving into the lecture :) felling good.

  • @rashmiranjannayak8638
    @rashmiranjannayak8638 2 месяца назад

    From the udemy course i am following this automatic grid responsiveness over media queries . Day by day my fear about css is disappearing. Thanks you .

  • @rashmiranjannayak8638
    @rashmiranjannayak8638 2 месяца назад

    Great lecture learn about live bug fixing :)

  • @rashmiranjannayak8638
    @rashmiranjannayak8638 2 месяца назад

    Another day, another win! Learned a lot of cool stuff today.

  • @rashmiranjannayak8638
    @rashmiranjannayak8638 2 месяца назад

    Thank you for this great video! As someone with a background in JavaScript, I was able to handle js parts on my own, but I learned a lot from your explanations. I feel much more confident now in understanding how design concepts work. Keep up the amazing work!

  • @rashmiranjannayak8638
    @rashmiranjannayak8638 2 месяца назад

    At 13:59 why we are using the position absolute property and it is relative to whom ?

    • @MuslimHelalee
      @MuslimHelalee 2 месяца назад

      Hi, the reason for position absolute is to position them freely without having to think about the existence of other elements. And it is relative to the body element.

  • @rashmiranjannayak8638
    @rashmiranjannayak8638 2 месяца назад

    Beautifully explained. Thank you!

  • @sheikhquadeer5965
    @sheikhquadeer5965 2 месяца назад

    this course is useless when you dont show a single form styling in your entire course

    • @MuslimHelalee
      @MuslimHelalee 2 месяца назад

      Hi there, there actually a very good form styled in the first project. I have also added some exciting challenges for forms.

    • @sheikhquadeer5965
      @sheikhquadeer5965 2 месяца назад

      @@MuslimHelalee sorry and tx for reply i think you should have atleast one section on form building

    • @MuslimHelalee
      @MuslimHelalee 2 месяца назад

      I will update the course and add a component for some sort of a form. Until then you can always tackle forms from a project standpoint.

  • @dpno
    @dpno 2 месяца назад

    Great. Wish you all the best.

  • @JohnMurphy04f
    @JohnMurphy04f 2 месяца назад

    Just purchased the course i love your html css course. What will be your next course?

  • @philipsalvacion
    @philipsalvacion 3 месяца назад

    Just for the improvement of your channel, you should know that devs want a direct to the point information. This video should focus on using columns only, not wasting any more seconds adding backgrounds, padding or whatever.

    • @MuslimHelalee
      @MuslimHelalee 2 месяца назад

      Thank you vey much for your feedback. I will keep it in mind.🙂

  • @crismosquera5656
    @crismosquera5656 3 месяца назад

    I Want to say u hi from germany u course css modern flex and grid ist the Best course in the World ❤

  • @adrian-4767
    @adrian-4767 3 месяца назад

    Muslim Helalee great course bro, off topic please don't use roids we need you to live long and healthy, those substances shorten your lifespan. Thanks and keep up the good work!!!!

    • @MuslimHelalee
      @MuslimHelalee 3 месяца назад

      Thank you very much for your concern. I am NOT using any steroids or anything or protein, I have just gotten fat. I am trying to lose weight but it is very difficult to do when you are sitting all day long. Thanks anyway and I hope you enjoy the Bootcamp.

  • @ahmadumar9387
    @ahmadumar9387 3 месяца назад

    many thanks

  • @theintjengineer
    @theintjengineer 3 месяца назад

    Just bought it. Look good😊. Cheers.

  • @tamerahmed9860
    @tamerahmed9860 3 месяца назад

    Great efforts! Thank you 🙏

  • @AvyIbra
    @AvyIbra 3 месяца назад

    Great great job🎉

  • @bostongreen1629
    @bostongreen1629 3 месяца назад

    Beautiful with a real example. Thank you for making it easy and simple

  • @ahmadumar9387
    @ahmadumar9387 3 месяца назад

    but my one million question is, do you plan to combine tailwind with alpineJS as well??? because its a dream team together :)

  • @ahmadumar9387
    @ahmadumar9387 3 месяца назад

    salamulaikum senior hilali we have the end of september... and i'm really hurrying right now 🤣

    • @MuslimHelalee
      @MuslimHelalee 3 месяца назад

      It is very close to being completed. Thank you very much for your patience.

  • @tamerahmed9860
    @tamerahmed9860 3 месяца назад

    Great efforts! Thank you

  • @adrian-4767
    @adrian-4767 3 месяца назад

    Muslim Helalee when will you publish your TailwindCSS course on Udemy?

    • @MuslimHelalee
      @MuslimHelalee 3 месяца назад

      HI there, I am currently editing the videos. As soon as this process is done, I will release the course. I planning a late September release. Thank you for your patience and interest.

  • @ibyzrulez
    @ibyzrulez 4 месяца назад

    Salam brother, just wanted to comment to say In Sha Allah it works out and to give a bit of support.

  • @adrian-4767
    @adrian-4767 4 месяца назад

    Muslim Helalee when will you publish your Tailwind CSS course on Udemy?

    • @MuslimHelalee
      @MuslimHelalee 4 месяца назад

      Hi, Thank you very much for your interest in the course. The course is completed. The only thing remaining is editing the videos. I used to have a video editor and designer, now I do everything myself. That is why my courses take a bit longer than usual. I am hoping for a late September release, hopefully.

  • @majdevelops
    @majdevelops 4 месяца назад

    P.S. You look very similar to a friend of mine from Turkey. The whole time I was going through your lessons, it felt like my friend was teaching me web development. Lovely experience overall.

    • @MuslimHelalee
      @MuslimHelalee 4 месяца назад

      That's awesome! I am thrilled to see you are enjoying your learning.

  • @majdevelops
    @majdevelops 4 месяца назад

    Hi. I'm going through your Udemy masterclass on Building Responsive-Adaptive Websites..... So far it's been great and wonderful. I love your style of teaching, the whiteboarding and then the coding aspect really help drive home the concepts really well.

    • @MuslimHelalee
      @MuslimHelalee 4 месяца назад

      Great to hear! Happy coding and learning

  • @tamerahmed9860
    @tamerahmed9860 4 месяца назад

    Thank you 🙏

  • @focusontruth81
    @focusontruth81 4 месяца назад

    The best ideas and good explanation

  • @tamerahmed9860
    @tamerahmed9860 4 месяца назад

    Thank you