A personal profile web application built to explore and learn GraphQL, JWT authentication, and SVG-based data visualization using the Zone01 Oujda learning platform API.
This project demonstrates how to build a dynamic profile page by querying personalized user data from the Zone01 Oujda GraphQL API. It includes:
- A Login Page that authenticates users using JWT obtained via the platform's signin endpoint.
- A Profile Page displaying key user data such as identification info, XP earned, grades, audits, and skills.
- An interactive Statistics Section featuring at least two types of graphs rendered with SVG to visualize progress and achievements.
- Secure JWT token management to access the GraphQL API with Bearer authentication.
- Responsive and user-friendly UI/UX design principles.
- Login / Logout system supporting both username:password and email:password authentication.
- GraphQL queries with normal, nested, and argument-based queries to retrieve user-specific data.
- Dynamic SVG charts showcasing:
- XP earned over time
- Pass/Fail ratio of projects
- Error handling with clear user feedback on invalid credentials.
- Hosted on [Your Hosting Platform] (e.g., GitHub Pages, Netlify).
- JavaScript (Vanilla JS )
- GraphQL for querying user data from the API
- JWT for authentication and authorization
- SVG for rendering interactive and animated statistical graphs
- Fetch API/Axios for HTTP requests
- CSS for styling
- A Zone01 Oujda account with valid credentials.