What You will Learn?

• 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