React Admin Dashboard Development Lecture Notes

Introduction

• Focus on building a React admin dashboard that updates in real-time across devices.
• Main features to be integrated:
  • Full authentication system including forgotten password functionality.
  • A homepage with charts, upcoming events, and latest activities.
  • A comprehensive companies table with full CRUD operations and search capabilities.
  • A Kanban board with CRUD operations, multiple assignees, and automatic deadline shifts.
  • Real-time synchronization for instant updates.

Technologies Used

• React, GraphQL, TypeScript, Ant Design, and Refine.
• Emphasis on rapid development and scalability.

Application Overview

• Login Page:
  • Inputs for user credentials with error feedback.
  • Smooth chart animations on login.
• Home Page:
  • Displays charts for deals lost and won.
  • Lists upcoming events and latest activities from the backend.
• Companies Page:
  • Lists all companies with pagination and search functionality.
  • CRUD operations for managing company details.
  • Real-time updates on creation, edit, or deletion of companies.
• Kanban Board:
  • Similar to Trello or Jira.
  • Drag-and-drop functionality for tasks.
  • Real-time updates and modifications for tasks.

Development Process

• Setup:
  • Initialize project using npm create refine-app@latest.
  • Set up API and WebSocket clients for data fetching and real-time updates.
• Data Providers:
  • Created custom fetch functions for handling requests and error management.
  • Implemented data providers for GraphQL API interactions and live updates.
• Authentication:
  • Custom authentication logic integrated with GraphQL for login, register, and identity management.
• GraphQL Code Generation:
  • Setup GraphQL codegen to automatically generate TypeScript types from GraphQL schemas.

Component Development

• Header and User Profile:
  • Integrated user profile with avatar and account settings popover.
• Home Page Components:
  • Upcoming Events and Deals Chart components with real data fetching.
  • Dashboard total count cards for displaying key metrics.
  • Latest Activities list with real-time updates.
• Company CRUD:
  • Companies list with sorting, filtering, and pagination.
  • Create and edit modals for company details.
  • Real-time updates on company data changes.
• Kanban Board:
  • Set up using DnD kit for drag-and-drop functionality.
  • Tasks categorized into stages with dynamic updates.
  • Task details modal for viewing and editing task specifics.

Deployment

• Deployed on Vercel.
• Managed issues related to TypeScript errors during deployment.

Summary

• The project demonstrates the power of refine in creating scalable, real-time web applications.
• Successfully integrated multiple complex features into a cohesive admin dashboard.
• The dashboard is responsive and works seamlessly across various devices.