Overview

Create a fully functional Todoist clone application from scratch using React, Firebase, and React Testing Library in this comprehensive 8-hour tutorial. Learn to implement custom hooks, context, and SCSS styling while following the BEM naming methodology. Develop a responsive design, integrate accessibility features, and conduct unit and integration testing. Cover essential topics including component building, Firebase integration, state management with hooks, styling, context implementation, and thorough testing of all components. Gain hands-on experience with popular web development tools and best practices, ensuring a deep understanding of modern React application development.

Syllabus

) 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 :).