Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules
Empty file added .glitch-assets
Empty file.
81 changes: 37 additions & 44 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,56 +1,49 @@
# cs4241-FinalProject
# WeMeet

For your final project, you'll implement a course project that exhibits your mastery of the course materials.
This project should provide an opportunity to be creative and to pursue individual research and learning.
# Authors: Jenna Galli, Brittany Henriques, Lauren Fleming, Thomas Graham

## General description
1. https://jegalli22-final-project-1.glitch.me/
Our site is a fast and easy way to gather availabilities of group members in an organization. Not only can you create custom meetings,
but you can also log your availibility given a meeting code.

Your project should consist of a complete Web application, exhibiting facets of the three main sections of the course material:
2. To test our site, first create a meeting and get the code required for the availibilty page. Then a user can go back and use that same
code to login to the meeting. Once that is done, enter in your availability and be taken to page to see all the availabilities of the
members of your group. In a working enviorment, the meeting creator would send out the meeting code with the link so group members can login right away.

- 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, authentication, and possibly server-side computation. Ideally it will also include support for realtime commmunication as discussed below.
- Groups are *highly encouraged* to consider including some type of realtime communication technology in their projects (chat, networked multiplayer games, collaborative coding/editing, video/audio via WebRTC etc.) We'll be discussing many of these technologies in class next week.
- 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.
3. We used Node JS with an express server paired with MondoDB for our server side. This was done because of our knowledge of these technologies
from previous assignments in the course. We used the express server and the MongoDB in order to hold the various data sets we had.
When a user makes a schedule, an ID is created within the server and is stored with the days and times that they selected. Users are then able
to take that code and enter it (along with their name and email) to load the schedule. Once a user submits their availability, this data is
sent back to the server and stored under the schedule ID. The ID can then be used to fectch all the different availabilites submitted by
different users and shows the different availability levels of the group as a whole.

## Project ideation
4. There were a lot of issues on our backend working with our front end. Many of our requests weren't behaving as intended which led to a lot of frustration and
change in the movement of flow of the program. For example, we ran into issues working with forms to submit data to the DB and have that data load onto our pages.
For a reason we still do not know, whenever we used a form to take in the scheudle ID from the user, it would reload and reset the page. Since then we
have taken the components we need out of the form, and instead created a div that works like the form. Another issue we ran into was how to take the data that the
user put into the availability take and convert it to data that would be used to create a compiled table of all users schedules. We solved this by creating a
series of arrays that looped through the table in order to get the data, and is then used to populate the compiled data. We also used nested fetch statements to
retrieve data from both the meeting object and the user objects. These issues did take up a lot of time, and therefore led us to remove some features prevousily
mentioned in our proposal.

Excellent projects 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. Consider creating something useful for a cause or hobby you care about.
5. Jenna Galli: I worked mostly on the create meeting page and the login and availibilty page and their relationship with the server. Many times I had to think of
workarounds due to our time limit and functionality of our program. One of the features I implemented on the create Meeting Page
was the ability to choose specific days of the week for a meeting. I also discussed with my group various ways
to have our website flow and the advantages and disadvantages for the user.

## Logistics
Brittany Henriques: I worked mostly on the front end of the login, availability, and index pages, and aided in creating a basis for the various functions that we needed.
I helped with the function that was needed to created the availability table and the listeners necessary for it, as well as figuring out how to get our front end to work
with our back end. I also helped create the color scheme we use with inspiration from the glitch dream program, and worked on styling the layout of our application in
hopes of creating the best user experience.

### Team size
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 will allow you to build a good project in a limited amount of time.
Lauren Fleming: I worked mostly on the front end of the scheduling and availability pages. I implemented the features on the scheduling page that that creat a color scale and
display cumulative availability for each time block. I also created the event listener which shows the people who are available, tentative, and busy for each time block that
is clicked on, and added a cursive Google font to make the site prettier.

### Deliverables
Thomas Graham: I worked mostly on the server and the login page. On there mostly I worked with the mongodb database and how the pages interact with each other. This is
for example like the submitting of a form and how the objects get to the database.

__Proposal:__
Provide an outline of your project direction and the names of the 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.
This file must be named proposal.md so we can find it.
Submit a PR to turn it in by Monday, 11:59 PM

There are no other scheduled checkpoints for your project.

#### Turning in Your Outline / Project

**NOTE: code is due before the project presentation day due to the end of term / grading schedule constraints**
Submit a second PR on the final project repo to turn in your app and code.

Deploy your app, in the form of a webpage, to Glitch/Heroku/Digital Ocean or some other service.
Folks on the same team do not need to post the same webpage, but must instead clearly state who is on the team in their proposal.

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.
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.
6. A link to your project video: https://www.youtube.com/watch?v=Ejh5Z3ctJX0

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 language should be either JavaScript or TypeScript.
-We used a Google font called Dancing Script.
Loading