Hi Everyone! #typescript #tailwindcss #react #reactfrontend #reactrouter Welcome to the 3rd app of this tutorial series. In this video, we will create an Issue Tracker. The app has 3 pages, an all issues page, an open issues page and a closed issues page. We will start coding the app using Vanilla Typescript and style it with Tailwind CSS. Then we will code the app with React and implement the app routing with React Router. In the third and final iteration of the app, we will implement routing with TanStack. *-*-*-*-* Learning Objectives - Learning to code a feature rich app using vanilla technologies - Understanding the differences in approach between imperative and declarative programming - Understanding the differences between React Router and TanStack Router. *-*-*-*-* Issue Tracker Project Implementations - Vanilla Typescript - Tailwind CSS - React - Typescript - Tailwind CSS - React Router - React - Typescript - Tailwind CSS - TanStack Router Chapters 00:00:00 App Overview 00:14:20 Typescript Version of the App - Setup 00:23:14 Adding HTML - Typescript All Issues Page 00:32:05 Adding HTML - Typescript Open Issues Page 00:34:09 Adding HTML - Typescript Closed Issues Page 00:35:00 Implementing Functionality - Typescript All Issues Page 02:24:14 Implementing Functionality - Typescript Open Issues Page 02:58:00 Implementing Functionality - Typescript Closed Issues Page 03:02:14 Refactoring the Typescript Version of the App 03:15:40 React & React Router Version of the App - Setup 03:20:57 Implementing Routing Links - React Router 03:32:27 Implementing Layout - React Router 03:38:20 Implementing Router - React Router 03:44:38 Creating the Route Pages - React Router 03:48:21 Implementing Dark Mode - React Router 04:23:19 Implementing All Issues Page - React Router 04:59:46 Creating the Issue Card Component - React Router 05:28:29 Creating the View Description Component - React Router 05:37:37 Implementing Open Issues Page - React Router 06:10:53 Creating the Edit Modal Component - React Router 06:37:34 Implementing Closed Issues Page - React Router 06:41:42 Refactoring the React - React Router Version of the App 06:46:43 Creating the Theme Context - React Router 06:59:40 Creating the Custom Hook - React Router 07:25:52 Final Review of the Completed App - React Router 07:29:29 React & TanStack Router Version of the App - Setup 07:35:19 Creating the Root Route - TanStack Router 07:45:21 Creating the Child Routes - TanStack Router 07:50:35 Fixing the Navigation - TanStack Router 08:01:21 Final Review of the Completed App - TanStack Router *-*-*-*-* Source Code










