React Events WebApp

Welcome to React Events WebApp! This is Events web application project that utilized the Tanstack React Query.

Table of Contents

• Introduction
• Web Pages
• Features
• Technologies Used

Introduction

The project is a React-based Events web application, leveraging the power of Tanstack Query(React Query) for efficient data fetching, and caching. It includes functionalities like data fetching, caching, mutations, form submissions, error handling, and integration with React Router for smooth navigation.

Web Pages

Home

Search Events

Create new event

Event Details

Edit Event

Delete Event

Features

• Data Fetching & Caching:

  • Utilizing Tanstack Query for efficient data fetching and caching.
  • Configuring query behaviors for stale time and garbage collection.
  • Implementing dynamic query functions and query keys for different components.

• Mutations & Optimistic Updating:

  • Handling mutations for creating, updating, and deleting events.
  • Implementing optimistic updating to reflect changes instantly and handle rollbacks in case of failures.
  • Managing mutations with onSuccess, onError, and onSettled properties.

• React Router Integration:

  • Integrating React Router for client-side routing.
  • Leveraging React Router's capabilities for data fetching and mutations with loaders and actions.
  • Ensuring efficient data fetching by avoiding redundant HTTP requests when used in conjunction with React Query.

• Form Submission & Validation:

  • Implementing form submissions for creating and editing events.
  • Performing client-side validation to ensure data integrity.
  • Provided user feedback for invalid form submissions, such as displaying error messages.

• UI Enhancements:

  • Implemented UI components such as modals for confirmation dialogs and progress bars for indicating loading states.
  • Added field validation to prevent submitting forms with empty input fields.
  • Provided feedback to users during data submission and mutation operations.

Technologies Used

• React: JavaScript library for building user interfaces.
• React Query (Tanstack): Efficient data fetching and caching library.
• React Router: Declarative routing library for React applications.

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh