React Event Planner App Tutorial for Beginners – Project #8 - React from Confusion to Clarity

#typescript #tailwindcss #react #reactfrontend #reactrouter #contextapi Hi Everyone! In this video, I am going to teach you how to create an event planner app with React, TypeScript, The Context API, useReducer Hook and Tailwind CSS. This application is a comprehensive event management system built using React, TypeScript, Context API with useReducer, and Tailwind CSS. The primary focus of the app is to demonstrate modern React patterns for state management using Context API and useReducer hook. The use of TypeScript ensures type safety and better developer experience, while the Context API efficiently manages complex state transitions across event creation, editing, and attendee management. *-*-*-*-* Get Alerts for New Courses and Content Releases https://arnacode.com/ *-*-*-*-* Features - Event Management - Event Components - Event Cards - Event Dashboard - Event Details - RSVP System - Attendee Management - State Management - Responsive Design Chapters 00:00:00 App Overview 00:08:48 App Setup 00:10:29 Implementing the Routing - React Router 00:23:41 Creating the Layout 00:28:35 Creating the 404 Page 00:32:15 Creating the Navigation 00:36:19 Creating the Event Create Page 00:58:13 Configuring the Event Context 01:02:08 Coding the Add Event Functionality 01:02:36 Creating the Event Types 01:26:14 Continuing with the Event Create Page 01:32:47 Configuring the useReducer 01:36:08 Coding the Add Event Reducer 01:39:10 Implementing Local Storage Functionality 01:48:01 Coding the Events List Page 01:51:00 Coding the Event Card Component 02:03:50 Refactoring the Event Create Page 02:10:47 Handling Adding Attendees 02:25:46 Handling Removing Attendees 02:30:58 Handling Form Cancel 02:32:15 Continuing with the Event Card 02:41:44 Coding the Event Details Page 02:44:38 Coding the Event Details Component 03:20:18 Implementing the Add Attendee Reducer 03:25:52 Implementing the Remove Event Reducer 03:29:07 Implementing the Event Edit Functionality 03:42:52 Implementing the Update Event Reducer 03:49:29 Refactoring the Context 04:02:24 Handling Attendee Status Change 04:11:38 Implementing the Attendee Status Change Reducer 04:19:54 Conclusion *-*-*-*-* Source Code https://github.com/ArnaCode/React-TypeScript-TailwindCSS-Event-Planner-App