feat: adds lesson_24 homework and lesson_25 pre-work (#750)

Signed-off-by: Anthony D. Mays <anthony@morganlatimer.com>

Author: anthonydmays

lesson_24/README.md

@@ -13,4 +13,28 @@ Please review the following resources before lecture:
 
 ## Homework
 
-- TODO(anthonydmays): Add some stuff
+- [ ] Complete the [Using an API](#using-an-api) assignment.
+- [ ] Do pre-work for [lesson 25](/lesson_25/).
+
+### Using an API
+This exercise will give you hands-on experience with the React framework and supporting tools to enhance a dynamic front-end application that communicates with a backend API.
+
+#### Starting the servers
+
+1. Copy the React [template](./template/) folder to your own unique folder. Make necessary code changes in your folder only. 
+2. Install the [API server](./api/) using `npm install` and then run it using the `npm run dev` command. 
+3. Install the React web server in your copy using `npm install` and then run it using the `npm run dev` command.
+
+#### Updating the ProgramList components
+4. Modify the `ProgramList` component so that it calls the API to generate a list of programs using the returned data instead of the fake data. The needed HTML and CSS has already been provided for you.
+  - You can reference the types/interfaces used in the API by importing from the `@code-differently/types` package. 
+
+#### Create a page for adding new programs
+4. Create a new page (similar to the Home page component) that allows you to provide a new title and description and then use the API to add it to the existing list of programs.
+5. Add a link to the new page in the [Header](./template/src/components/header/Header.tsx) component that navigates to the new page.
+
+> [!NOTE]
+> You can use the [React Router tutorial](https://reactrouter.com/en/main/start/tutorial#updating-contacts-with-formdata) to learn how to handle form submissions. You can also use the [React Query guide](https://tanstack.com/query/latest/docs/framework/react/guides/mutations) to learn how leverage mutation to post to an API. 
+
+[react-query-link]: https://tanstack.com/query/latest/docs/framework/react/quick-start
+[react-router-link]: https://reactrouter.com/en/main/start/tutorial

lesson_24/api/.prettierrc

@@ -0,0 +1,24 @@
+{
+  "bracketSpacing": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "arrowParens": "avoid",
+  "importOrder": [
+    "<THIRD_PARTY_MODULES>",
+    "interface",
+    "(?=content|api)",
+    "context/",
+    "mock/",
+    "config",
+    "utils/",
+    "hooks/",
+    "(components/|./index)",
+    ".svg",
+    "^../(.*)$",
+    "(?=./styles.module.scss)"
+  ],
+  "endOfLine": "auto",
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
+}

lesson_24/api/jest.config.js

@@ -0,0 +1,11 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} **/
+export default {
+  testEnvironment: 'node',
+  transform: {
+    '^.+.tsx?$': ['ts-jest', {useESM: true}],
+  },
+  moduleNameMapper: {
+    '^(\\.\\.?\\/.+)\\.js$': '$1',
+  },
+  extensionsToTreatAsEsm: ['.ts'],
+};