Roles: 

Front-end Developer, web-app developer
Teammates: 1 developer, 1 UX designer

​

Platform: Django, oauth, ngrok

Language: html, css, phyton, javascript, ajax   

Time: 5 Week

​

This is the basic logic and interaction mapping of our primary webpages: 

​

Home page

● Basic homepage, with a description of what the MealShare service does, and how to use it.

● Should have a link to both the login page, and a register page in the top right.

 

Login page

● It should be the basic CMU login page, done through OAuth.

● After logging in, the student will be redirected to the selection page.

● There should also be a hyperlink back to the Home page, so the student can return to that page if need be.

 

Register page

● Ask the student to provide some basic information, first/lastname, profile picture, and an CMU Email address to associate with the account.

● They will then have to verify that they own the specified Email address by logging in, after which, they will be redirected to the selection page.

● There should also be a hyperlink back to the Home page, so the student can return to that page if need be.

 

All of the following pages will have the following, and require a session token:

● There should also be a logout button, a profile button, and a home button in the top right.

● The logout button will log out the user, and return them to the Home page.

● The profile button will direct them to the profile page, where they can update their first/last name, and profile picture.

● The home button, contrary to its name, will return the client to the selection page

 

Selection page

● Students will be asked to choose if they are giving meal blocks, or receiving meal blocks. There should be a simple hyperlink to both the giver main page and the receiver main page, with a short description of each option underneath.

 

Profile page

● Very similar to Social Network, can fill in a new first/last name, and a new profile picture, and update those values.

 

Giver main page

● The giver will be presented with a list of dining locations. They can check any number of dining locations at which they would be willing to give away a meal block.

● Beneath this table, there would be a “search” button, which will redirect them to the results page, with the relevant information

 

Giver results page

● There should be a results table, which contains the list of all the students which are looking to receive a meal in the location(s) specified by the client.

● Each of these results should be selectable. Selecting a student will direct the client to the Giver waiting page

● Below the results table, there should be a “Search again” button, that returns the client to the Giver main page

 

Giver waiting page

● Will initially display a simple message to the effect of “Waiting for *Person name* to confirm…” ● If the receiver confirms in a timely manner: ○ The Client will see a message to the effect of “*Person name* has confirmed. Their exact location is ____. Thank you for your help!”

● If the receiver fails to confirm their location in a timely manner: ○ The Client name will see a message to the effect of “*Person name* has failed to confirm their location, and has been removed from the queue. We apologize for the inconvenience.” ○ Underneath the message will be a button labeled “Return” which will return them to the results page, appropriately updated.

 

Receiver main page

● The receiver will be asked to specify the dining location at which they would like to receive a meal block, through some kind of form.

● Additionally, they’ll be asked to provide an additional comment, wherein they will be asked to specify their exact location within the dining location that they will be waiting.

● Beneath this there will be a button labeled “submit” which will add them to the list of selectable students.

 

Receiver waiting page

● There will be a simple message, to the effect of “You are currently in the queue. An alert will pop up asking you to confirm your location when someone has a meal block to give”

● A button labeled “Back” that will return the client to the Receiver main page.

● In the background there will be a keepalive probe, so that if the receiver closes the browser, the server will remove them from the selectable list in a timely manner.

● When a giver selects the receiver, an alert will pop, asking the client to confirm. ○ If they fail to confirm within a reasonable amount of time, they will be kicked to the Receiver main page. ○ If they do confirm, the message will change to “ *Personname* is on the way! Please remain in the location that you previously specified.”

​