Final Project Submission - youFree?

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ],
+    "@babel/preset-react"
+  ]
+}

.env

@@ -0,0 +1,3 @@
+MONGO_USER=you-free
+MONGO_PASS=you-free-fskmc
+HOST=cluster0.iamypcf.mongodb.net

.gitignore

@@ -0,0 +1,16 @@
+
+.cache/
+coverage/
+dist/*
+!dist/index.html
+node_modules/
+*.log
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

README.md

@@ -1,49 +1,25 @@
-# Final Project
-*Due before the start of class, October 13th (final day of the term)*
+# youFree?
 
-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.
+Frank McShan, Serena Mower, Kaelin Panneton, Molly Sunray, and Cindy Trac
 
-## General description
-Your project should consist of a complete Web application, exhibiting facets of the three main sections of the course material:
+## 1. Description
+Our initial goal was to make an improved when2meet, a popular tool used at WPI for scheduling meetings and other activities. The user starts out on a login page in which they can input a username and password. They are then taken to a home page that lists any events they have created and any events they have been invited to. The user can view any of their events to edit their availability. The user can also create new events for a generic week with just the names of days or a custom week with specific dates. They can also decide the number of days they want to display on the calendar, such as 7 for a full week or 5 for a work week.
 
-- 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.
+The user who creates an event will have access to inviting other users to provide their availability. This event creator also has access to the list of times when all invited users are available. In addition, users can delete events from the home page so that irrelevant and past events can be removed from view.
 
-## 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. 
+Project Link: https://you-free.glitch.me/
 
-### Deliverables
+## 2. Instructions
+A user can create an account by simply inputting a username and password combination that has not been used before. If the user is a new user, they are informed that an account has been created for them. If the user already has an account and inputs the wrong password for their username, the login fails.
 
-#### 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.
+## 3. Technologies Used
+The technologies we used in our project were: HTML, Bootstrap, JavaScript, React, Express, Node.js, and MongoDB. We used HTML to structure parts of our application and Bootstrap to style our application. We used JavaScript to provide functionality for user interactions and React to structure the main parts of our application into reusable components. We used Express and Node.js to implement the server. MongoDB was used to store data about users and events. Lastly, we used the react-scheduler-selector package for the calendar display that is shown when creating and editing a youFree event.
 
-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.
+## 4. Project Challenges
+We faced a lot of challenges when creating our project, especially with implementing the main functionality of the calendar and being able to create an event. Our initial plan was to use interface.js to be able to select various times in the calendar array, but we ultimately decided to use react-scheduler-selector to be able to make it more interactive and improve the design. Additionally, figuring out the best way to store our data in MongoDB was a challenge. We decided to use two different collections: one for users and one for youFree events. Users in the user collection hold objects that contain the event ID and their availability for those youFree events for both the events they created and the events they were invited to. The youFree collection contains the creator of the youFree along with the list of invited users. We also had to figure out the best way to handle user interaction for events based on whether a user was a creator or had been invited to the event. In addition, we originally planned to utilize Microsoft Authentication for users to be able to connect their Outlook calendar to upload into their event availability. This proved to be more difficult than we originally expected and we decided to scrap this in order to focus on completing the main functionality of our app. We also found our original plan to send email notifications to invite users to events and modify the display from react-scheduler-selector to handle multiple responses (yes, no, maybe) to be challenging and chose not to implement it.
 
-#### 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.
+## 5. Work Breakdown
+Serena and Kaelin were responsible for the implementation of the calendar page, such as being able to adjust the different settings for the youFree, and the act of a user being able to create a youFree event. Additionally, Serena was responsible for the functionality of determining the available times for youFrees, along with assisting in other aspects of the project when help was needed. Frank was responsible for the design and overall layout of the login page and the home page that displays all of the events for a user. Aside from contributing to the design of the other pages, Frank implemented the login functionality and the associated UI alerts shown to users. Molly was responsible for creating the home page, implementing the ability to delete events, implementing the ability to invite users, helping with the login page, and contributing to the overall design and layout of different pages. Cindy was in charge of the act of creating a user that is able to access various events and the permissions of owners vs. users.
 
-There are no other scheduled checkpoints for your project. 
-
-#### 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.
-
-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.
-
-The README for your second pull request doesn’t need to be a formal report, but it should contain:
-
-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.
-
-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
-
-- **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.
+## 6. Project Video
+[youFree? Video Link](https://youtu.be/I25TkdYtDjw)

dist/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>youFree?</title>
+        <meta charset="utf-8">
+        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+    </head>
+    <body>
+        <div id="root"></div>
+        <script src="bundle.js"></script>
+    </body>
+</html>