Our team consists of four members: Manasi Danke, Carla Duarte, Amanda Ezeobiejesi, and Sylvia Lin.
Project: https://fp-md-cd-ae-sl.glitch.me
- Make sure you run npm install if the application is not loading on glitch.
- Sign out of all current gmail accounts.
- Sign into our project team’s gmail account with these credentials:
- Username: [email protected]
- Password: meetingwpi1
- Go to email settings and allow access to less secure apps: https://myaccount.google.com/lesssecureapps
- Go to this link and click “Continue” : http://www.google.com/accounts/DisplayUnlockCaptcha
- If there are any issues, please check our gmail to see if there are any recent emails regarding security. Please check the green "yes" in the email to indicate that this activity was due to our application.
- You are all set! You can now log in with any of these credentials or create and register your own account:
Username: [email protected]
Password: 1234
Username: [email protected]
Password: 1234
Username: [email protected]
Password: 1234
Username: [email protected]
Password: 1234
- If you have any additional questions, please do not hesitate to reach out to us.
"This sounds really really useful! I don't have much experience using Live25 so I'm unclear how much effort it will take to integrate your software with this system. Do you have a backup plan / alternative feature to implement if Live25 integration proves to be too challenging? If you already know this won't be a problem, then you're good to go!" - Charlie Roberts
After reviewing Professor Robert's feedback, we decided to focus our project entirely on creating a room booking service (rather than implementing user availability), since that would be quite a coding challenge in itself. To appropriately limit the scope of our project (to be completed in 2 weeks), we focused on prototyping what an updated room booking service might look like. Our hope for this tool would be that along with booking capabilities, our users would have a concise location to view what reservations they have made.
Groups or teams who need a tool to book meeting spaces.
We created a project management tool that enables users to book rooms based on their availability. We implemented these key features in our project management dashboard:
-
Login functionality that allows users to log in/register in order to save relevant booking information.
-
A room availability dashboard which includes:
- a form that allows users to select which days and times of the week they'd like to book a meeting for, and
- a visual table display of rooms that are already booked for particular times
-
A tool that sends an email to recipients through our application to share booking details and provide confirmation.
-
A table that shows the user's meetings and enables them to delete meetings they have booked.
As students who have worked on large group projects and IQP teams, we know how difficult and how confusing it can be to use 25live to find empty meeting spaces on campus. Our application addresses this issue and provides a solution that enable teams to find a time and place to interact and accomplish their team goals.
Our project is a complete web application:
- Our project has static web page content and design. It is accessible, easily navigable, and features significant content.
- Our project showcases dynamic behavior implemented with JavaScript.
- Our project uses Node.js, uses persistent data (lowdb) and implements authentication through login and register functionality (passport).
- Our project implements middleware and server-side computations.
- Our project implements a form that lets users add, view and delete data that is displayed in varying ways throughout the website.
- Our project lets users delete their bookings from their list of meetings.
-
HTML: divided main pages into their own html files to help modularize the code and display certain content for certain aspects of the site
-
CSS: A bootstrap template found on TemplateMag; we additionally altered CSS through flexbox and editing style, color, font, size,etc...
-
Javascript:
- In general: helped to modify content on the website, interact with user’s actions, and connect the front-end and back-end of the project
- Node.js: used for server-side
- Nodemailer: used to help us send booking confirmation emails from our account to the specified recipients
- Lowdb: used for our database and make sure that our data is persistent
-
Middleware:
- Express: a middleware and routing web framework with minimal functionality that listens for requests and calls the appropriate functions
- bodyParser: parses incoming http request bodies before handlers.
- Passport and Passport-local: authenticates requests through strategies such as the Local strategy(in this example).
- serveStatic: serves static files from the path where files are being drawn from by the application
- Compression: improves the performance of our Node.js, since it decreases the amount of data that is downloaded and served to users
We had to research many components of our application and found resources on Stack Overflow, w3schools, tutorial points, and YouTube.
Additional Technical/Design Achievements:
- nodemailer: used to send emails from our specialized team gmail account that notified recipents of the day, start time, end time, and location of their scheduled meeting.
- Responsive Layout: maintained a responsive layout throughout the entire website. This makes it more convenient for users to book rooms on the go through their mobile devices.
- Login security: We implemented login redirect cards in order to prevent users from booking meetings if they are not logged in.
Our group faced challenges in terms of the scope of the project. Initially, our intent was to recreate a more visually appealing WhenToMeet that would allow users to save their availability for future use. We also wanted to incorporate booking rooms and creating meetings, like 25Live. We quickly realized this would be too much to accomplish in two weeks, so we scaled the project down to simply booking rooms for meetings. Doing so also allowed us to focus heavily on UI design, which was our primary goal in reimagining a service like WhenToMeet or 25Live.
In addition, we encountered a few difficulties when we first began to implement nodemailer. We realized that we needed to log out of all gmail accounts, log into the team gmail account, change the gmail settings to enable less secure app access, log into our gmail to confirm that we made the change to settings, and then click the DisplayUnlockCaptcha link to ensure that our project can send emails from our gmail account.
Carla: Created the server file, established the database, wrote methods for client/server interaction, helped mock and create the meeting page and the room availability page, helped make the logo.
Amanda: Wrote some methods for client interaction (incorporating client experience), helped mock and create the meeting page from scratch, helped fix bugs in the header, made the favicon, and helped make the logo.
Manasi: Created registration page, helped mock and create the meeting page, helped to implement nodemailer functionality, and wrote initial versions of the proposal and final readme.
Sylvia: Created login page from scratch, custom styled CSS on top of the original Bootstrap template, helped create the room availability page, created the booking form from scratch.
If we had more time, we would have implemented the following features:
MM-DD-YYYY System: Made a week-by-week scrolling system that allows the user to book rooms based on a particular week and in accordance with dates from the calendar. For example, a user could book the Friday Kahlo room from 10:00AM - 12:00PM on Oct 15th, 2019 rather than just being limited to the current week Sunday - Monday.
Different Table Layout: Set up the room availability table in a different way (room vs. hours) so it becomes easier to check the most recent available rooms since people are more concerned with the first day they can book any room rather than the actual room Potentially have a dropdown menu so it is easier to switch days
Room Sizes: We would implement different room sizes so that a user can choose if they want to book a room that holds 4 people, 6 people, or 8 people.
Email Functionality: We would change the sending emails functionality so that when an email is sent to the recipients, it shows that that user is the one that booked the room. We could also allow users to add a message in the booking form so all recipients will receive the message.
Past Meetings: For the Meetings page, we would have made it possible for a user to see their past meetings as if stored in their own personal calendar. Possibly a dropdown where the user could select a particular day and that day’s, meetings would show up.