converted github-finder-app to typescript from https://github.com/bradtraversy/github-finder-app
add linting
App to search Github users and display their info. This is part of my React Front To Back 2022 course and is the most up to date version of this project.
The repository code here on the main branch has been updated due to bugs and issues found by students since the course was released. If you are looking for exact code from the course then please check out the originalcoursecode branch of this repository.
The updates here aim to be a reference and resource for common questions asked by students in the Udemy Q&A and for those wishing to make corrections to the project.
Code changes for this fix can be seen in User.tsx
Most likely you have the default light theme provided by DaisyUI. The theme is
set based on a prefers-colorscheme media query, so you may have a light theme
if you have a light browser theme or OS theme. In which case you won't see the
text in the alert show.
Code changes to fix this can be seen in Alert.tsx
The changes here use a DaisyUI Alert component so will adapt with a change in theme.
We also now conditionally set the element visibility to 'visible' or
'hidden' rather than conditionally render, which prevents content shift when
the alert shows for a smoother UX.
You don't need to use craco if you are using react-scripts version 5 or greater.
When Brad recorded the course react-scripts was at version 4 and didn't support postcss, now react-scripts is at version 5 and does support postcss. So just check what version of react-scripts you have...
npm list react-scripts
If it's at version 5 or greater then follow the Tailwind version 3 docs to setup.
If react-scripts is at version 4 then follow the Tailwind version 2 docs to setup, which is what you see Brad doing in the course.
Some users from Github have already prefixed their websites with https:// or
https:// so we need to check in User.tsx if their
website url starts with http before constructing the external link.
Code changes can be see in User.tsx
The theme is set based on a prefers-colorscheme media query, so you may have a light theme
if you have a light browser theme or OS theme.
When the browser's preferred color scheme is light, the gray background is too dark on the RepoItem component, and the content is not visible.
Using base-200 and base-300 backgrounds, will make the component's background change according to the browser's preference.
Code changes can be seen in RepoItem.tsx
Rename .env.example to .env
You can use the Github API without a personal token, but if you want to use your token, add it to the .env file
Learn how to create a token here
npm install
npm start
Tailwind UI created by Hassib Moddasser