GraphQL Profile Page

Objectives

The goal of this project is to learn and practice the GraphQL query language by creating a personal profile page. You will:

• Query data from a GraphQL endpoint provided by the platform.
• Display selected user information on the profile page.
• Create interactive and animated statistical graphs using SVG.
• Implement login functionality with JWT authentication.
• Host the completed project on a platform of your choice.

Features

Profile Page

• Display at least three pieces of user information, such as:
  • Basic user identification (e.g., name, login)
  • XP amount
  • Grades
  • Audits
  • Skills
• Include a mandatory statistics section with at least two SVG graphs, such as:
  • XP earned over time
  • XP by project
  • Pass/fail ratios for projects or exercises
  • Attempts per exercise

Login Page

• Obtain a JWT via the provided sign-in endpoint.
• Support login with:
  • username:password
  • email:password
• Display appropriate error messages for invalid credentials.
• Implement logout functionality.

Hosting

Host the project using platforms like GitHub Pages, Netlify, or any other preferred hosting service.

Instructions

Step 1: Set Up the GraphQL Queries

Use the GraphQL API endpoint: https://learn.01founders.co/api/graphql-engine/v1/graphql

Example queries:

• Retrieve user information:

  {
    user {
      id
      login
    }
  }

• Retrieve a specific object:

  {
    object(where: { id: { _eq: 3323 }}) {
      name
      type
    }
  }

• Nested queries for results and users:

  {
    result {
      id
      user {
        id
        login
      }
    }
  }

Step 2: Design the UI

• Create a user-friendly interface with a focus on good UI/UX principles.
• Ensure the statistics section includes at least two graphs using SVG.
  • Example graphs: Line graphs, bar charts, pie charts.
• Make the graphs interactive or animated for a better user experience.

Step 3: Implement Authentication

• Use the https://learn.01founders.co/api/auth/signin endpoint to obtain a JWT.
• Supply credentials using Basic authentication (base64 encoding).
• Use Bearer authentication to query the GraphQL API.
• Extract the authenticated user ID from the JWT for data access.

Step 4: Host the Project

• Deploy your profile page on a hosting platform such as GitHub Pages, Netlify, or others.
• Ensure the hosted site functions correctly and is accessible.

Technologies Used

• GraphQL: Query language for APIs
• GraphiQL: Tool for exploring the GraphQL schema
• SVG: For creating graphs and visualizations
• JWT: For authentication and authorization
• Hosting Services: GitHub Pages, Netlify, etc.

Example Tables and Columns

• user table: Contains user details like ID and login.
• transaction table: Contains XP and audit data.
• progress table: Tracks user grades and progress.
• result table: Shows progression and results.
• object table: Lists exercises and projects.

Learning Outcomes

This project will help you learn:

• GraphQL querying (normal, nested, and with arguments)
• Authentication and JWT handling
• Basics of UI/UX design
• Hosting a web application

Issues or Suggestions

If you encounter any issues or have suggestions for improvements, feel free to submit an issue or propose changes.

---

Happy Coding!