Intermediate React Tutorial - Todoist Clone (with Firebase, Custom Hooks, SCSS, React Testing)

Channel:

freeCodeCamp.org

Subscribers:

10,700,000

Published on August 27, 2019 12:17:33 PM ● Video Link: https://www.youtube.com/watch?v=hT3j87FMR6M

Duration: 7:38:39

155,460 views

4,001

In this course, we're going to be creating the popular Todoist list application (https://todoist.com) from scratch using React (Custom Hooks, Context), Firebase & React Testing Library (unit & integration testing). In addition to the latter technologies, we will be styling the application using SCSS (CSS) and following the BEM naming methodology.

We'll make sure that the application is fully responsive. You will see how to use Lighthouse (Chrome extension) to make sure your website is fully accessible by getting all accessibility features integrated into our application.

💻 Github repo: https://github.com/karlhadwen/todoist (don't forget, you can contribute to this project (highly encouraged!))

🎥 Video by Karl Hadwen. Check out his YouTube channel: https://youtube.com/c/cognitivesurge
🐦 Karl on Twitter: @karlhadwen

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction (What is Todoist?), tech stack talk
⌨️ (0:02:26) Showing the final application (with dark mode!)
⌨️ (0:05:00) Installing create react app
⌨️ (0:07:15) Clearing out what we don't need from create react app
⌨️ (0:10:57) Let's get building our components!
⌨️ (0:18:00) Installing packages using Yarn
⌨️ (0:18:22) Building the Header component
⌨️ (0:19:57) Building the Content component
⌨️ (0:20:37) Building the Sidebar component
⌨️ (0:28:27) Adding Firebase
⌨️ (0:40:32) Adding our React hooks (useState, useEffect)
⌨️ (0:49:57) Adding our function helpers
⌨️ (0:53:07) Back to adding more to our React hooks (useTasks, useProjects)
⌨️ (1:06:22) Building the Tasks component
⌨️ (1:08:42) Building the Checkbox component
⌨️ (1:13:10) Styling our application
⌨️ (1:35:02) Adding Context to our application
⌨️ (1:48:26) Building the Projects component
⌨️ (1:55:25) Adding a composite index in Firebase
⌨️ (1:57:21) Building the IndividualProject component
⌨️ (2:06:21) Adding the IndividualProject component to the Projects component
⌨️ (2:08:54) Adding the AddProject component & modifying our context
⌨️ (2:10:54) Adding Projects to Firebase
⌨️ (2:11:49) Adding Show Confirm Delete to our Stylesheet
⌨️ (2:14:04) Building out our Tasks component
⌨️ (2:23:14) Adding Main Content to our Stylesheet
⌨️ (2:23:49) Adding Tasks to our Stylesheet
⌨️ (2:28:24) Adding Context to our Sidebar for Projects
⌨️ (2:35:19) Building our AddProject component
⌨️ (2:44:44) Adding Add Task to our Stylesheet
⌨️ (2:46:44) Building the AddTask component (using moment JS)
⌨️ (2:59:20) Adding to our Tasks component
⌨️ (3:00:29) Adding to our AddTask component
⌨️ (3:07:44) Adding more AddTask styles to our Stylesheet
⌨️ (3:12:00) Adding TaskDate to our Stylesheet
⌨️ (3:13:00) Adding ProjectOverlay to our Stylesheet
⌨️ (3:15:05) Building out the ProjectOverlay
⌨️ (3:19:10) Adding the ProjectOverlay to AddTask
⌨️ (3:22:25) Building our the TaskDate component
⌨️ (3:26:00) Adding to the Header component (dark mode implementation)
⌨️ (3:29:35) Adding our CSS for dark mode
⌨️ (3:29:50) Adding quick add task to the Header component
⌨️ (3:42:25) Some quick manual testing
⌨️ (3:43:45) User testing for responsive design
⌨️ (3:45:10) Starting to look at accessibility
⌨️ (3:55:45) Modifying our App.scss to make our components more accessible
⌨️ (3:59:30) Making the Checkbox component more accessible
⌨️ (4:00:25) Making the AddTask component more accessible
⌨️ (4:01:45) Making the IndividualProject component more accessible
⌨️ (4:02:20) Making the Sidebar component more accessible
⌨️ (4:09:20) Making the ProjectOverlay more accessible
⌨️ (4:11:45) Making the TaskDate more accessible
⌨️ (4:18:00) Looking at tabIndex for improved accessibly
⌨️ (4:21:15) Adding aria-label and tabIndex to our components
⌨️ (4:34:05) Analysing our accessibility score using Lighthouse
⌨️ (4:39:45) Dev complete; testing starts with React Testing Library
⌨️ (4:39:46) Testing the Checkbox component
⌨️ (4:52:30) Modifying package.json for test coverage and reporting
⌨️ (5:00:40) Testing the App component
⌨️ (5:11:45) Testing the AddTask component
⌨️ (6:11:38) Testing the ProjectOverlay component
⌨️ (6:19:43) Testing the Projects component
⌨️ (6:26:58) Testing the IndividualProject component
⌨️ (6:43:33) Testing the Tasks component
⌨️ (6:52:03) Testing the AddProject component
⌨️ (7:06:13) Testing the Header component
⌨️ (7:20:02) Testing the Sidebar component
⌨️ (7:32:18) Signing out! I hope you enjoyed this video :)