Users are able to search for github profiles through the search bar. If the user submits the username of an existing github profile, the app stores the username in the database and updates the success message and list below the search bar.

• There is a search bar at the top of the page in which users can enter Github usernames. Upon hitting the "enter" button the application will search for username.
• Upon pressing enter in the textbox, the application retrieves this URL https://api.github.com/users/;
• If there is a result, the application displays a success message to the user and saves data. If there is an error, the application displays an error message.
• Below the search box there are rows of data corresponding to users in the database. A mock design is attached below on the next page.

.

Run the following commands to setup:

1. git clone https://github.com/maddenlockin/ts-user-saver.git
2. cd ts-user-saver
3. npm i
4. npm start to see live server
5. node index.js -> to see a test output

• initiated with create-react-app's typescript template
• chose to use React External Link in Item Component. It has a default of rel='noopener noreferer' and target='_blank'. It felt cleaner to have those established by the library than to add them to the return explictly. Docs: (https://github.com/acelaya/react-external-link)
• installed Firebase(version 9.8.2) in order to connect to the Firestore server
• utilized Material UI's Basic Table. Docs: (https://mui.com/material-ui/react-table/)

App -> Search -> Message
App -> List -> Item 

1. ES6 imports and React Functional Components were chosen because we have the ability to use state with hooks without a class. I am partial to FC.
2. I chose to send Firebase only the user-input github username, as opposed to all of the user data. Then when the list of usernames is fetched from Firebase, the rest of the user data is fetched from the Github API. (see fetch-utils githubInfo() and Item.tsx)
3. I sought to minimize prop drilling and initialized all pieces of state at the lowest level.
4. ** Note on scalability:
   Currently, when a user submits the new username is added to the backend and the list of usernames is fetched with the updated entry. This is inconsequential with the scale of this exercise. If the app were larger I would reduce calls to the API and handle the displayed list in the UI by updating the frontend state. Depending on the use case I may use caching to account for the possible periodic updates to profiles. (see Search.tsx)
5. With more time, I would like to return the list in alphabetical order or sequentially. I am unsure what the organizational structure is based on currently.
6. I used interfaces as opposed to types for initializing state and establishing prop types; I also used JX.Element instead of FC as the type for all children of App.tsx.
7. I did not have time to account for edge cases

This was my first time using Typescript! It was fun and challenging to figure out while utilizing React. Going from a non-typed language to strictly defining types has a sharp learning curve and I am excited to continue learning it!

If you would like to see more of my process through building the app, I made a javascript version initially, here : https://github.com/maddenlockin/CDW-take-home-js You will need to clone it down, cd into it, npm i and npm start to see the live-server.