- App using Ionic with React to store data in a Firebase backend. All code from tutorial by codedamn
- Note: to open web links in a new window use: ctrl+click on link
- React Effect Hook used to manually change the DOM, equivalent of lifecycle methods componentDidMount, componentDidUpdate & componentWillUnmount combined.
- Uses ion-toast notifications
- Ionic/React v5
- React v17 JavaScript library
- React Redux v7
- React Dev Tools Chrome extension
- Install dependencies using
npm i
- Create your own firebase console project and add firebaseConfig to
firebaseConfig.ts
- Run
ionic serve
to open the dev server athttp://localhost:8100/
- login function from
login.tsx
async function login() {
setBusy(true)
const res: any = await loginUser(username, password)
if (res) {
console.log('login res', res)
dispatch(setUserState(res.user.email))
history.replace('/dashboard')
toast('You have logged in')
}
setBusy(false)
}
- React Effects -
componentDidMount
,componentDidUpdate
&componentWillUnmount
combined, and embrace JavaScript closures - Redux reducers used to modify state
- DOM Window object browser session history used to navigate
- React Redux useDispath method used to dispatch actions
- Status: Tutorial completed - all 26 videos completed. Register and Login functions work however when routed to /dashboard just shows a blank screen. Do not update.
- To-Do: Solve issue of /dashboard page - likely an issue with 'dispatch' in
Dashboard.tsx
.
- CodeDamn Youtube Video Series: Ionic + React + Firebase #1 to #26
- Ionic api list of people to use in app
- Eslint doc: disallow variable redeclaration (no-redeclare)
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email: gomezbateman@yahoo.com