Skip to content

README.md

Latest commit

 

History

History
121 lines (99 loc) · 3.36 KB

README.md

File metadata and controls

121 lines (99 loc) · 3.36 KB

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!