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-Typ...