GitHub Data Integration Frontend

This project is the frontend for a MEAN stack application that provides a powerful, user-friendly interface for visualizing and managing GitHub data. Built with Angular 19, AG Grid Community, and Angular Material, it enables users to connect their GitHub account, sync data, and interact with large datasets efficiently.

Features

• Modern Angular 19 Standalone Architecture
  Utilizes Angular's latest standalone components and best practices for maintainability and performance.

• GitHub OAuth Integration
  Users can securely connect their GitHub account to fetch and sync data.

• Sync Status Monitoring
  Real-time sync progress is displayed for each data entity (users, organizations, repos, commits, pulls, issues). The UI clearly indicates when all data is fully synced.

• Dynamic Data Table with AG Grid

  • Displays data for the selected entity (e.g., users, repos, issues, etc.) in a high-performance grid.
  • Columns and headers update dynamically based on the selected entity and returned data.
  • Supports large datasets with server-side pagination (custom Material pagination bar).
  • Responsive design with Material theming.

• Server-Side Search

  • Search across all columns for any entity.
  • Search queries are sent to the backend, which returns filtered results and updates the grid and pagination accordingly.

• Custom Material Pagination

  • Clean, user-friendly pagination bar with page numbers, ellipsis for large page sets, and Material icon navigation.
  • Only the current page's data is loaded from the backend, ensuring fast performance even with thousands of records.

• Integration Management

  • Users can remove their GitHub integration, but only after all data is fully synced (button is disabled during syncing for data integrity).

• Sync Progress Card

  • Visual card shows the sync status for each entity, with Material icons and progress indicators.

Technologies Used

• Angular 19 (standalone components, modern patterns)
• Angular Material (UI components, theming)
• AG Grid Community (data grid, client/server-side features)
• RxJS (reactive programming)
• TypeScript (strict typing, maintainability)
• REST API (communicates with a Node.js/Express backend)

How It Works

1. Connect GitHub:
   User authenticates via GitHub OAuth and starts the data sync process.

2. Sync & Monitor:
   The frontend polls the backend for sync status and displays progress for each entity.

3. Explore Data:
   Once synced, users can select any entity, search across all columns, and page through results using the custom Material pagination bar.

4. Remove Integration:
   The integration can only be removed after all data is fully synced, ensuring no data loss or corruption.

Project Structure

• src/app/components/github-integration/
  Main component for GitHub integration, sync status, data grid, and controls.

• src/app/services/github-integration.service.ts
  Handles all API communication with the backend.

Setup

1. Clone the repository:

   git clone https://github.com/Hazique95/github-data-integration-frontend.git
   cd github-data-integration-frontend

2. Install dependencies:

   npm install

3. Run the development server:

   npm start

4. Open in your browser: Visit http://localhost:4200

Note: This is the frontend only. You must also run the backend (Node.js/Express + MongoDB) for authentication, data sync, and API endpoints.

Contributing

Contributions are welcome! Please open issues or submit pull requests for improvements or bug fixes.

License

This project is licensed under the MIT License.