Todoist Clone with Firebase, Custom Hooks, SCSS, React Testing

Todoist Clone with Firebase, Custom Hooks, SCSS, React Testing

Learn to build the popular Todoist list application 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.

In this course, 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.

We'll make sure that the application is fully responsive. You will see how to use Lighthouse (Chrome extension) to make sure your website is fully accessible by getting all accessibility features integrated into our application.

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

⭐️ Course Contents ⭐️ ⌨️ (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 :)

reactjs firebase javascript testing

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

What is firebase,firebase bangla tutorial.

LIKE | COMMENT | SHARE | SUBSCRIBE The Firebase Realtime Database is a cloud-hosted NoSQL database that lets you store and sync data between your users in re...

JavaScript Testing - Unit Tests, Integration Tests & e2e Tests

JavaScript testing - i.e. unit tests, integration tests and e2e (UI) tests - can be intimidating. It shouldn't be! This video guides you through all the basics (including the "Why"?) of JavaScript testing. JavaScript Testing Introduction Tutorial - Unit Tests, Integration Tests & e2e Tests. Master JavaScript testing now!

Testing Microservices Applications

The shift towards microservices and modular applications makes testing more important and more challenging at the same time. Learn more here.

How to Do API Testing?

API endpoint when you send the get request to that URL it returns the JSON response. In this article, I am going to use postman assertions for all the examples since it is the most popular tool. But this article is not intended only for the postman tool.

Firebase Introduction with C#

LIKE | COMMENT | SHARE | SUBSCRIBE Firebase is a mobile and web application development platform developed by Firebase, Inc. in 2011, then acquired by Google...