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

) Introduction (What is Todoist?), tech stack talk.
) Showing the final application (with dark mode!).
) Installing create react app.
) Clearing out what we don't need from create react app.
) Let's get building our components!.
) Installing packages using Yarn.
) Building the Header component.
) Building the Content component.
) Building the Sidebar component.
) Adding Firebase.
) Adding our React hooks (useState, useEffect).
) Adding our function helpers.
) Back to adding more to our React hooks (useTasks, useProjects).
) Building the Tasks component.
) Building the Checkbox component.
) Styling our application.
) Adding Context to our application.
) Building the Projects component.
) Adding a composite index in Firebase.
) Building the IndividualProject component.
) Adding the IndividualProject component to the Projects component.
) Adding the AddProject component & modifying our context.
) Adding Projects to Firebase.
) Adding Show Confirm Delete to our Stylesheet.
) Building out our Tasks component.
) Adding Main Content to our Stylesheet.
) Adding Tasks to our Stylesheet.
) Adding Context to our Sidebar for Projects.
) Building our AddProject component.
) Adding Add Task to our Stylesheet.
) Building the AddTask component (using moment JS).
) Adding to our Tasks component.
) Adding to our AddTask component.
) Adding more AddTask styles to our Stylesheet.
) Adding TaskDate to our Stylesheet.
) Adding ProjectOverlay to our Stylesheet.
) Building out the ProjectOverlay.
) Adding the ProjectOverlay to AddTask.
) Building our the TaskDate component.
) Adding to the Header component (dark mode implementation).
) Adding our CSS for dark mode.
) Adding quick add task to the Header component.
) Some quick manual testing.
) User testing for responsive design.
) Starting to look at accessibility.
) Modifying our App.scss to make our components more accessible.
) Making the Checkbox component more accessible.
) Making the AddTask component more accessible.
) Making the IndividualProject component more accessible.
) Making the Sidebar component more accessible.
) Making the ProjectOverlay more accessible.
) Making the TaskDate more accessible.
) Looking at tabIndex for improved accessibly.
) Adding aria-label and tabIndex to our components.
) Analysing our accessibility score using Lighthouse.
) Dev complete; testing starts with React Testing Library.
) Testing the Checkbox component.
) Modifying package.json for test coverage and reporting.
) Testing the App component.
) Testing the AddTask component.
) Testing the ProjectOverlay component.
) Testing the Projects component.
) Testing the IndividualProject component.
) Testing the Tasks component.
) Testing the AddProject component.
) Testing the Header component.
) Testing the Sidebar component.
) Signing out! I hope you enjoyed this video :).