---
# System prepended metadata

title: web app

---

# web app

![](https://i.imgur.com/w3BK1bx.png)



---

- Admin
- User 


---

# Web stack

- TS!
- CRA
- Tailwind
- MobX
- React Form Hook
- Cypress
- React Router 
- Appollo Client
- Amplify
- Lambdas



---

### Architecture ( overview )

![](https://i.imgur.com/lCx5sNs.png)

---


- UIKit
- Pages
- Hooks
- Stores
- Components
- Utilities
- Routes
- Assets
- StoryBook


---

### UIKit

- resusable shared componets 
- dumb - keeping them simple and seperate from the parents's logic
- if possible - pure 
- React.memo() - prevents unnecessary rerender
- Easy to preview in StoryBook 

---

ie
```javascript=
const _FileTileWrapper: React.FC<FileTileWrapperProps> = ({ onClick, children, ...props }) => {
  return (
    <div
      onClick={onClick}
      style={{ minHeight: "7rem" }}
      className={`flex items-center rounded-lg border-b border-grey mb-4 bg-white ${
        onClick ? "p-4 cursor-pointer hover:bg-hoverGrey" : ""
      }`}
      {...props}
    >
      {children}
    </div>
  );
};

export const FileTileWrapper = React.memo(_FileTileWrapper);

```

---

```javascript=
![](https://i.imgur.com/OaO8SpB.png)

```

---

### Components

- ie. File Upload Modal 
- More complex shared
- Might use own hooks etc

---

### Pages

![](https://i.imgur.com/vfC4PRJ.png)


---

- splits concers, related mutations, hooks and components are kept witin this page's folder 
- keep user and admin pages in same directory as they will logic
- easier to maintain


---

### Hooks

![](https://i.imgur.com/7RDv6R2.png)

---

- external hooks help keeping comonents lean
- more resuable ( ie admin and user )
- more maintainable 

---

### Stores

- MobX
> Anything that can be derived from the application state, should be. Automatically.

- App needs to be fast and can rely too much on a good internet connection

- Most of app's data and files will be downloaded on login. This in the long run might result in a longer initial load but faster performance overall 

---
#### continiue
- Local Forage - async - otherwise like local storage

- Adding, Deleting and Editing data is easy
- Observable and persitent 
- Overall much leaner than ie Redux

---

### Examples 

#### *JavaScript Class

```javascript=
// get user id
  get userID(): string {
    return this.userData.id;
  }

// changing files order
  changeFileOrder(mainSectionId: string, newOrder: string[]) {
    this.mainSections[mainSectionId].filesOrder = newOrder;
  }

```
---

### Utilities 

- shared common functions or consts 

---

### Routes 

- Not Authenticated
- Admin 
- User
- Wrapped in Appollo Provider 


- Hospital
- My Medical 

### Tests

- E2E - cypress
- We need unit tests




---

# web app

![](https://i.imgur.com/w3BK1bx.png)



---

- Admin
- User 


---

# Web stack

- CRA
- Tailwind
- MobX
- React Form Hook
- Cypress
- React Router 
- Appollo Client



---

### Architecure ( overview )

![](https://i.imgur.com/lCx5sNs.png)

---

- TS!
- UIKit
- Pages
- Hooks
- Stores
- Components
- Utilities
- Routes
- Assets
- StoryBook
- Amplify

---

### UIKit

- resusable shared componets 
- dumb - keeping them simple and seperate from the parents's logic
- if possible - pure 
- React.memo() - prevents unnecessary rerender
- Easy to preview in StoryBook 

---

ie
```javascript=
const _FileTileWrapper: React.FC<FileTileWrapperProps> = ({ onClick, children, ...props }) => {
  return (
    <div
      onClick={onClick}
      style={{ minHeight: "7rem" }}
      className={`flex items-center rounded-lg border-b border-grey mb-4 bg-white ${
        onClick ? "p-4 cursor-pointer hover:bg-hoverGrey" : ""
      }`}
      {...props}
    >
      {children}
    </div>
  );
};

export const FileTileWrapper = React.memo(_FileTileWrapper);

```

---

```javascript=
![](https://i.imgur.com/OaO8SpB.png)

```

---

### Components

- ie. File Upload Modal 
- More complex shared
- Might use own hooks etc

---

### Pages

![](https://i.imgur.com/vfC4PRJ.png)


---

- splits concers, related mutations, hooks and components are kept witin this page's folder 
- keep user and admin pages in same directory as they will logic
- easier to maintain


---

### Hooks

![](https://i.imgur.com/7RDv6R2.png)

---

- external hooks help keeping comonents lean
- more resuable ( ie admin and user )
- more maintainable 

---

### Stores

- MobX
> Anything that can be derived from the application state, should be. Automatically.

- App needs to be fast and can rely too much on a good internet connection

- Most of app's data and files will be downloaded on login. This in the long run might result in a longer initial load but faster performance overall 

---

- Local Forage - async - otherwise like local storage

- Adding, Deleting and Editing data is easy
- Observable and persitent 
- Overall much leaner than ie Redux

---

### Examples 

#### *JavaScript Class

```javascript=
// get user id
  get userID(): string {
    return this.userData.id;
  }

// changing files order
  changeFileOrder(mainSectionId: string, newOrder: string[]) {
    this.mainSections[mainSectionId].filesOrder = newOrder;
  }

```
---

### Utilities 

- shared common functions or consts 

---

### Routes 

- Not Authenticated
- Admin 
- User
- Wrapped in Appollo Provider 


- Hospital
- My Medical 

### Tests

- E2E - cypress
- We need unit tests




---