Completed
) Introduction (What is Todoist?), tech stack talk
Class Central Classrooms beta
YouTube playlists curated by Class Central.
Classroom Contents
Intermediate React Tutorial - Todoist Clone (with Firebase, Custom Hooks, SCSS, React Testing)
Automatically move to the next video in the Classroom when playback concludes
- 1 ) Introduction (What is Todoist?), tech stack talk
- 2 ) Showing the final application (with dark mode!)
- 3 ) Installing create react app
- 4 ) Clearing out what we don't need from create react app
- 5 ) Let's get building our components!
- 6 ) Installing packages using Yarn
- 7 ) Building the Header component
- 8 ) Building the Content component
- 9 ) Building the Sidebar component
- 10 ) Adding Firebase
- 11 ) Adding our React hooks (useState, useEffect)
- 12 ) Adding our function helpers
- 13 ) Back to adding more to our React hooks (useTasks, useProjects)
- 14 ) Building the Tasks component
- 15 ) Building the Checkbox component
- 16 ) Styling our application
- 17 ) Adding Context to our application
- 18 ) Building the Projects component
- 19 ) Adding a composite index in Firebase
- 20 ) Building the IndividualProject component
- 21 ) Adding the IndividualProject component to the Projects component
- 22 ) Adding the AddProject component & modifying our context
- 23 ) Adding Projects to Firebase
- 24 ) Adding Show Confirm Delete to our Stylesheet
- 25 ) Building out our Tasks component
- 26 ) Adding Main Content to our Stylesheet
- 27 ) Adding Tasks to our Stylesheet
- 28 ) Adding Context to our Sidebar for Projects
- 29 ) Building our AddProject component
- 30 ) Adding Add Task to our Stylesheet
- 31 ) Building the AddTask component (using moment JS)
- 32 ) Adding to our Tasks component
- 33 ) Adding to our AddTask component
- 34 ) Adding more AddTask styles to our Stylesheet
- 35 ) Adding TaskDate to our Stylesheet
- 36 ) Adding ProjectOverlay to our Stylesheet
- 37 ) Building out the ProjectOverlay
- 38 ) Adding the ProjectOverlay to AddTask
- 39 ) Building our the TaskDate component
- 40 ) Adding to the Header component (dark mode implementation)
- 41 ) Adding our CSS for dark mode
- 42 ) Adding quick add task to the Header component
- 43 ) Some quick manual testing
- 44 ) User testing for responsive design
- 45 ) Starting to look at accessibility
- 46 ) Modifying our App.scss to make our components more accessible
- 47 ) Making the Checkbox component more accessible
- 48 ) Making the AddTask component more accessible
- 49 ) Making the IndividualProject component more accessible
- 50 ) Making the Sidebar component more accessible
- 51 ) Making the ProjectOverlay more accessible
- 52 ) Making the TaskDate more accessible
- 53 ) Looking at tabIndex for improved accessibly
- 54 ) Adding aria-label and tabIndex to our components
- 55 ) Analysing our accessibility score using Lighthouse
- 56 ) Dev complete; testing starts with React Testing Library
- 57 ) Testing the Checkbox component
- 58 ) Modifying package.json for test coverage and reporting
- 59 ) Testing the App component
- 60 ) Testing the AddTask component
- 61 ) Testing the ProjectOverlay component
- 62 ) Testing the Projects component
- 63 ) Testing the IndividualProject component
- 64 ) Testing the Tasks component
- 65 ) Testing the AddProject component
- 66 ) Testing the Header component
- 67 ) Testing the Sidebar component
- 68 ) Signing out! I hope you enjoyed this video :)
