https://github.com/ifycode-experiments/auth-guide-react-app
https://github.com/ifycode-experiments/auth-guide-react-app
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ifycode-experiments/auth-guide-react-app
- Owner: Ifycode-experiments
- Created: 2021-11-11T19:49:47.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-11-22T08:44:57.000Z (over 3 years ago)
- Last Synced: 2025-01-27T22:38:13.115Z (5 months ago)
- Language: JavaScript
- Size: 607 KB
- Stars: 1
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React (firebase) auth guide app
Firebase authentication guide app with create-react-app. The guide helps to understand how the app works itself. More information on the user roles and what not-logged in users, logged in users and admins will be able to do with this app coming soon after app completion.
## About compiling less to css
`npm run dev` script takes care of watching changes in the less folder and run the app. `FAST_REFRESH=false` is added to the start script to fix compile issues with create react app. Incase this doesn't work for you, see [development server of create-react-app does not auto refresh](https://stackoverflow.com/questions/43274925/development-server-of-create-react-app-does-not-auto-refresh) stackoverflow question or [hot Reload stopped working with React "^17.0.1"](https://github.com/facebook/create-react-app/issues/9904) github issue.
## Helpful React resources
### Active links (react router dom 6 - NavLinks)
- React router dom [tutorial - documentation](https://reactrouter.com/docs/en/v6/getting-started/tutorial#active-links)
- [Active NavLink Classes with React Router](https://ultimatecourses.com/blog/active-navlink-classes-with-react-router)
### React router dom 6
- [React router dom tutorial](https://github.com/remix-run/react-router/blob/main/docs/getting-started/tutorial.md)
- [Redirects in React router v6](https://gist.github.com/mjackson/b5748add2795ce7448a366ae8f8ae3bb#not-server-rendering)
- [The Guide to Nested Routes with React Router](https://ui.dev/react-router-nested-routes/)
### Conditional rendering
- React documentation [conditional rendering](https://reactjs.org/docs/conditional-rendering.html)
- [Pluralsight - Return a Variable in the Render Function in React](https://www.pluralsight.com/guides/return-variable-in-render-function-in-react)
- [Multiple css classes in react](https://programmingwithmosh.com/react/multiple-css-classes-react/)
## Javascript resources
- Fix for smaller screen nav scrolling back to top due to setting focus, found on [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) through [Preventing page from scrolling on focus switching](https://stackoverflow.com/questions/12758021/preventing-page-from-scrolling-on-focus-switching) stackoverflow question.