Merge branch 'code-differently:main' into Lesson20

.vscode/settings.json

@@ -1,4 +1,14 @@
 {
     "java.configuration.updateBuildConfiguration": "automatic",
-    "java.compile.nullAnalysis.mode": "automatic"
+    "java.compile.nullAnalysis.mode": "automatic",
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnPaste": true,
+    "editor.formatOnSave": true,
+    "prettier.requireConfig": true,
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[javascriptreact]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
 }

lesson_20/template/style.css

@@ -0,0 +1,190 @@
+html, body {
+    padding: 0;
+    margin: 0;
+    font-family: Poppins, sans-serif;
+    font-size: 18px;
+    font-weight: 400;
+}
+
+a {
+    text-decoration: none;
+    color: black;
+}
+
+p {
+    -webkit-font-smoothing: antialiased;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+}
+
+.header {
+    display: flex;
+    position: sticky;
+    justify-content: space-between;
+    align-items: center;
+    height: 130px;
+    padding: 0 28px;
+    top: 0;
+    z-index: 9999;
+    background-color: white;
+    box-shadow: 0 0 14px 0 #a0a0a0;
+}
+
+.header-logo img {
+    height: 75px;
+}
+
+.header-top-menu {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    list-style: none;
+    gap: 20px;
+    padding: 0 50px;
+}
+
+.header-top-menu li {
+    border-bottom: 2px solid transparent;
+}
+
+.header-top-menu li:hover {
+    border-bottom: 2px solid #f47d26;
+}
+
+.header .sign-up-button {
+    border-radius: 10px;
+    color: white;
+    background-color: #f47d26;
+    padding: 10px 20px;
+}
+
+.hero-section {
+    width: 100vw;
+    overflow: hidden;
+    position: relative;
+    background-image: url(hero.jpg);
+    background-attachment: fixed;
+    background-size: cover;
+    padding: 100px 0;
+    max-height: calc(100vh - 130px);
+}
+
+.hero-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.25);
+}
+
+.hero-content {
+    color: white;
+    width: 70%;
+    position: relative;
+}
+
+
+.hero-content h2 {
+    color: white;
+}
+
+.hero-title {
+    font-size: 3em;
+    font-weight: 700;
+    margin-bottom: 20px;
+    margin-left: 18%;
+    line-height: 1.2em;
+}
+
+em.highlight {
+    position: relative;
+    display: inline-block;
+    font-style: normal;
+    padding: 0 3px;
+    z-index: 1;
+}
+
+em.highlight:before {
+    display: block;
+    position: absolute;
+    content: "";
+    height: 28%;
+    top: auto;
+    bottom: 5px;
+    width: 100%;
+    background-color: #f47d26;
+    z-index: -1;
+    left: 0;
+    right: 0;
+}
+
+.hero-text {
+    background-color: #243e90;
+    padding: 40px 0;
+    padding-left: 18%;
+}
+
+.hero-text, .hero-title {
+    padding-right: 14px;
+}
+
+article {
+    background-color: #f5f5f5;
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+}
+
+
+.programs-section {
+    padding: 100px;
+    display: flex;
+    flex-direction: column;
+    max-width: 1280px;
+    margin: auto;
+}
+
+.programs {
+    display: flex;
+    flex-flow: row wrap;
+    list-style: none;
+    padding: 0;
+    justify-content: space-between;
+}
+
+h2 {
+    color: #444;
+    font-weight: 900;
+    font-family: Montserrat, sans-serif;
+    font-size: 2em;
+}
+
+h3 {
+    color: #444;
+}
+
+.program {
+    display: flex;
+    flex-direction: column;
+    max-width: 48%;
+}
+
+@media screen and (max-width: 1080px) {
+    .program {
+        min-width: 100%;
+    }
+}
+
+footer {
+    display: flex;
+    flex-direction: column;
+    padding: 45px 0 70px 0;
+    font-size: .8em;
+    color: #3c3c3c;
+    align-items: center;
+    box-shadow: inset 0 5px 12px 4px #e5e5e5;
+}

lesson_21/README.md

@@ -0,0 +1,7 @@
+# Lesson 21
+
+## Lecture Resources
+
+* [Writing Markup with JSX (react.dev)](https://react.dev/learn/writing-markup-with-jsx)
+* [Getting Started with Vite (vitejs.dev)](https://vitejs.dev/guide/)
+* [React Best Practices in 2023 Series (DEV Community)](https://dev.to/sathishskdev/series/22988)

lesson_22/README.md

@@ -0,0 +1,39 @@
+# Lesson 22
+
+## Lecture Resources
+
+* [Writing Markup with JSX (react.dev)](https://react.dev/learn/writing-markup-with-jsx)
+* Guides for [React Query](react-query-link), [React Router](react-router-link).
+* [Javascript Promises vs Async Await EXPLAINED (in 5 minutes)](https://www.youtube.com/watch?v=li7FzDHYZpc) - YouTube
+* _[Optional]_ Creating a new website using [Vite](https://vitejs.dev/guide/).
+
+## Homework
+
+* Review the above [lecture resources](#lecture-resources) to review concepts introduced in class.
+* Complete the [Introduction to React](#introduction-to-react) assignment.
+
+## Introduction to React
+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. We will need to leverage [React Query](react-query-link), [React Router](react-router-link), and [Vite](vite-link) tie everything together.
+
+### 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.
+
+### Create new components
+3. Modify the [Home](./template/src/pages/Home/Home.tsx) component to create new `Program` and `ProgramList` components. The needed HTML and CSS has already been provided for you.
+  - The `Program` component should allow you to configure the title and description to display.
+  - The `ProgramList` component should call the [API](./api/src/server.ts)  to retrieve a list of programs and render each using the `Program` component.
+  - 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
+[vite-link]: https://vitejs.dev/guide/env-and-mode.html

lesson_22/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"]
+}