Ionic React 6 Type Script - Register Page #1 With Parse Back4app & MongoDB

00:00 | 01:59 Small Demo [x]
01:59 | 05:37 Requirements [x]
05:37 | 06:49 Setting up ionic project with Yarn instead of npm [x]
06:49 | 09:58 Creating project with ionic start --type=react
09:58 | 11:34 Creating backend with parse lowcode backend back4app [x]
11:34 | 18:06 Creating Basic Project Structure
18:06 | 23:33 Setting up Pages Routing [Login, Register, Home
23:33 | 38:40 Setting up GUI Register (styling) [x]
38:40 | 53:53 Setting up function to handle register of user from api [x]
53:53 | 01:13:23 Passing properties to the front end (Connecting frontend with backend) [x]

Today i am going to show to you guys how to start developing in ionic 6, react with building a simple register page and connecting it to a backend utlizing properties , useEffect and useState hooks aswell as an async await function.

#Demo
https://github.com/andgo-edu/ionic6-react-typescript-to-do-application

#Requirements
1. Node JS
2. Ionic Client
npm install -g @ionic/cli
3.yarn
npm install -g yarn


2. To start using this application

- Signup at [](https://www.back4app.com)
- Update API Keys in App.tsx
-
```
const PARSE_APPLICATION_ID = "";
const PARSE_HOST_URL = "https://parseapi.back4app.com/";
const PARSE_JAVASCRIPT_KEY = "";
```


## Tasks Done

1. - Part 1 Setting up the project and register page
- Small Demo [x]
- Requirements [x]
- Setting up ionic project with Yarn instead of npm [x]
- Explaining basic project files [x]
- Creating backend with parse lowcode backend back4app [x]
- Creating Basic Project Structure [x]
- Setting up Pages Routing [Login, Register, Home] [x]
- Setting up GUI Register (styling) [x]
- Setting up function to handle register of user from api [x]
- setting up user inputs dynamically [x]
- passing properties to the front end (Connecting frontend with backend) [x]
- Fixing Initialze Error by passing the api url [x]
```
const PARSE_HOST_URL = "https://parseapi.back4app.com/";
```

- Part 1 References
1. [Signing Up Typescipt back-4app api docs](https://dashboard.back4app.com/apidocs?typescript#signing-up)
2. [back-4appdocs ](https://www.back4app.com/docs)
3. [Responsive Grid ionic6](https://ionicframework.com/docs/layout/grid)
4. [Config ionic to start project with yarn](https://forum.ionicframework.com/t/how-can-i-start-a-new-ionic-project-with-yarn/217365)
5. [Back4app api typescript docs](https://dashboard.back4app.com/apidocs?typescript#introduction)
6. [Ionic docs ionic-button](https://ionicframework.com/docs/api/button)