Loading...

United Kingdom

✏️ REACT TUTORIAL - BUILDING TODOIST - CUSTOM HOOKS, CONTEXT, FIREBASE & REACT TESTING LIBRARY, SCSS

8,429 views

Loading...

Loading...

Rating is available when the video has been rented.
This feature is not available right now. Please try again later.
Published on Aug 26, 2019

In this video, 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. I will also be making sure that this application is fully responsive. In this video I'll also show you how to use Lighthouse (Chrome extension) to make sure your website is fully accessible by getting all accessibility features integrated into our application; this is hugely important!

We will start by initialising the application using create-react-app as our base, and then start building out the application using React (Custom Hooks, Context), Firebase & React Testing Library (unit & integration testing)! I'm super excited to build this React application (did I mention we will be adding dark mode?!), so let's get going!

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

🙌 Support my videos via Patreon: https://www.patreon.com/karlhadwen

--

⏳ Timeline
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 :)

--

✅ Subscribe: https://bit.ly/CognitiveSurge

🐤 Twitter: https://twitter.com/karlhadwen

--

🖥️ Technologies used
Languages/Libraries: React (create react app), React Context, React Hooks, React Testing Library, SCSS, BEM, JavaScript
Workflow: VSCode (GitHub pro theme), iTerm2, Lighthouse (for accessibility testing)
--

☕ Show your support by buying me a coffee!

PayPal: http://bit.ly/2xKQWqf

Monzo: https://monzo.me/karlhadwen

Loading...

Advertisement
When autoplay is enabled, a suggested video will automatically play next.

Up next


to add this to Watch Later

Add to

Loading playlists...