• Portfolio Builder

    Add a beautiful production ready login experience to your portfolio. This will change your profile in the market as a professional looking for a job!

  • Next-JS Experience

    Learn the best framework for building production scale ready apps; NEXT JS. NEXT is the basic requirement for many jobs and in this course, you'll learn all about it

  • Build Great Forms

    In this course, using FORMIK and YUP, I will show how to build great forms and add great validation without the tears. Forms can be very tricky, in 4 hours I'll show you how to master them!

Build a Gorgeous App

In this course you will learn how to build apps with dark mode and how to design the pages so the layout is perfect for the user.
Enroll now!

Master form validation

In the course you'll learn how to build a form that has very powerful validation very simply. You will learn a lot about YUP and FORMIK
Enroll now!

Build beautiful animations

In this course you will learn how to build beautiful artsy animations between the different states of the page. Not too overpowering and not boring!
Enroll now!

What will you learn?

In more than 4 hours you will learn a ton of knowledge about building React apps. Not any apps; intermediate production ready React apps.

  • Build forms with Formik and YUP. Master form validation and building forms.

  • Learn the basics about NEXTJS and building production ready apps

  • Learn how to use Chakra-UI. One of the best accessible UI libraries to build theme-able apps

  • Learn about page layout and responsiveness design

  • Most importantly, master building React apps with TypeScript

Course curriculum

  • 1

    Introduction to the codebase and project setup

    • Introduction to the monorepo structure

    • Installing dependencies and getting the backend running

    • Setting up the frontend from a template

    • Codebase Tour
  • 2

    Making the login page

    • Making the login page layout

    • Add a basic form heading and text

    • Making the first basic form

  • 3

    Building a custom input field

    • 04 - Integrating with Chakra-UI

    • Integrating with Chakra-ui

    • Allowing customisation of the input field

    • Making the InputFiled component

    • Polishing the InputField Component
  • 4

    Building the login experience

    • Using it all together

    • Making the login screen functional

    • Handling login errors

    • Giving feedback to the user

    • Minor cleanups before we move on
  • 5

    Making the forgot password section

    • Making the basic structure

    • Making the form functional
  • 6

    Making the new account section

    • Basic form layout

    • Form validation

    • Form submission, errors and feedback
  • 7

    Connecting all the sections together

    • Using url state to manage sections

    • Improving the code with typescript

    • Adding a back button

    • Adding animations
  • 8

    Polishing and responsiveness

    • Adding polish to the design

    • Making the page responsive

What do they say?

YouTube users feedback

“As a self taught C# MVC developer, I was contemplating learning React. This is a very clear overview of the basics with an explanation of the terminology and process flow. I'm looking forward to the next lesson.”

Matthew Paine

“You are a great teacher bro, You give clear explanations with clear examples”

Ntumwa rogers

“You're a great teacher Mahmoud. Thank you! ”

Andrew Venson

“keep going Mohmoud I am a react developer and really you can take this channel to the next level :)”

Mekawys World

“You're a super duper great teacher, thank you for those videos!”

iukh uihk

“This is the kind of tutorial what i was locking for, thanks a lot.”

Mehedi Hasan

“My Man! This is a great video! The explanation is thorough and clear with no filler. Good mic levels.”

Brad Hamilton

Meet your Instructor

Mahmoud Shehata

Founder and Teacher

Hi! My name is Mahmoud Shehata. I am a front-end web-developer and a teacher. I have 2 years of experience teaching on Udemy. Now I'm looking forward to simplify and demystify FrontEnd for the community that taught me so much! I'm the founder and main course teacher at easyreact.com I aspire to simplify React and help you land a better job, have a better future!

Have questions?

I have answers

  • What do I need to know before I take this course?

    You need to know basics of React. If you have a couple of simple projects under your belt that would be handy. If you have experience with NextJS this course is perfect for you. However, this course is not for absolute beginners.

  • What support will I get from the teacher?

    You get access to the course discussions and you can ask me any questions your want. If you are keen for more, you can always reach to me on my email [email protected] and I'll be ready with answers

  • What if I don't like the course?

    No problems at all. You can always get a full refund in the first 30 days. No questions asked, just email me and I'll get you sorted in less than a day!

  • Do I need to know TypeScript to take this course?

    Having experience with TypeScript you would really benefit from this. If you wanna get a gateway introduction to TypeScript in the React context, then yeah this course will be okay. But at least you need to know what TS...

  • Do I need to know NextJS before I take this course?

    Actually not at all. NextJS is a framework built on top of React. It's very handy and well sought after in the market. You can learn that through the course. No previous experience is needed at all.