Issue Tracker App for Absolute Beginners - Project #3 - React from Confusion to Clarity

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
https://github.com/ArnaCode/Issue-Tracker-Typescript-React-Router-TanStack