final-project-emoji-place

.env

@@ -0,0 +1,7 @@
+MONGODB_PASS = "N9HypCNxckUlcgd1"
+MONGODB_USER = "michaeloconnor1717"
+MONGODB_HOST = "r-place-cluster.9odz6aw.mongodb.net"
+MONGODB_URI = "mongodb+srv://michaeloconnor1717:[email protected]"
+SESSION_SECRET = "ffwbFBWRWRUWOUVBKJBVGRWUTHQ359"
+GITHUB_CLIENT_ID = "f94b6eaf5d174c10fd80"
+GITHUB_CLIENT_SECRET = "bd9cd599329e946f308007cb0033c23197a8d220"

.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.vscode/
+
+# Ignore compiled javascript
+server/*.js
+
+server/Routes/*.js
+server/DB_Schema/*.js
+
+# Environment file
+.env
+
+# Environment file
+/.env
+./.env

README.md

@@ -1,49 +1,66 @@
-# Final Project
-*Due before the start of class, October 13th (final day of the term)*
+# Emoji Place 🌍
+Welcome to Emoji Place! Similar to r/place, but rather than putting a colored square on a grid, the user can put an emoji. r/place was a project by reddit that allowed users to draw on a 1000 by 1000 pixel canvas. Each user was able to place one pixel every 5 minutes. Our project is targeted towards an audience similar to Reddit's for the purpose of artistic creativity.
 
-For your final project, you'll implement a web application that exhibits understanding of the course materials. 
-This project should provide an opportunity to both be creative and to pursue individual research and learning goals.
 
-## General description
-Your project should consist of a complete Web application, exhibiting facets of the three main sections of the course material:
+[Original r/place](https://www.reddit.com/r/place/cx=1256&cy=1781&px=214&ts=1649112460185)
 
-- Static web page content and design. You should have a project that is accessible, easily navigable, and features significant content.
-- Dynamic behavior implemented with JavaScript (TypeScript is also allowed if your group wants to explore it).
-- Server-side programming *using Node.js*. Typically this will take the form of some sort of persistent data (database), authentication, and possibly server-side computation. 
-- A video (less than five minutes) where each group member explains some aspect of the project. An easy way to produce this video is for you all the groups members to join a Zoom call that is recorded; each member can share their screen when they discuss the project or one member can "drive" the interface while other members narrate (this second option will probably work better.) The video should be posted on YouTube or some other accessible video hosting service. Make sure your video is less than five minutes, but long enough to successfully  explain your project and show it in action. There is no minimum video length.
+When first connnected to the project, the user is brought into the login page. Upon clicking the login button, the user will be prompted to authorize their login with Github. After logging in, the user can use the Emoji picker on the bottom left corner to pick an emoji, then pick a place on the canvas to put the emoji. To place an emoji, click the **add emoji** button on the bottom. The user can also zoom in and out of the canvas and logout using the top right button. For this version of our application, there is no time out for placing an emoji.
 
-## Project ideation
-Excellent projects typically serve someone/some group; for this assignment you need to define your users and stakeholders. I encourage you to identify projects that will have impact, either artistically, politically, or in terms of productivity. 
 
-### Deliverables
+## Link to Project on Digital Ocean
+[Emoji Place](http://157.230.2.81:3000/login)
 
-#### Form Team (due 9/25)
-Students are will work in teams of 3-5 students for the project; teams of two can be approved with the permission of the instructor. Working in teams should help enable you to build a good project in a limited amount of time.  Use the `#project-logistics` channel in Discord to pitch ideas for final projects and/or find fellow team members as needed.
+## Link to Video Explanation
+[Emoji Place Video](https://drive.google.com/file/d/1UvAO8q8GtukD80_0buDFhUUwEAlXt-fz/view?usp=sharing)
 
-Teams must be in place by end of day on Sunday, September 25th. If you have not identified a team at this point, you will be assigned a team. You will be given some class time on Monday to work on your proposal, but please plan on reserving additional time outside of class as needed.
 
-#### Proposal (due 9/27) 
-Provide an outline of your project direction and the names of associated team members. 
-The outline should have enough detail so that staff can determine if it meets the minimum expectations, or if it goes too far to be reasonable by the deadline. Please include a general description of a project, and list of key technologies/libraries you plan on using (e.g. React, Three.js, Svelte, TypeScript etc.). Two to four paragraps should provide enough level of detail. Name the file proposal.md and submit a pull request by Tuesday, September 27th at 11:59 PM (end of day). Only one pull request is required per team.
+## Group Member Contributions
 
-There are no other scheduled checkpoints for your project. 
+### All Members
+We all contributed to the overall design and planning process for how the architecture of our web app would work. We also worked together to make an mockup for how the UI should be laid out.
 
-#### Turning in Your Project
-Submit a second PR on the final project repo to turn in your app and code. Again, only one pull request per team.
+### Qui
+I developed the entirety of the Canvas page and all of its interactions, such as placing the emojis and the React component rendering architecture. I also helped with the express.js routing and handling client-side routing.
 
-Deploy your app, in the form of a webpage, to Glitch/Heroku/Digital Ocean or some other service; it is critical that the application functions correctly wherever you post it.
+### Cameron
+I primarily developed the express server and its interaction with the client. I developed the caching solution that stored the emoji grid on the server’s memory.I set up the hosting for the server on a DigitalOcean droplet and debugged some relevant routing issues that resulted from the move.
 
-The README for your second pull request doesn’t need to be a formal report, but it should contain:
+### Michael
+I primarily developed the persistent data storage system that utilized the mongoose JS library and MongoDB Atlas. This required developing schema for both each individual square (or cell) in the canvas grid and the user. I also wrote the necessary middleware to update and insert data into the MongoDB collections.
 
-1. A brief description of what you created, and a link to the project itself (two paragraphs of text)
-2. Any additional instructions that might be needed to fully use your project (login information etc.)
-3. An outline of the technologies you used and how you used them.
-4. What challenges you faced in completing the project.
-5. What each group member was responsible for designing / developing.
-6. A link to your project video.
+### Mary
+I used MUI to format the login page as well as helped with UI problems that developed during implementation of the canvas page with converting Emoji Unicode to HTML. 
 
-Think of 1,3, and 4 in particular in a similar vein to the design / tech achievements for A1—A4… make a case for why what you did was challenging and why your implementation deserves a grade of 100%.
 
-## FAQs
+## Technical Achievements:
+- **React framework**: Used client-side routing to handle switching between the login and canvas page. We did this because our application is cross-origin.
+- **Single page application (SPA)**: Our application is a SPA through the use of React and React Router.
+- **Express Router**: Use of express.js to handle user authentication and routing. Users cannot access /canvas without being authenticated (will reroute to /login).
+- **OAuthentication**: Uses passport.js with the GitHub Strategy for authentication and integrated with a cross orgin platform (React and express.js).
+- **Digital Ocean**: Website is hosted on a Digitalocean Ubuntu droplet.
+- **Typescript**: Used Typescript to write the front and back end of the web app to ensure semantic bugs could be caught at compile-time.
+- **dotenv**: Used the `dotenv` library to securely load database and authentication credentials into the server.
+- **Use of external middleware**
+    - ```cors```: Handling for CORS policy.
+    - ```express-session```: Storing session data.
+    - ```passport```: OAuth.
+    - ```passport-github2```: OAuth method.
+- **Use of custom middleware**
+    - ```checkAuthenication```: Checks if the current user is authenticated on GitHub.
 
-- **Can I use XYZ framework?** You can use any web-based frameworks or tools available, but for your server programming you need to use Node.js. Your client-side scripting language should be either JavaScript or TypeScript.
+
+## Design Achievements:
+- **CSS Framework:** We used Material UI for our CSS framework to create the bulk of our design. This helped speed up the development process as we initially designed our application to follow the Material UI design schema.
+- **Customized Color Scheme:** We used a customized color scheme that can be seen on our Figma: https://www.figma.com/team_invite/redeem/GcZo9RJ1MTxAC9ysCwj09P
+- **Use of React Components**
+    - ```react-emoji-picker```: Used to select emoji.
+    - ```react-router-dom```: Used for client-side routing.
+    - ```@pronestor/react-zoom-pan-pinch```: Used for panning and zooming of canvas.
+
+## Challenges
+- **Canvas Rerendering**: With the canvas page, we used an external library to handle our zooming and panning features. It works by using CSS translate to do the movements; however, this caused a reload on the Canvas.tsx component and made the canvas rerender all of the emojis. To fix this, we memoized the Grid component into a separate component and abstracted out the Pixel. Additionally, to initially load Canvas.tsx and its emojis, we had to disable the canvas completely until our ```useEffect``` side effect ran after the initial render. From there, we did a ```fetch``` to get the grid array and then assigned it to a state using ```useState```. We then did a force rerender using the ```[render, rerender]``` hack, which causes the component to render with the emoji data.
+- **Transition to Typescript**: Several of the libraries we used did not have perfect integration with Typescript. This resulted in several compiler errors that traced back to code outside of our project.
+- **Switching to React-Router**: ```react-router-dom``` worked completely differently from express-router. React-router handles routing completely locally, so we had to re-write our routing code on the server-side.
+- **Emoji Unicode**: Rendering the emojis was difficult because they are written in unicode. Unfortunately, there is no great method to converting unicode to HTML code, especially with the introduction of the more advanced emojis. To combat this problem, we took the DOM-compiled Emoji component and manipulated how it was displaying post-processing from React. The component is transformed into an image that had a URL to the emoji it was displaying. We took this and altered the URL with the correct unicode. To make sure that we synced with the server, we still made a request to the server to update the data.
+- **Websockets**: Getting real-time updates to the canvas using websockets was largely separate from normal fetch requests made to the server. Ensuring that an active Websocket connection didn't bypass any of the OAuth protocols was a challenge. We had to ensure that a websocket connection was never established in an unauthenticated user.
+- **Array Ordering**: Pulling a large amount of data from a database is typically not a problem because the order the data returned is irrelevant as long as all of the data is provided. However, for our application, the cells needed to be ordered for the cached array to reduce the overall number of database calls. Additionally, the array also needed to be properly ordered on client side so they are displayed correctly. The process of discovering this particular bug was long and painful as the emojis were not updated correctly as the index value was essentially random everytime they were updated. We eventually used a sort method to ensure the data was ordered on arrival to the client and server. 

example.env

@@ -0,0 +1,2 @@
+MONGODB_PASS="password"
+MONGODB_USER="username"