Program

// TODO: Describe what this is and why it exists.

Intro

Source Control and Git

• Git courses:

  • Mastering Git: https://app.pluralsight.com/library/courses/how-git-works
  • How Git Works: https://app.pluralsight.com/library/courses/master-git
  • Git Configuration and Attributes - https://app.pluralsight.com/library/courses/git-configuration-attributes

• GitHub courses:

  • GitHub Fundamentals: https://app.pluralsight.com/library/courses/fundamentals-github
  • GitHub Pull Requests from Start to Finish: https://app.pluralsight.com/library/courses/github-pull-requests-from-start-finish

• Read the commit messages guidelines

  • https://gist.github.com/robertpainsi/b632364184e70900af4ab688decf6f53
  • https://www.freecodecamp.org/news/writing-good-commit-messages-a-practical-guide/
  • https://www.conventionalcommits.org/en/v1.0.0/

Pet Store - Vanilla JS

• Fork this repo: https://github.com/JuniorFrontendAcademy/pet-store
• Create a branch named vanillajs
• Read README.md
• Contain your vanilla js implementation to the pet-store-vanilla-js directory
• Read pet-store-vanilla-js/README.md
• ??? (R)
• ??? (M)
• ??? (E)
• Implement the Pet Store project
• Create a pull request from vanillajs to main
• Complete review / feedback loop

Learning React & TypeScript

• Watch the React courses

  • Complete Intro to React: https://frontendmasters.com/courses/complete-react-v8/
  • Intermediate React: https://frontendmasters.com/courses/intermediate-react-v5/
  • React Performance: https://frontendmasters.com/courses/react-performance/

• Read the React documentation

  • Docs - https://react.dev/
  • Legacy Docs - https://legacy.reactjs.org/

• Watch the TypeScript courses

  • TypeScript Fundamentals: https://frontendmasters.com/courses/typescript-v4/
  • Intermediate TypeScript: https://frontendmasters.com/courses/intermediate-typescript-v2/
  • Making TypeScript Stick: https://frontendmasters.com/courses/typescript-practice/
  • Production-Grade TypeScript: https://frontendmasters.com/courses/production-typescript/

• Read the TypeScript documentation

  • Handbook & Reference - https://www.typescriptlang.org/docs/handbook/intro.html

• Watch the React and TypeScript course

  • React and TypeScript: https://frontendmasters.com/courses/react-typescript-v2/

Pet Store - React (with hooks)

• Create a branch named react-hooks from main
• Contain your implementation to the pet-store-react-hooks directory
• Read pet-store-react-hooks/README.md
• Implement the Pet Store project using React with hooks
  • List of pets
  • Create a pull request from react-hooks to main
  • Complete review / feedback loop
  • Do the same with
    • Delete a pet
    • Add / Edit pet

Testing preparation

• Accessibility courses

  • Website Accessibility: https://frontendmasters.com/workshops/accessibility-v3/
  • Enterprise Accessibility: https://frontendmasters.com/workshops/enterprise-accessibility/

• Testing courses

  • React Testing Library with Jest / Vitest: https://www.udemy.com/course/react-testing-library/
  • MSW: https://egghead.io/courses/mock-rest-and-graphql-apis-with-mock-service-worker-8d471ece

• Docs

  • Testing Library docs: https://testing-library.com/docs/
    • Getting Started
    • Core API
    • Frameworks
      • DOM Testing Library
      • React Testing Library
    • User Interactions
    • Ecosystem

Pet Store - Testing with Jest & RTL

• Create a branch named react-hooks-tests from main
• Compile a list of tests for the "List of pets" part of the application
• Create a pull request from react-hooks-tests to main
• Implement the tests
• Do the same with
  • Delete a pet
  • Add / Edit pet

Learning Redux and Redux Toolkit

• Redux Fundamentals (feat. React) - https://frontendmasters.com/courses/redux-fundamentals
• Advanced Redux with Redux Toolkit - https://frontendmasters.com/courses/advanced-redux

Pet Store - React & Redux

• Create a branch named react-hooks-redux from main
• Contain your implementation to the pet-store-react-hooks-redux directory
• Read pet-store-react-hooks-redux/README.md
• Implement the Pet Store project using React and Redux
  • List of pets
  • Create a pull request from react-hooks-redux to main
  • Complete review / feedback loop
  • Do the same with
    • Delete a pet
    • Add / Edit pet