Githubstats | A github user search App

Created using NextJS, Typescript, Chakra UI, GraphQL (Apollo), Codegen.

GithubStats Live Preview

Main Goals

• Learn GraphQL

• Learn about Github Graphql API

• Learn about codegen

• Learn about Apollo

• Learn Chakra UI

• Next.JS

App Goals

• Search for a user/organization and access their github profile

• repos, starred repos, following/followers, members (organization).

Technologies

• Next.JS | Typescript | GraphQL | Github GraphQL API | Apollo | Codegen | ChakraUI

ToDo

• Header Component
• "overview" Page (Profile Overview)
• "repos" Page (list repos)
• "starred" Page (list starred repos)
• "followers/following" Page (if User)
• "members" Page (if Organization)
• Get data from Github Graphql API
• Search User
• Search Organizations
• Pagination - Infinite Scrolling - "Load more" (Apollo Pagination)

Layout Images

Home Page

User Overview Page

User/Org Repos and Starred repos

User Followers / Following

Members (Organizations don't have followers, I decided to show their members)

SearchBox (Dashboard)

If user/org doesn't have data to display