My goal was to create a responsive webapp using React, Typescript and the Github GraphQL api to show an interesting look of your github profile with data visualizations for your data.
- Link: Github Profile
Note
- Converted the app from react with js to typescript
- Migrate the github api version from v3 (rest api) to v4 (graphql)
-
Install dependencies
yarn -
Start the server
yarn start
- I built this app with design inspiration from Britanny's original design
- I used styled components for styling, gh-polyglot to get repo details, and flip move for the flip animations.
- Each individual components can be found inside the components folder
- Global styles can be found in the globalstyles folder
- I seprated the styles from the logic, you can find the styles in the styles folder
- declared universal types in 'types.d.ts'
- I used "styled-componenets" because it is a great library for styling. it includes an auto-prefixer and allows me to use Javascript for styling.
- The application fetches data from the Github API
- Uses the GhPolyglot to fetch user repos and the user repo lanagues details
- While migrating to typescript, one of erros I got is "element implicitly has an 'any' type because expression of type 'string' can't be used to index type". I solved this using
Record<string, any>type, bascially telling the compiler that it can accept both 'any' and 'string' type.
This helped: StackOverflow Answer
Original idea by Britanny Chang