This repository contains the documentation for WhenIsBetter’s frontend.
- Overview
- Views
- Other Important Files
WhenIsBetter’s frontend is based on a Vue.js web framework and runs using Yarn. The application is designed to help users schedule events with others. It utilizes Bootstrap and Bootstrap-Vue to assist in rapid development, as the timeframe to complete the project was shorter than anticipated.
Figure 1: Register Page
New users create a profile by entering their first and last name, a unique email address, and their password. The email address must not already exist in the database.
Figure 2: Login Page
Existing users can enter their email address and password they used to create their account to log into their account.
Users who have administrator status have the ability to see a full list of all users, the groups they are in, and the events that exist within those groups.
Figure 3: Admin Panel Group View
Administrators can view a specific group's members and events by using Group View mode. From there, they can delete any group members or events they deem necessary.
Figure 4: Admin Panel User View
Administrators can also view a specific user in the database. They can make the user an administrator or revoke administrator status instead.
Figure 5: Home Panel
The Home Panel is the main hub that the user interacts with. It is where the user can join, create, or leave groups; create, view, and delete events; mark whether or not they are attending specific group events; and view other group members' availability.
Figure 6: Create Group
A user inputs information about their new group and submits it. The frontend sends API requests to create the new group and add the current user to the group.
Figure 7: Join Group
To join an existing group, a user enters the Invite Code of the group and submits it. The frontend sends an API request that adds the user to the group. After joining, the user inputs their available times for the group and can then view group events and other group members' times.
Figure 8: Create Event
When creating an event, the user enters the event's name, gives it a description, the duration of the event, and the event's start time. The frontend sends an API request to create the new event and associated it with the currently selected group.
Figure 9: View Event
When a user clicks on one of the group's events, they can view the event's properties in more detail. The user can also indicate whether they are attending the event or not by clicking the Yes or No buttons on the event. The user can also delete the event from this view.
Figures 10 and 11: Settings Page
On the Settings page, the user can update their first and/or last name and can also update their default weekly available times for events. They save these settings by clicking the Save button at the bottom of the page.
This file contains the requests that are made to the API and the data required to fulfill those requests.
This file contains the routes that the Vue application uses. It tells the Vue application what navigation options exist in the application.
This file contains authentication methods that are used to check whether a user is logged in or not.
This Vue component file contains the code for the navbar at the top of every view.
When a user presses the Log Out button on the navbar, the Vue instance routes to this file. The logout procedures in auth.js are run, and the user is then redirected to the Login page.