Reboot01 GraphQL Profile

A single-page profile dashboard that signs in to the Reboot01 platform and visualizes your school data — XP, projects, audits, and skills — using the school's GraphQL API. Built with plain HTML, CSS, and JavaScript: no frameworks, no build step, no chart library (every graph is hand-rendered SVG).

🔗 Live demo: shahd-graphql.netlify.app

Features

• JWT authentication against the Reboot01 sign-in endpoint (Basic auth → Bearer token stored in localStorage).
• Route guarding — visiting the login page while signed in sends you to your profile, and vice-versa.
• Account overview — login, user ID, campus, last activity, total XP, and audit ratio.
• Six SVG charts, drawn from scratch:
  • XP over time (cumulative area/line)
  • XP per project (top 10, horizontal bars)
  • XP per month (vertical bars)
  • Projects pass / fail (donut)
  • Audit done vs. received (donut)
  • Top skills (horizontal bars)
• Responsive chart carousel with prev/next controls and slide dots.
• Loading skeletons and per-chart error states.

Getting started

The quickest way to try it is the live demo — just sign in with your Reboot01 credentials.

To run it locally instead: it's a static site with no dependencies. Because it makes fetch calls to the Reboot01 API, serve it over HTTP rather than opening the files directly with file:// (some browsers block cross-origin requests from a null origin).

Pick any static server, for example:

# Python 3
python -m http.server 8000

# or Node
npx serve

Then open the served URL (e.g. http://localhost:8000) and:

1. Sign in with your Reboot01 username / email and password.
2. You'll be redirected to your profile dashboard.
3. Browse your stats; use the arrows/dots to move through the charts.
4. Click Log out in the header to clear your session.

Project structure

.
├── index.html      # Login page
├── profile.html    # Profile dashboard
├── styles.css      # All styles
├── js/
│   ├── auth.js     # Login / logout + route guard  (/api/auth/signin)
│   ├── api.js      # GraphQL client + queries       (/api/graphql-engine/v1/graphql)
│   ├── profile.js  # Loads and renders account overview
│   └── graph.js    # Renders all SVG charts + carousel
└── README.md

How it works

• Login (js/auth.js) posts your credentials as HTTP Basic auth to /api/auth/signin. The returned JWT is saved in localStorage.
• Data (js/api.js) is fetched from the GraphQL endpoint /api/graphql-engine/v1/graphql, sending the JWT as a Bearer token. Queries cover the user, XP transactions, skills, project results, and audit totals.
• Rendering (js/profile.js, js/graph.js) populates the account card and builds each chart as inline SVG — no external charting dependencies.

Tech

Vanilla JavaScript, the Fetch API, and inline SVG. No frameworks, no bundler.