diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..2ef5a0221
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+web_modules
+.firebase
+.firebaserc
+.glitchdotcom.json
+build
\ No newline at end of file
diff --git a/.glitch-assets b/.glitch-assets
new file mode 100644
index 000000000..02ecc7695
--- /dev/null
+++ b/.glitch-assets
@@ -0,0 +1,2 @@
+{"name":"illustration.svg","date":"2021-04-12T03:02:59.405Z","url":"https://cdn.glitch.com/2f80c958-3bc4-4f47-8e97-6a5c8684ac2c%2Fillustration.svg","type":"image/svg+xml","size":23220,"imageWidth":541,"imageHeight":457,"thumbnail":"https://cdn.glitch.com/2f80c958-3bc4-4f47-8e97-6a5c8684ac2c%2Fthumbnails%2Fillustration.svg","thumbnailWidth":330,"thumbnailHeight":279,"uuid":"Lw1QEsxPiPIxc4fR"}
+{"name":"books.png","date":"2022-10-04T02:19:05.241Z","url":"https://cdn.glitch.global/853df0d5-2f4b-473e-8b63-34f080880c96/books.png","type":"image/png","size":55795,"imageWidth":1965,"imageHeight":912,"thumbnail":"https://cdn.glitch.global/853df0d5-2f4b-473e-8b63-34f080880c96/thumbnails%2Fbooks.png","thumbnailWidth":330,"thumbnailHeight":154,"uuid":"dRHCUsBKmq9W3BU1"}
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 000000000..f526e5768
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,197 @@
+The LICENSE file for any project gives credit to the creator/author of the
+project, copyright information for the project, and the legal terms under
+which it's being shared. In other words, this is us using an MIT license to
+say "we wrote this and you can do whatever you want with it."
+
+******************************************************************************
+~glitch-hello-react
+******************************************************************************
+MIT License
+
+Copyright (c) 2021, Glitch, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+
+
+******************************************************************************
+
+THIRD-PARTY SOFTWARE
+This is all the software we used to build this starter project. All of these
+licenses are compatible with the license above. We've included links so you
+can learn more if you want.
+
+1. react: React is a JavaScript library for building user interfaces.
+2. react-spring: A spring-physics based animation library.
+3. vite: Vite is a new breed of frontend build tool.
+4. @vitejs/plugin-react: An all in one Vite plugin for React.
+5. wouter: wouter is a tiny router for modern React and Preact apps.
+6. HK Grotesk: The font we're using.
+
+
+******************************************************************************
+1. react
+URL: https://reactjs.org/
+ https://github.com/facebook/react
+******************************************************************************
+MIT License
+
+Copyright (c) Facebook, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+******************************************************************************
+END, react
+******************************************************************************
+
+
+******************************************************************************
+2. react-spring
+URL: https://www.react-spring.io/
+ https://github.com/pmndrs/react-spring
+******************************************************************************
+MIT License
+
+Copyright (c) 2018-present Paul Henschel, react-spring, all contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+******************************************************************************
+END, react-spring
+******************************************************************************
+
+
+******************************************************************************
+3. vite
+URL: https://vitejs.dev/
+ https://github.com/vitejs/vite
+******************************************************************************
+MIT License
+
+Copyright (c) 2019-present, Yuxi (Evan) You and Vite contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+******************************************************************************
+END, vite
+******************************************************************************
+
+
+******************************************************************************
+4. @vitejs/plugin-react
+URL: https://github.com/vitejs/vite
+******************************************************************************
+MIT License
+
+Copyright (c) 2020-present, Yuxi (Evan) You
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+******************************************************************************
+END, @vitejs/plugin-react
+******************************************************************************
+
+
+******************************************************************************
+5. wouter
+URL: https://github.com/molefrog/wouter
+ https://www.npmjs.com/package/wouter
+******************************************************************************
+ISC License
+
+wouter is published to npm (https://www.npmjs.com/package/wouter) under an
+ISC license. No additional copyright information is present on the project's
+github or npm pages as of April 11, 2021.
+******************************************************************************
+END, wouter
+******************************************************************************
+
+
+******************************************************************************
+6. HK Grotesk
+URL: https://hanken.co/products/hk-grotesk
+******************************************************************************
+HK Grotesk was designed by Hanken Design Co. It is shared using a SIL OFL
+license. Full license text can be found at:
+
+https://hanken.co/pages/web-fonts-eula
+******************************************************************************
+END, HK Grotesk
+******************************************************************************
\ No newline at end of file
diff --git a/README.md b/README.md
index 027584c5e..906b172bf 100644
--- a/README.md
+++ b/README.md
@@ -1,33 +1,7 @@
-Assignment 4 - Components
-===
+# README
-Due: October 4th, by 11:59 AM.
+## Bookshelf
-For this assignment you will re-implement the client side portion of *either* A2 or A3 using either React or Svelte components. If you choose A3 you only need to use components for the data display / updating; you can leave your login UI as is.
+Link: https://a4-neha-kuchipudi.glitch.me/
-[Svelte Tutorial](https://github.com/cs4241-21a/cs4241-21a.github.io/blob/main/using_svelte.md)
-[React Tutorial](https://github.com/cs4241-21a/cs4241-21a.github.io/blob/main/using_react.md)
-
-This project can be implemented on any hosting service (Glitch, DigitalOcean, Heroku etc.), however, you must include all files in your GitHub repo so that the course staff can view them.
-
-Deliverables
----
-
-Do the following to complete this assignment:
-
-1. Implement your project with the above requirements.
-3. Test your project to make sure that when someone goes to your main page on Glitch/Heroku/etc., it displays correctly.
-4. Ensure that your project has the proper naming scheme `a4-firstname-lastname` so we can find it.
-5. Fork this repository and modify the README to the specifications below. Be sure to add *all* project files.
-6. Create and submit a Pull Request to the original repo. Name the pull request using the following template: `a4-firstname-lastname`.
-
-Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions)
----
-
-## Your Web Application Title
-
-your hosting link e.g. http://a4-charlieroberts.glitch.me
-
-Include a very brief summary of your project here and what you changed / added to assignment #3. Briefly (3โ4 sentences) answer the following question: did the new technology improve or hinder the development experience?
-
-Unlike previous assignments, this assignment will be solely graded on whether or not you successfully complete it. Partial credit will be generously given.
+I made my assignment two into a React web app. I used React to create a virtural bookshelf where users can add books to the table and keep track of how many pages they have read and how many pages are left in their book. They can edit books on their shelf to keep tracking their books. They can also delete books if they finish them. Personally, React was easier to implement than the original assignment two as there was so much resouces, tutorials and documentation. I believe it improved the development experience.
diff --git a/TODO.md b/TODO.md
new file mode 100644
index 000000000..2b434603a
--- /dev/null
+++ b/TODO.md
@@ -0,0 +1,38 @@
+# TODO ๐ง
+
+Your new site is all yours so it doesn't matter if you break it! Try editing the code.
+
+Let's add the wiggle function to other elements in the siteโyou'll see comments in the code with `TODO` in them for each step.
+
+In `pages/about.jsx`, add the imports at the top:
+
+```js
+import { useWiggle } from "../hooks/wiggle";
+import { animated } from "react-spring";
+```
+
+Bring the wiggle style and trigger function in before the `return` statement, this time with slightly different parameters:
+
+```js
+const [style, trigger] = useWiggle({ x: 50, rotation: 1, scale: 1.2 });
+```
+
+Replace the header element to use `animated` and apply the wiggle style:
+
+```js
+
+ About this site
+
+```
+
+Let's make the effect happen when the user hovers over the first paragraph element by replacing its opening tag:
+
+```js
+
+```
+
+Hover over the paragraph to see the effect on the About page header!
+
+## Keep going! ๐
+
+Try experimenting with the `useWiggle` properties for different effects!
diff --git a/index.html b/index.html
new file mode 100644
index 000000000..7ebe8eb39
--- /dev/null
+++ b/index.html
@@ -0,0 +1,16 @@
+
+
+
+ );
+};
+
+export default App;
\ No newline at end of file
diff --git a/src/components/router.jsx b/src/components/router.jsx
new file mode 100644
index 000000000..be13952ac
--- /dev/null
+++ b/src/components/router.jsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+import { Switch, Route, Router } from "wouter";
+import Home from "../pages/home";
+import About from "../pages/about";
+
+/**
+* The router is imported in app.jsx
+*
+* Our site just has two routes in itโHome and About
+* Each one is defined as a component in /pages
+* We use Switch to only render one route at a time https://github.com/molefrog/wouter#switch-
+*/
+
+export default () => (
+
+
+
+
+);
diff --git a/src/components/seo.jsx b/src/components/seo.jsx
new file mode 100644
index 000000000..24ccb174a
--- /dev/null
+++ b/src/components/seo.jsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+import SEO from "../seo.json";
+import { Helmet } from 'react-helmet-async';
+
+const Seo = () => {
+ // If url is set to 'glitch-default', we use the hostname for the current page
+ // Otherwise we use the value set in seo.json
+ const url = SEO.url === 'glitch-default' ? window.location.hostname : SEO.url
+
+ // React Helmet manages the content of the page head such as meta tags
+ // We use the async package https://github.com/staylor/react-helmet-async
+ return
+ {SEO.title}
+
+
+
+
+
+
+
+
+
+
+
+
+};
+
+export default Seo;
diff --git a/src/hooks/prefers-reduced-motion.jsx b/src/hooks/prefers-reduced-motion.jsx
new file mode 100644
index 000000000..0c48f2bc3
--- /dev/null
+++ b/src/hooks/prefers-reduced-motion.jsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+// User system can indicate reduced motion setting https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
+
+const query = "(prefers-reduced-motion: no-preference)";
+
+export function usePrefersReducedMotion() {
+ const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(
+ !window.matchMedia(query).matches
+ );
+ React.useEffect(() => {
+ const mediaQueryList = window.matchMedia(query);
+ const listener = event => {
+ setPrefersReducedMotion(!event.matches);
+ };
+ mediaQueryList.addListener(listener);
+ return () => {
+ mediaQueryList.removeListener(listener);
+ };
+ }, []);
+ return prefersReducedMotion;
+}
diff --git a/src/hooks/wiggle.jsx b/src/hooks/wiggle.jsx
new file mode 100644
index 000000000..e23bdf259
--- /dev/null
+++ b/src/hooks/wiggle.jsx
@@ -0,0 +1,55 @@
+import React, { useState, useCallback } from "react";
+import { useSpring } from "react-spring";
+import { usePrefersReducedMotion } from "./prefers-reduced-motion";
+// Heavily inspired by Josh Comeau: https://www.joshwcomeau.com/react/boop/ ๐
+
+// Wiggle function accepts various parameters specifying properties for the animation
+export function useWiggle({
+ x = 0,
+ y = 0,
+ rotation = 0,
+ scale = 1,
+ timing = 150,
+ springConfig = {
+ tension: 300,
+ friction: 10
+ }
+}) {
+ // Accessibility setting from the user system indicating that they prefer to minimize motion
+ const prefersReducedMotion = usePrefersReducedMotion();
+
+ // Declare state variable isActive, set initially to false
+ const [isActive, setIsActive] = useState(false);
+
+ // We offload the actual animation to spring: https://www.react-spring.io/docs/hooks/use-spring
+ const style = useSpring({
+ transform: isActive
+ ? `translate(${x}px, ${y}px) rotate(${rotation}deg) scale(${scale})`
+ : `translate(0px, 0px) rotate(0deg) scale(1)`,
+ config: springConfig
+ });
+
+ // Timing parameter determines how long the wiggle lasts using browser setTimeout function
+ // React useEffect function https://reactjs.org/docs/hooks-effect.html
+ React.useEffect(() => {
+ if (!isActive) {
+ return;
+ }
+ const timeoutId = window.setTimeout(() => {
+ setIsActive(false);
+ }, timing);
+ return () => {
+ window.clearTimeout(timeoutId);
+ };
+ }, [isActive]); // Continue wiggle until isActive is set false when timeout elapses
+
+ // Set wiggle to active when the triggering event occurs - will be set false when effect completes above
+ const trigger = useCallback(() => {
+ setIsActive(true);
+ }, []);
+
+ let appliedStyle = prefersReducedMotion ? {} : style;
+
+ // Return animation style effect and function to apply on trigger in page
+ return [appliedStyle, trigger];
+}
diff --git a/src/index.jsx b/src/index.jsx
new file mode 100644
index 000000000..8887e58c7
--- /dev/null
+++ b/src/index.jsx
@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './app.jsx';
+
+ReactDOM.render(, document.getElementById('root'));
\ No newline at end of file
diff --git a/src/pages/about.jsx b/src/pages/about.jsx
new file mode 100644
index 000000000..d64eff643
--- /dev/null
+++ b/src/pages/about.jsx
@@ -0,0 +1,72 @@
+import * as React from "react";
+/* ADD IMPORTS FROM TODO ON THE NEXT LINE */
+
+
+/**
+* The About function defines the component that makes up the About page
+* This component is attached to the /about path in router.jsx
+*/
+
+export default function About() {
+ /* DECLARE STYLE AND TRIGGER FOR WIGGLE EFFECT FROM TODO ON NEXT LINE */
+
+ return (
+
+ {/* REPLACE H1 ELEMENT BELOW WITH CODE FROM TODO */}
+
+ About this site
+
+ {/* REPLACE OPENING P TAG BELOW WITH CODE FROM TODO */}
+
+ Welcome to the Glitch React starter, where you can instantly create a
+ React site that's fully customizable.
+
+
+
+ If you're completely new to React, learning the{" "}
+ main concepts{" "}
+ will get you off to a great start. You'll also see comments and links
+ to supporting resources throughout the code.
+
+
+
+ This page is a great spot to tell the world a few details about the new
+ React app you built on Glitch! Check out your project's{" "}
+ readme file to learn more about how to customize your
+ content.
+
+
+
+ ๐ Right now, your site is live on the web ๐ with a
+ real URL (a secure HTTPS address!) that updates as soon as you make
+ changes.
+
+
+ ๐ฅ Add a domain to your new Glitch project! Just go
+ to the Tools menu in the Glitch editor, and click{" "}
+ Custom Domains.
+
+
+ ๐ Use the Share button in the Glitch editor to
+ invite others in to edit your new React project by typing in their
+ email address or Glitch username. Tip: ๐Make
+ your code, or even your entire app, private to just those you invite,
+ by{" "}
+ upgrading your Glitch account
+ .
+
+
+
+
+ {" "}
+ The Glitch community is glad to welcome you, and the Internet is better
+ when it's made by real people. We can't wait to see what you create!
+
+ );
+}
diff --git a/src/pages/home.jsx b/src/pages/home.jsx
new file mode 100644
index 000000000..90e5d6122
--- /dev/null
+++ b/src/pages/home.jsx
@@ -0,0 +1,78 @@
+import * as React from "react";
+import { animated } from "react-spring";
+import { useWiggle } from "../hooks/wiggle";
+import { Link } from "wouter";
+
+// Our language strings for the header
+const strings = [
+ "Hello React",
+ "Salut React",
+ "Hola React",
+ "์๋ React",
+ "Hej React"
+];
+
+// Utility function to choose a random value from the language array
+function randomLanguage() {
+ return strings[Math.floor(Math.random() * strings.length)];
+}
+
+/**
+* The Home function defines the content that makes up the main content of the Home page
+*
+* This component is attached to the /about path in router.jsx
+* The function in app.jsx defines the page wrapper that this appears in along with the footer
+*/
+
+export default function Home() {
+ /* We use state to set the hello string from the array https://reactjs.org/docs/hooks-state.html
+ - We'll call setHello when the user clicks to change the string
+ */
+ const [hello, setHello] = React.useState(strings[0]);
+
+ /* The wiggle function defined in /hooks/wiggle.jsx returns the style effect and trigger function
+ - We can attach this to events on elements in the page and apply the resulting style
+ */
+ const [style, trigger] = useWiggle({ x: 5, y: 5, scale: 1 });
+
+ // When the user clicks we change the header language
+ const handleChangeHello = () => {
+
+ // Choose a new Hello from our languages
+ const newHello = randomLanguage();
+
+ // Call the function to set the state string in our component
+ setHello(newHello);
+ };
+ return (
+ <>
+
{hello}!
+ {/* When the user hovers over the image we apply the wiggle style to it */}
+
+
+
+
+ {/* When the user hovers over this text, we apply the wiggle function to the image style */}
+
+
+ Psst, click me
+
+
+
+
+
Using this project
+
+ This is the Glitch Hello React project. You can use
+ it to build your own app. See more info in the{" "}
+ About page, and check out README.md in the
+ editor for additional detail plus next steps you can take!
+
+ 
+