├── .eslintrc ├── .gitignore ├── .vscode └── settings.json ├── README.md ├── components ├── 404.jsx ├── AddMessageModal.jsx ├── Loading.jsx ├── Navbar.jsx ├── NotSignedIn.jsx ├── SignIn.jsx ├── StickyNote.jsx ├── StickyNoteGrid.jsx ├── StickyNoteWall.jsx └── WallGrid.jsx ├── jsconfig.json ├── next.config.js ├── package.json ├── pages ├── _app.jsx ├── _document.jsx ├── api │ ├── getUser.js │ └── getUserByEmail.js ├── index.jsx ├── new.jsx ├── profile │ └── [username] │ │ ├── edit.jsx │ │ └── index.jsx ├── sign-in.jsx └── walls │ └── [[...username]].jsx ├── postcss.config.js ├── public ├── favicon.png ├── image.png └── vercel.svg ├── styles └── globals.css ├── tailwind.config.js ├── utils ├── admin.js ├── firebase.js ├── useUser.jsx ├── userCookies.js └── userExists.js └── yarn.lock /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next", "next/core-web-vitals"], 3 | "rules": { 4 | "react-hooks/exhaustive-deps": "off", 5 | "react/no-unescaped-entities": "off" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "css.validate": false, 3 | "editor.tabSize": 2, 4 | "editor.defaultFormatter": "esbenp.prettier-vscode", 5 | "editor.formatOnSave": true 6 | } 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This 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). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /components/404.jsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | const FourOhFour = () => { 3 | return ( 4 |
5 |

404

6 |

This page was not found

7 | 8 | 9 | ← Return home 10 | 11 | 12 |
13 | ); 14 | }; 15 | 16 | export default FourOhFour; 17 | -------------------------------------------------------------------------------- /components/AddMessageModal.jsx: -------------------------------------------------------------------------------- 1 | import { Transition, Dialog, RadioGroup } from "@headlessui/react"; 2 | import { useRouter } from "next/router"; 3 | import { Fragment, useState } from "react"; 4 | import firebase from "utils/firebase"; 5 | import useUser from "utils/useUser"; 6 | import { FiCheck } from "react-icons/fi"; 7 | 8 | const backgroundColors = [ 9 | "bg-indigo-600", 10 | "bg-sky-500", 11 | "bg-yellow-200", 12 | "bg-fuchsia-400", 13 | ]; 14 | 15 | const textColors = [ 16 | "text-white", 17 | "text-gray-900", 18 | "text-gray-900", 19 | "text-gray-900", 20 | ]; 21 | 22 | const rotations = [ 23 | "rotate-0", 24 | "rotate-1", 25 | "rotate-2", 26 | "rotate-3", 27 | "-rotate-1", 28 | "-rotate-2", 29 | "-rotate-3", 30 | ]; 31 | 32 | const AddMessageModal = ({ onClose, isOpen, username, wallId }) => { 33 | const [addedMessage, setAddedMessage] = useState(""); 34 | const [colorIdx, setColorIdx] = useState(0); 35 | const { user } = useUser(); 36 | const router = useRouter(); 37 | const addMessage = async () => { 38 | if (addedMessage === "") { 39 | return; 40 | } 41 | const db = firebase.firestore(); 42 | await db 43 | .collection("walls") 44 | .doc(wallId) 45 | .update({ 46 | messages: firebase.firestore.FieldValue.arrayUnion({ 47 | user: user.uid, 48 | message: addedMessage, 49 | timestamp: Date.now(), 50 | backgroundColor: backgroundColors[colorIdx], 51 | textColor: textColors[colorIdx], 52 | rotation: rotations[Math.floor(Math.random() * rotations.length)], 53 | }), 54 | }); 55 | onClose(); 56 | router.reload(); 57 | }; 58 | return ( 59 | <> 60 | 61 | 66 |
67 | 76 | 77 | 78 | 79 | {/* This element is to trick the browser into centering the modal contents. */} 80 | 86 | 95 |
96 | 100 | Add Sticky Note 101 | 102 |
103 |

104 | Add a sticky note to {username}'s sticky note wall! 105 |

106 |