Feedback

README.md

@@ -1 +1,112 @@
-# final-project_front-end
+<div align="center">
+
+# I M A G I N E R I U M
+
+![Stars](https://img.shields.io/github/stars/SchoolOfCode/bc13_final-project_front-end-room-8-boolean-hooligans?style=social)
+![Forks](https://img.shields.io/github/forks/SchoolOfCode/bc13_final-project_front-end-room-8-boolean-hooligans?style=social)
+![Watchers](https://img.shields.io/github/watchers/SchoolOfCode/bc13_final-project_front-end-room-8-boolean-hooligans?style=social)
+
+**Imaginerium** (n) - from _imagination_, _engineering_ and _museum_
+
+</div>
+
+## :earth_africa: Imaginerium:
+
+Ever had an idea for a really cool character for a story, or wanted to have somewhere to put down all your game's NPCs? 
+
+Then try [Imaginerium](https://imaginerium.netlify.app)!
+
+Imaginerium is a world-building site for creatives of all stripes - writers, gamers, and anyone who has an original character or concept they'd like to put down on the internet. Unlike other similar sites, Imaginerium has been designed with accessibility and simplicity of use as the foremost consideration. Using Imaginerium you can create characters and collaborate with your friends, as well as generate and edit world maps for all sorts of storytelling ideas.
+
+## :construction_worker: Development Team:
+
+A team of five from the School of Code's 13th Cohort. Imaginerium is our final, four-week long project, built in January 2023. We had four days' planning, 14 days' programming, and one day to present. We are... 
+
+<div align="center">
+  <b>THE BOOLEAN HOOLIGANS:</b>
+</div>
+
+[CHARLES SAJAN](https://github.com/csajan) - <a href="https://github.com/all-contributors/all-contributors/pulls?q=is%3Apr+reviewed-by%3Acsajan" title="Reviewed Pull Requests">:microscope:</a><a href="https://github.com/SchoolOfCode/bc13_final-project_front-end-room-8-boolean-hooligans/commits?author=csajan" title="Front End Commits">:memo:</a><a href="https://github.com/SchoolOfCode/bc13_final-project_back-end-room-8-boolean-hooligans/commits?author=csajan" title="Back End Commits">:card_index:</a><a href="https://www.linkedin.com/in/charlessajan/" title="LinkedIn">:bust_in_silhouette:</a>
+
+[FILIP RUMINSKI](https://github.com/fruminski) - <a href="https://github.com/all-contributors/all-contributors/pulls?q=is%3Apr+reviewed-by%3Afruminski" title="Reviewed Pull Requests">:microscope:</a><a href="https://github.com/SchoolOfCode/bc13_final-project_front-end-room-8-boolean-hooligans/commits?author=fruminski" title="Front End Commits">:memo:</a><a href="https://github.com/SchoolOfCode/bc13_final-project_back-end-room-8-boolean-hooligans/commits?author=fruminski" title="Back End Commits">:card_index:</a><a href="https://www.linkedin.com/in/filip-ruminski/" title="LinkedIn">:bust_in_silhouette:</a>
+
+[IONA ROSE](https://github.com/ionarose) - <a href="https://github.com/all-contributors/all-contributors/pulls?q=is%3Apr+reviewed-by%3Aionarose" title="Reviewed Pull Requests">:microscope:</a><a href="https://github.com/SchoolOfCode/bc13_final-project_front-end-room-8-boolean-hooligans/commits?author=ionarose" title="Front End Commits">:memo:</a><a href="https://github.com/SchoolOfCode/bc13_final-project_back-end-room-8-boolean-hooligans/commits?author=ionarose" title="Back End Commits">:card_index:</a><a href="https://www.linkedin.com/in/iona-rose/" title="LinkedIn">:bust_in_silhouette:</a>
+
+[ANDRES ESPIN](https://github.com/andres3m) - <a href="https://github.com/all-contributors/all-contributors/pulls?q=is%3Apr+reviewed-by%3Aandres3m" title="Reviewed Pull Requests">:microscope:</a><a href="https://github.com/SchoolOfCode/bc13_final-project_front-end-room-8-boolean-hooligans/commits?author=andres3m" title="Front End Commits">:memo:</a><a href="https://github.com/SchoolOfCode/bc13_final-project_back-end-room-8-boolean-hooligans/commits?author=andres3m" title="Back End Commits">:card_index:</a><a href="https://www.linkedin.com/in/andres-e-036492108/" title="LinkedIn">:bust_in_silhouette:</a>
+
+_and_
+
+[FELICITY CULLEN](https://github.com/Fliss317) - <a href="https://github.com/all-contributors/all-contributors/pulls?q=is%3Apr+reviewed-by%3AFliss317" title="Reviewed Pull Requests">:microscope:</a><a href="https://github.com/SchoolOfCode/bc13_final-project_front-end-room-8-boolean-hooligans/commits?author=Fliss317" title="Front End Commits">:memo:</a><a href="https://github.com/SchoolOfCode/bc13_final-project_back-end-room-8-boolean-hooligans/commits?author=Fliss317" title="Back End Commits">:card_index:</a><a href="https://www.linkedin.com/in/felicitycullen" title="LinkedIn">:bust_in_silhouette:</a>
+
+## :wrench: Tech Stack:
+
+IMAGINERIUM is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+### :computer: Front End Tech:
+
+* [Next.js](https://nextjs.org/) v.13.1.1
+* [React.js](https://reactjs.org/) v.18.2.0
+* ES6 (JavaScript)
+* CSS3
+
+### :nut_and_bolt: Back End Tech:
+
+* [Nodemon](https://www.npmjs.com/package/nodemon) v.2.0.20
+* [Express.js](http://expressjs.com/) v.4.18.2
+* [Morgan](https://www.npmjs.com/package/morgan) v.1.10.0
+* ES6 (JavaScript)
+* [PostgreSQL](https://www.npmjs.com/package/pg) v.8.8.0
+
+### :house: Hosting:
+
+* [Netlify](https://www.netlify.com/) (front end)
+* [Render](https://render.com/) (back end)
+* [ElephantSQL](https://www.elephantsql.com/) (database)
+
+### :hammer: Testing Tools:
+
+* [Cypress v12.3.0](https://www.cypress.io/) (end-to-end testing)
+* [Supertest v.6.3.3](https://www.npmjs.com/package/supertest) (integration testing)
+* [Jest v29.3.1](https://jestjs.io/) (unit testing)
+* [Postman](https://www.postman.com/) (api testing)
+* [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) (accessibility testing)
+
+### :book: Libraries:
+
+* [React Icons](https://react-icons.github.io/react-icons/)
+* [React hook form](https://react-hook-form.com/)
+* [Next-Auth](https://next-auth.js.org/)
+* [Next-Themes](https://www.npmjs.com/package/next-themes)
+
+### :floppy_disk: Other Tools and Programs:
+
+* Google Docs
+* Google Slides
+* Figma
+* Miro
+* Trello
+* Slack
+* Zoom
+* Skype
+* Notepad
+* MS Paint
+
+## :clipboard: Instructions:
+
+For those who want to add their own spin on IMAGINERIUM or simply just rummage around in our code, here are the commands you'll need to run both the front and back end:
+
+Front end:
+```
+npm i
+npm run dev
+```
+
+Back end: 
+```
+npm run dev
+```
+
+Testing - front and back end:
+```
+npm run test
+```

imaginerium/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel

imaginerium/Components/Button.js

@@ -0,0 +1,3 @@
+export default function Button(props) {
+  return <button className={props.buttonClass} onClick={props.onClick}>{props.text}</button>;
+}

imaginerium/Components/ButtonLink.js

@@ -0,0 +1,10 @@
+import Link from "next/link";
+
+export default function ButtonLink(props) {
+  return (
+    <button className={props.buttonClass}>
+      {" "}
+      <Link href={props.src}>{props.icon}{props.text}</Link>
+    </button>
+  );
+}

imaginerium/Components/CharacterCard.js

@@ -0,0 +1,122 @@
+import styles from "../styles/characterCard.module.css";
+import { SlGhost } from "react-icons/sl";
+import { GiHeartInside, GiWeight } from "react-icons/gi";
+import { RiCake2Fill } from "react-icons/ri";
+import { MdTransgender } from "react-icons/md";
+import { MdHeight } from "react-icons/md";
+import { useState } from "react";
+import PopUpCharacterCard from "../modals/popUpCharacterCard";
+import CharacterPopUp from "./CharacterPopUp";
+import { motion } from "framer-motion";
+
+export default function CharacterCard(props) {
+  const [showModal, setShowModal] = useState(false);
+
+  return (
+    <div>
+      <div onClick={() => setShowModal(true)} className={styles.center}>
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          className={styles.card}
+        >
+          <div className={styles.additional}>
+            <div className={styles.userCard}>
+              <div className={styles.aliveStatus}>
+                {props.char_alive ? (
+                  <span>
+                    <GiHeartInside /> <span>Alive</span>
+                  </span>
+                ) : (
+                  <span>
+                    <SlGhost /> <span>Dead</span>
+                  </span>
+                )}
+              </div>
+
+              {props.char_img ? (
+                <img
+                  src={props.char_img}
+                  className={styles.image}
+                  alt="Character portrait image"
+                />
+              ) : (
+                <img
+                  className={styles.image}
+                  src="https://deepgrouplondon.com/wp-content/uploads/2019/06/person-placeholder-5.png"
+                  alt="Character portrait image"
+                />
+              )}
+            </div>
+            <div className={styles.moreInfo}>
+              <div className={styles.stats}>
+                <div>
+                  <div className={styles.title}>Gender</div>
+                  <MdTransgender />
+                  <div className={styles.value}>{props.char_gender}</div>
+                </div>
+                <div>
+                  <div className={styles.title}>Age</div>
+                  <RiCake2Fill />
+                  <div className={styles.value}>{props.char_age}</div>
+                </div>
+                <div>
+                  <div className={styles.title}>Height</div>
+                  <MdHeight />
+                  <div className={styles.value}>{props.char_height}cm</div>
+                </div>
+                <div>
+                  <div className={styles.title}>Weight</div>
+                  <GiWeight />
+                  <div className={styles.value}>{props.char_weight}kg</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className={styles.general}>
+            <h1>{props.char_name}</h1>
+            <p className={styles.description}>{props.char_desc}</p>
+            <span className={styles.more}>Click to expand</span>
+          </div>
+        </motion.div>
+      </div>
+      {showModal ? (
+        <PopUpCharacterCard>
+          <CharacterPopUp
+            setShowModal={setShowModal}
+            searchByName={props.searchByName}
+            key={props.character_id}
+            character_id={props.character_id}
+            user_email={props.user_email}
+            char_name={props.char_name}
+            char_age={props.char_age}
+            char_alive={props.char_alive}
+            char_background={props.char_background}
+            char_desc={props.char_desc}
+            char_disabilities={props.char_disabilities}
+            char_eyecolour={props.char_eyecolour}
+            char_fears={props.char_fears}
+            char_features={props.char_features}
+            char_gender={props.char_gender}
+            char_haircolour={props.char_haircolour}
+            char_height={props.char_height}
+            char_hopes={props.char_hopes}
+            char_img={props.char_img}
+            char_job={props.char_job}
+            char_likes={props.char_likes}
+            char_morality={props.char_morality}
+            char_notes={props.char_notes}
+            char_pronouns={props.char_pronouns}
+            char_relationships={props.char_relationships}
+            char_sexuality={props.char_sexuality}
+            char_skills={props.char_skills}
+            char_skincolour={props.char_skincolour}
+            char_species={props.char_species}
+            char_speech={props.char_speech}
+            char_weight={props.char_weight}
+          />
+        </PopUpCharacterCard>
+      ) : null}
+    </div>
+  );
+}