https://github.com/ivxvm/ghteam

https://github.com/ivxvm/ghteam

Last synced: 7 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/ivxvm/ghteam
• Owner: ivxvm
• Created: 2022-06-11T08:58:16.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-06-12T06:21:31.000Z (over 2 years ago)
• Last Synced: 2024-04-17T04:52:02.383Z (7 months ago)
• Language: TypeScript
• Homepage: https://ivxvm.github.io/ghteam/
• Size: 629 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ghteam

Please create a React TypeScript app - "Create Your Engineering Team" - that allows you to:

- Pass a GitHub user name in a form.

- Click on a button ‘Load User' next to the from.

- Load the user from the GitHub API (https://docs.github.com/en/rest/users/users#get-a-user).

- Display loaded users.

- Remove loaded users.

- Add a role to loaded users, e.g. "Frontend Engineer".

- The app does not have to persist data when closing the tab.

- The app does not need to have tests.

## Solution overview

To bootstrap app I used create-react-app with redux-toolkit and typescript template. RTK's `createSlice`, `createAction`, `createAsyncThunk` are used to define redux state tree, reducers, and actions / action creator for async thunk talking to API. I decided to choose `createAsyncThunk` over `redux-saga` or `RTK Query` because it's sufficiently powerful and also because there is just a single async request which doesn't even demand any special treatment. TypeScript-friendly versions of hooks `useDispatch` and `useSelector` are used in components to "talk" to redux. Project is structured using `feature-folders` approach, with some by-type grouping inside of feature folder. Styles are organized mostly using built-in CSS modules functionality (with role dropdown being exception because I use `react-select` library which is customized using inline CSS props). All components are functional components using hooks for state management, effects and synchronisation. LoadedUsersList component uses per-row render prop `renderExtras` for role dropdown, which isn't necessary for this simple app, but I wanted to showcase the approach (and also to remind myself how to do this).

You can see app in action at https://ivxvm.github.io/ghteam/ (uses my personal testing API token, configured to only have readonly access and only to user endpoints), if you want to run it yourself, clone repository, use `npm install` to install dependencies and then `npm start`, also make sure you have `.env` file at project root with github API token, like this:

```

REACT_APP_GITHUB_API_TOKEN = ghp_UEo2BYCcBbtU4cbG2okSZfWxzoUXa714lDyB

```