DEV Community

The Nerdy Dev
The Nerdy Dev

Posted on

Let's learn React by building this awesome project

In this video, we will make a full Exercise Tracker Application using React.js and React Router. The features of the application that we will be building in this course are:

  1. Fetching the list of exercises from a local JSON Server
  2. Create a New Exercise
  3. Update an already existing exercise
  4. Delete an existing exercise
  5. Toggling the completion status of an exercise and showing it in visually.
  6. Creating a filter component to filter the exercises based on the completion status - pending, all, completed. and more.

โฑ Timestamps โฑ

๐Ÿ“Œ let's start (0:00)
๐Ÿ“Œ demo of our exercise tracker project (0:20)
๐Ÿ“Œ a quick glance over the starter files (1:37)
๐Ÿ“Œ setting up our starter project and installation (2:00)
๐Ÿ“Œ whiteboard : deciding about the components for our project (2:15)
๐Ÿ“Œ starting the project (7:20)
๐Ÿ“Œ installation of json-server package & running it (7:36)
๐Ÿ“Œ creating our first page component - homepage (9:05)
๐Ÿ“Œ bringing our first hook into action - useState (9:23)
๐Ÿ“Œ fetching data from our data source using another hook - useEffect (10:25)
๐Ÿ“Œ installation and setting up react-router (13:50)
๐Ÿ“Œ defining our first route : home page route(14:57)
๐Ÿ“Œ seeing our fetched exercises in react-dev-tools extension (17:16)
๐Ÿ“Œ starting with exercise list component (18:00)
๐Ÿ“Œ passing our fetched exercises to the exercises list component as a prop (21:10)
๐Ÿ“Œ creating an exercise item component (22:16)
๐Ÿ“Œ using the exercise item in exercises list and passing exercise as a prop (25:15)
๐Ÿ“Œ starting with delete exercise functionality (28:28)
๐Ÿ“Œ whiteboard: understanding the process for deletion of item (29:35)
๐Ÿ“Œ defining our delete exercise handler in home page component (32:16)
๐Ÿ“Œ passing a pointer to our delete exercise handler as a prop to exercises list component (33:29)
๐Ÿ“Œ forwarding the pointer to delete exercise handler as a prop further down to exercise item component (33:29)
๐Ÿ“Œ ensuring the deletion of item gets reflected in our local JSON store (35:20)
๐Ÿ“Œ starting with toggling the exercise completion status functionality (37:10)
๐Ÿ“Œ defining our toggle exercise completion handler in home page component (38:29)
๐Ÿ“Œ forwarding a pointer to our toggle exercise handler as a prop to exercises list component (41:45)
๐Ÿ“Œ forwarding the pointer to our toggle exercise handler further down to our exercise item component (42:57)
๐Ÿ“Œ invoking our toggle exercise completion handler via the on toggle exercise prop (43:08)
๐Ÿ“Œ ensuring the toggling of the completion status gets reflected in our local JSON store (45:34)
๐Ÿ“Œ laying out our create exercise form (49:44)
๐Ÿ“Œ handling form submission for creating a new exercise (58:07)
๐Ÿ“Œ using the useHistory hook to push the user back to home page on exercise creation (1:02:50)
๐Ÿ“Œ creating the navbar component (1:04:37)
๐Ÿ“Œ starting with edit exercise component (1:07:50)
๐Ÿ“Œ creating a route for the edit exercise component using dynamic segment (1:09:20)
๐Ÿ“Œ adding a router link for editing an exercise for an exercise item (1:09:53)
๐Ÿ“Œ extracting the id of an exercise from the router params using the useParams hook (1:11:30)
๐Ÿ“Œ using the id that we get from router params to load the exercise in our edit exercise component (1:13:19)
๐Ÿ“Œ handling form submission for updating the populated exercise (1:16:41)
๐Ÿ“Œ filtering the exercises based on their completion status (1:20:57)
๐Ÿ“Œ creating our base filter component (1:21:40)
๐Ÿ“Œ setting up a current filter state in our home page component (1:25:20)
๐Ÿ“Œ creating an update exercise handler in our home page component (1:25:55)
๐Ÿ“Œ passing a pointer to our update exercise handler down to base filter (1:26:56)
๐Ÿ“Œ passing the current filter down to base filter (1:27:42)
๐Ÿ“Œ using the current filter prop in base filter component to give extra styles to our navlinks (1:28:26)
๐Ÿ“Œ using the filter to show exercises based on their completion status on home page (1:29:32)
๐Ÿ“Œ end of the project (1:31:20)

๐Ÿ“‚๐Ÿ“‚ Starter Files:
https://github.com/The-Nerdy-Dev/Starter-Files-React-Exercise-Tracker-Project

๐Ÿ“‚๐Ÿ“‚ Component Styles:
https://github.com/The-Nerdy-Dev/CSS-Files-For-React-Exercise-Tracker-Project

๐Ÿ“‚๐Ÿ“‚ Course Links:
Complete Code - https://github.com/The-Nerdy-Dev
Visual Studio Code - https://code.visualstudio.com
Git - https://git-scm.com/downloads


Support my channel:
๐Ÿ’œ Join the Discord community ๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ฆ: https://discord.gg/fgbtN2a
๐Ÿ’œ One time donations via PayPal
Thank you! ๐Ÿ™


Follow me on:
๐Ÿ‘‰ Twitter: https://twitter.com/The_Nerdy_Dev
๐Ÿ‘‰ My Blog: https://the-nerdy-dev.com

Top comments (0)