GraphQL Profile Dashboard

A dynamic personal profile dashboard built with vanilla JavaScript that fetches and visualizes student data from a GraphQL API. Features interactive SVG charts, authentication system, and responsive design to display academic progress and achievements.

Overview

This project creates a personalized student profile page that connects to the Zone01 Oujda GraphQL API to fetch and display academic data. The application features secure authentication, real-time data visualization, and an intuitive user interface for tracking learning progress.

Features

Authentication System

• JWT-based Authentication: Secure login using Bearer token authentication
• Dual Login Support: Login with either username:password or email:password
• Base64 Credential Encoding: Secure credential transmission
• Session Management: Persistent login state with logout functionality
• Error Handling: Comprehensive validation and user feedback

Profile Information Display

• User Identification: Full name and personal details
• Current Level: Academic progression level
• Total XP: Accumulated experience points with formatted display (kB/MB)
• Audit Statistics: Detailed audit ratio with done/received metrics

Interactive Data Visualization

• XP Progress Line Chart: Time-series visualization of XP accumulation over time
• Skills Distribution Bar Chart: Horizontal bar chart showing skill levels
• SVG-based Charts: Custom-built interactive charts without external libraries
• Hover Tooltips: Detailed information on data point interaction
• Responsive Design: Charts adapt to different screen sizes

Technical Implementation

• GraphQL Queries: Complex nested queries with variables and arguments
• Modular Architecture: Clean separation of concerns with ES6 modules
• Local Storage: Secure token storage and session persistence
• Error Handling: Comprehensive error management and user feedback
• Responsive UI: Mobile-first design with CSS Grid and Flexbox

Project Structure

graphql-profile/
├── index.html              # Main HTML entry point
├── script/
│   ├── main.js             # Application entry point
│   └── module/
│       ├── api.js          # API communication and authentication
│       ├── login.js        # Login form and authentication logic
│       ├── profile.js      # Profile page rendering and data display
│       ├── charts.js       # SVG chart implementations
│       ├── queries.js      # GraphQL query definitions
│       └── utils.js        # Utility functions and helpers
├── style/
│   └── main.css            # Complete styling with CSS custom properties
└── README.md               # Project documentation

GraphQL Queries

User Information Query

query getUserInfo($arg: String!) {
  user {
    lastName
    firstName
    auditRatio
    totalDown
    totalUp
    transactions(
      where: {
        type: {_eq: "level"},
        _or: [{object: {type: {_eq: "project"}}}, {object: {type: {_eq: "piscine"}}}]
      }
      order_by: {amount: desc}
      limit: 1
    ) {
      amount
    }
  }
  transaction(
    where: {type: {_eq: "xp"},
      _or: [{object: {type: {_eq: "project"}}}, {object: {type: {_eq: "piscine"}}}, {path: {_ilike: $arg}}]}
  ) {
    amount
    path
    object {
      name
      type
    }
  }
}

XP Progress Query

{
  transaction(
    where: {
      type: {_eq: "xp"},
      _or: [{object: {type: {_eq: "project"}}}, {object: {type: {_eq: "piscine"}}}]
    }
    order_by: {createdAt: asc}
  ) {
    amount
    createdAt
    object {
      name
    }
  }
}

Skills Query

{
  transaction(
    where: {
      type: {_ilike: "%skill%"}
    }
    order_by: {amount: desc}
  ) {
    type
    amount
  }
}

Charts Implementation

XP Line Chart (XPLineChart)

• Data Processing: Transforms raw XP transactions into cumulative progress
• Time-based X-axis: Date scaling with proper tick generation
• Interactive Points: Hover tooltips showing project details and XP amounts
• Cumulative Calculation: Real-time running total of XP progress
• Grid Lines: Visual aids for data interpretation

Skills Bar Chart (SkillBarChart)

• Skill Aggregation: Groups and processes skill data by type
• Responsive Bars: Dynamically sized bars based on data values
• Color Coding: Consistent visual styling with hover effects
• Tooltip System: Detailed skill information on interaction
• Sorting: Skills ordered by proficiency level

Setup and Installation

1. Clone the repository:

git clone <repository-url>
cd graphql-profile

2. Serve the application:

# Using Python
python -m http.server 8000

# Using Node.js
npx serve .

# Using PHP
php -S localhost:8000

3. Access the application:
   • Open http://localhost:8000 in your browser
   • Login with your Zone01 credentials

Authentication Flow

1. Login: User enters credentials (username/email + password)
2. Encoding: Credentials encoded to Base64 format
3. API Request: POST to signin endpoint with Basic authentication
4. Token Storage: JWT stored in localStorage upon successful login
5. API Access: Bearer token used for all GraphQL requests
6. Session Management: Token validation and automatic logout on expiry

API Integration

Authentication Endpoint

const API_URL = 'https://learn.zone01oujda.ma/api/auth/signin';

GraphQL Endpoint

const GRAPHQL_ENDPOINT = 'https://learn.zone01oujda.ma/api/graphql-engine/v1/graphql';

Request Headers

{
  'Content-Type': 'application/json',
  'Authorization': `Bearer ${token}`
}

Data Visualization Features

Interactive Elements

• Hover Effects: Visual feedback on chart interaction
• Tooltips: Contextual information display
• Responsive Scaling: Charts adapt to container size
• Animation: Smooth transitions and loading states

Chart Types

• Line Chart: XP progression over time
• Bar Chart: Skills distribution and comparison
• Custom SVG: Hand-coded SVG elements for performance
• Grid Systems: Visual aids and axis labeling

Responsive Design

Breakpoints

• Desktop: Full layout with side-by-side charts
• Tablet: Stacked layout with optimized spacing
• Mobile: Single-column layout with compressed charts

CSS Features

• CSS Custom Properties: Consistent theming system
• CSS Grid: Flexible layout system
• Flexbox: Component-level alignment
• Media Queries: Responsive breakpoints

Error Handling

Authentication Errors

• Invalid credentials validation
• Network connectivity issues
• Token expiration handling
• Automatic logout on authentication failure

Data Loading Errors

• GraphQL query error handling
• Network request failure recovery
• Empty data state management
• User-friendly error messages