Skip to content

Latest commit

 

History

History
47 lines (28 loc) · 1.36 KB

README.md

File metadata and controls

47 lines (28 loc) · 1.36 KB
Raw

Profile Settings App

Demo: https://arelra.github.io/profile-app/

Test

Running Locally

yarn && yarn start

Login

Use the email [email protected] with any password

Notes

  • uses TypeScript
  • uses react-router for page routing
  • uses Rebass as a UI kit to speed up development. However normally I'd use manual styling
  • uses styled-components for more powerful CSS selectors where required
  • use of React hooks primarily useState and useEffect
  • considered useContext and useReducer to allow state and dispatch tunneling but overkill given the simplicity of the app
  • structure mimics a more complex app structure for demonstration

Points of Interest

/app/types.d.ts is the TypeScript global declaration file

/app/ui/App.tsx guards the logged in/out rendering

/app/ui/login/Login.tsx is the login form

/app/ui/nav/Nav.tsx is the navigation menu

/app/ui/profile/ProfileForm.tsx is the Profile form entry point

/app/ui/profile/on-change-create-profile.ts is a helper that creates a new Profile given a form input event

Improvements

  • more testing of UI components
  • use library for form rendering
  • minor refactor i.e. constants, break up larger components

Issue

  • when running on GitHub pages the routing has some minor issues due to the extra base path. Works fine locally so considered out of scope.