React project tutorial | Ego | Inspired by Addy Osmani

Code Repository:
https://github.com/AhsanAyaz/ego-issu...

This video is inspired by Addy Osmani's following LinkedIn Post:
  / addyosmani_motivation-productivity-growth-...  
The video covers creating a grid of different elements in a fresh React app, created with Vite. The elements are rendered using the useState() hook in React and the business logic of the app for whenever the ego is selected, the rest of the elements should be unchecked is handled using a useEffect. In this video, not only we see how to work with React in terms of problem solving, but also how to create a really good user experience including CSS animations using animista, and making the app mobile responsive.
In the video you'll also learn how to deploy a React app to GitHub Pages using GitHub Actions!

Timeline:
0:00:00 - Introduction
0:00:08 - Creating the React App
0:01:22 - Creating the items array
0:06:51 - Conditionally render checkmark
0:07:48 - Toggle items functionality
0:11:49 - Unselecting checkboxes when ego is selected
0:13:40 - Better UX with CSS Animations and Animista
0:16:00 - Deploying React app to GitHub Pages
0:19:20 - Adding a heading
0:20:46 - SEO and social preview
0:22:26 - Fix mobile responsiveness


Hashtags:
#react #reactproject #reactprojects #reacttutorial #reactapp #reactgithub #reactdeployment #reactgithubpages