# web app  --- - Admin - User --- # Web stack - TS! - CRA - Tailwind - MobX - React Form Hook - Cypress - React Router - Appollo Client - Amplify - Lambdas --- ### Architecture ( overview )  --- - 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=  ``` --- ### Components - ie. File Upload Modal - More complex shared - Might use own hooks etc --- ### Pages  --- - 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  --- - 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  --- - Admin - User --- # Web stack - CRA - Tailwind - MobX - React Form Hook - Cypress - React Router - Appollo Client --- ### Architecure ( overview )  --- - 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=  ``` --- ### Components - ie. File Upload Modal - More complex shared - Might use own hooks etc --- ### Pages  --- - 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  --- - 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 ---