Project overview

Ui design

Form Wrapper and Shake animation

Authentication container

Authentication status using context

Authentication User name and password

Authentication Login Logout and Try again

Setting up the React Development Env

Calculate the Loan Amount

Add State to all components

Display monthly payments and Alerts

Main component and Ui design

Design the Controller component

Change temperature using the React useState Hook

Create a Alert component

Automatically close alert with delay using time trigger

Introduction

UI Structure and main component

Speech Narrator UI Component

Text splitter and Highlighted Text

Start Pause and Rate

Ui

Implement Lazy load

Get post

App UI design

Install and use React Styled Components

Add New Note

Delete Note

Create Random Note types

Design the Space ENV

Space ship component

Earth and Moon Components

Launch and Land the Ship

Change the Spaceship in to a Penguin

Create a nav component

Create a Nav Item component

Style the Nav using React Styled Components

Show and Hide the navbar using React useState and useEffect

Open and Close the Navbar using React useState and useEffec

Show Active nav item and change page title using React useState

UPDATE - Adding pages to navigate to

Form UI style

Create a React FormGroup Component

Working with the form group component

Clear and Refocus the input field

Install and use Animated Text component

Create the Slider Component

useState hook to manipulate the Circle using the slider Component

Create Title component and general styling in React

Learn how useState works and manipulate name and date

Card design

Install and use React Icons to the project

React useState to like on click and double Click

Create a Blog component

Dark mode using useContext

Dialog Box component UI design

Hello Dialog Box component

Unsubscribe Dialog Box component

Bounce animation effect

UI planning and Design using Components

Login Container design using Styled Components

Animate using Styled Components

Components Planing

Create a Expenses Form Component

Create a Expenses List Component

Style the budget using Styled components

Add state to all components

Save and Load data from Local Storage

Create a List Item Component

Clear local storage and add new expenses

Handle all input and submission

Handle Delete one expense from storage and UI

Handle Clear all expenses from storage and UI

Add unique Id

Calculate the total expenses and economies

Add budget using useState , useEffect and useRef

Display all expenses

Handle Edit one expense from storage and UI

Add Alerts

Create a React Button components

Get PostUsersComments using React useState and useEffect Hooks

Form Ui

Input fields individual validation

Handle inputs and Registrations

Form Submission and Validation

Phone Book main UI

Create a Contact List React Components

Create a Contact React Components

Display all contacts from the Contacts Database

Sort Contact A-Z and Z-A

Create the Toggle Search and Filter Contacts Components

Search contact

Create a Popup component

Trigger a popup and close it

Time Triggered popup

UI design and Autofocus using useRef and useEffect

Import data from JSON file

Create a Contact component

Filer contacts

UI Design using FormGroup Components

Get values using useState hook

Create a component to calc the interest

Calc the compounded interest

Planing the components layout for the UI

Task tracker style using Styled components

Input Task Component

Create and Add a New Task

Complete and Delete Task

Ui design and input outo focus with useRef and useEffect

Create a Progressbar component

Add multiple Progress Bars using map method

Manipulate each Progress bars data with useState

Random Progress Bar data with useEffect

Create the UI

Create Lock screen

Creating the Lock screen state

Lock the screen

Toggle Lock and Unlock Screen

Create the search component and general styling

Show search bar

Auto focus on the input using useRef Hook

Using events and functions

Create the Courses component

Project structure and UI design

Create a Course component and design

Change Course appearance depending on its currency

Create a Database for all Courses

Currencies Database and converter Buttons

Convert the Currencies with the React useContext Hook

Design the Start Menu

Create Units Card Component