Initial commit

FullstackAcademy · Nov 21, 2024 · a8cb6f2 · a8cb6f2
commit a8cb6f2
Show file tree

Hide file tree

Showing 18 changed files with 4,431 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
@@ -0,0 +1,22 @@
+# Puppy Bowl with RTK Query
+
+In this workshop, we'll be revisiting the [Puppy Bowl API](https://fsa-puppy-bowl.herokuapp.com/api/)! In the previous unit, you were able to interact with this API and dynamically render puppies using just vanilla JS. We will be recreating that project using the new tools at our disposal: namely, React and RTK. A user will be able to view the roster of players, add a player to the roster, see more details about a specific player, and remove a player from the roster.
+
+## Instructions
+
+Much of the code has already been done for you. Your focus will be on using RTK Query to make the fetch calls to the API.
+
+Note: The code is _not_ functional yet! `npm run dev` will serve a broken page until you have completed most of the following steps.
+
+1. In `api.js`, correctly configure `createApi` to use `API_URL` as the base URL.
+   1. Add `"Puppy"` as a tag type.
+2. In `store.js`, configure the store to use the API slice's auto-generated reducer and custom middleware.
+3. In `puppySlice.js`, define the endpoints that will be injected into the API slice.
+   1. _(optional)_ Write `transformResponse` and `transformErrorResponse` functions for each endpoint.
+4. Update `PuppyList` and `PuppyDetails` to use the correct query endpoints. Read the JSX as well! You will often have to grab more than just `data`.
+5. Update `PuppyDetails` to use the correct mutation endpoint in order to remove a puppy from the roster.
+6. Update `PuppyForm` to use the correct mutation endpoint so that a puppy is added to the roster when the form is submitted.
+
+## Submission
+
+Please submit the link to your GitHub repository.
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,38 @@
+import js from "@eslint/js";
+import globals from "globals";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+
+export default [
+  { ignores: ["dist"] },
+  {
+    files: ["**/*.{js,jsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: "latest",
+        ecmaFeatures: { jsx: true },
+        sourceType: "module",
+      },
+    },
+    settings: { react: { version: "18.3" } },
+    plugins: {
+      react,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs["jsx-runtime"].rules,
+      ...reactHooks.configs.recommended.rules,
+      "react/jsx-no-target-blank": "off",
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  },
+];
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Puppy Bowl</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>