GraphQL Profile Dashboard

A single-page application (SPA) that displays user profile data fetched from a GraphQL API. Built with vanilla JavaScript and SVG-based data visualization.

Features

• Authentication

  • Login with username/email and password
  • JWT-based authentication
  • Secure route protection
  • Logout functionality

• Profile Dashboard

  • User identification and basic info
  • XP statistics and progress tracking
  • Audit ratio visualization
  • Level progression
  • Skills breakdown

• Data Visualization

  • SVG-based interactive graphs
  • XP progression over time
  • Skills distribution chart
  • Audit ratio comparison
  • Project completion statistics

Project Structure

.
├── assets
│   ├── css
│   │   └── styles.css
│   ├── imgs
│   │   └── (empty)
│   └── SVGs
│       └── (empty)
├── components
│   ├── AbstractView.js
│   ├── Error.js
│   ├── Login.js
│   └── Profile.js
├── utils
│   ├── Fetch.js
│   ├── Filter.js
│   └── Router.js
├── graphql.js
└── index.html

Setup

1. Clone the repository
2. Configure the API endpoint in utils/Fetch.js
3. Serve the project using a web server
4. Access via browser at http://localhost:<port>

Technologies

• Vanilla JavaScript (ES6+)
• GraphQL
• JWT Authentication
• SVG for data visualization
• CSS3 with CSS Variables
• Single Page Application (SPA) architecture

API Integration

The application integrates with a GraphQL API endpoint providing:

• User authentication
• Profile data
• Transaction history
• Progress metrics
• Skills and achievements

Development

To start development:

# Serve using any HTTP server, for example:
npx serve -s || npm run start