front-end

React I & II

GitHup Link: https://github.com/Build-Wk-Anywhere-Fitness-3/front-end.git

PVD - Canvas: https://docs.google.com/document/d/1S75RVA0gtwIg3GzKEuS1WKFXwXxHJtJkHAoRq0eiUz8/edit

IMPORTANT DOCUMENTS:pushpin:

:github: GitHub Org: trello Trello Board: :reading_book: Product Canvas: https://docs.google.com/document/d/1DOECE2VCryomI2ow_ZinAeldfwFfw92lnEA8sU6TcuE/edit?usp=sharing --sample --Buildweek 101-- :gear: Read the Culture Document: https://www.notion.so/web25tl/Build-Week-1-3379248ee7ed40a3a0cc26f36b1225e6 bust_in_silhouette Role Descriptions https://www.notion.so/0200d2f8b46345c48c1418fa1c33652c?v=995e7fc27b73425bbe0f8741a6ba2c15 :git: Git Workflow https://www.notion.so/Git-Workflow-34f9b468dcf74a669aff0d3797870d37 100 Rubrics https://www.notion.so/Unit-Completion-Rubrics-c0783f6d9b7e435f9ce47e8cd2d0ee3b :focus-timer: Daily Milestones - https://www.notion.so/6e719d512134435f8a89ca2862f8d3e7?v=6c8d3bd7bbcb44539f8659fc96caa906 🦈Shark Tank Demo Guidelines https://www.notion.so/lambdaschool/Shark-Tank-Presentation-Agenda-for-Demos-For-Students-aafaadbe9e1448f8bbcce8afae11cf7b Help Channel

bw_help_java bw_help_ux bw_help_ds bw_help_ios

FE1

Dependencies:

Download dependencies
- create-react-app
  - axios
  - yup
  - styled components
  - reactstrap bootstrap
  - cypress (install later once you build more)

RUBRIK:

///OVERVIEW/WIREFRAME///:

Plan to discuss plans for UI with rest of team
For now use this as rough example to create forms and endpoints: https://www.youtube.com/watch?v=MK3A5SyEYYI

///RUBRIK/REQUIREMENTS///:

--SKILLS ASSESSMENT--:

+ |APPLIED JS|: 
  GRADE 1:
  - [x] Event Handlers
  GRADE 2:
  - [x] Functional Components w/dynamic functionality
  GRADE 3:

O - [] Third party event/animation (ex. Greensock, Anime, React-motion)

+ |INTRO TO REACT|:
  GRADE 1:
  - [x] Reusable components
  - [x] useEffect + useState hooks
  GRADE 2:
  - [x] Component level organization
  - [x] Proper usage of state and props throughout project
  - [x] UI contains small re-usable components
  - [x] hooks
  - [x] Array methods to dynamically render HTML
  GRADE 3:
  - [x] Components able to be easily re-used

O - [] Advanced React techniques like: composition patter, custom hooks, render props, HOCs, tc.

  + |SINGLE PAGE APPLICATION|:
  GRADE 1 + 2: 
  - [x] React router used and route management properly installed and used to show top level pages as well as nested views where necessary
  - [x] network calls and router used
  - [x] Get requests made (using axios or fetch) to display 3rd party data on deployed page
  GRADE 3:
  - [x] proper use of container vs. presentational components or other industry standards/conventions/patterns used

  + |FORM MANAGEMENT|
  GRADE 1:
  GRADE 2:
  - [x] Component management makes sense for each form and controlled/uncontrolled components can be defended
  - [x] Third party library used and able to be defended.
  - [x] Form validation in place
  GRADE 3:
  - [x] State management:
    - [x] is insightful and clean
    - [x] in place for all fields and all use cases.
    - [x] Loaded states and success/error notifications are in place and add to UX

--TEAMWORK ASSESSMENT--

  + |MVP WORK| 
  GRADE 1 - 3:

O - [] All MVP features were built and student went above and beyond

  + |TEAM WORK SCORE|
  GRADE 1 - 3:
    - [x] Pair programmed with Web UI and Back end Architect