GraphQL Profile Page | Zone 01 Oujda

A custom-built student dashboard designed to interface with the Zone 01 Oujda GraphQL API. This project demonstrates the ability to authenticate users via JWT, query complex relational data, and visualize progress using native SVG components.

🚀 Project Overview

The goal of this project is to create a functional profile UI that provides students with a detailed look at their journey, achievements, and statistics within the school's ecosystem.

Key Features:

• Secure Authentication: Support for both username:password and email:password login.
• Dynamic Data: Real-time queries for XP, grades, and audit ratios.
• Custom Visualizations: Interactive statistics generated purely with SVG (no external charting libraries).
• Responsive Design: A clean, professional UI/UX tailored for student data.

---

🔐 Authentication & Security

Accessing the GraphQL endpoint requires a JSON Web Token (JWT).

1. Endpoint: https://learn.zone01oujda.ma/api/auth/signin
2. Method: POST with Basic Authentication (Base64 encoded credentials).
3. Authorization: The resulting JWT is used in the header of all GraphQL requests: Authorization: Bearer <YOUR_TOKEN>

The app includes a dedicated logout function to ensure session security.

---

📊 Data Visualization (SVG)

The "Statistics" section includes at least two custom SVG-based graphs. These represent the student's journey through the curriculum:

• XP Progress: A visualization showing XP earned over specific time periods or by project.
• Success Ratio: A graph representing the ratio of PASS vs FAIL projects.
• Skill Distribution: Visual breakdown of technical skills acquired during the training.

---

🛰 GraphQL Integration

This project implements three primary types of GraphQL interactions:

1. Simple Queries: Fetching basic user identity and login info.
2. Nested Queries: Retrieving transactions and results linked to the authenticated user.
3. Arguments & Filtering: Using where clauses to target specific project IDs or transaction types (e.g., filtering for type: xp).

Sample Query Example:

{
  user {
    id
    login
    transactions(where: { type: { _eq: "xp" } }) {
      amount
      path
      createdAt
    }
  }
}