ncsumobiles / spring18_bugle

Visual Interfaces for Mobile Devices - Spring 2018 - Team : Bugle

Bugle Project

Team

Sachin Kumar, Sumit Srivastava, Pooja Gosavi, Nida Syed, Lin Zhu, Shyam Ramakrishnan, Cameron Harris

Tagline

Making a difference just got easier!

Description

Bugle is a mobile website that helps bridge the disconnect between volunteers and volunteering organizations. It provides a platform for volunteers interested to participate in volunteering events that suit their interests. It also helps organizations searching for the enthusiastic volunteers who share their passion.

How to install

• Instructions for running UI: README
• Instructions for running backend: README

Project Milestones:

1. Requirement Gathering and Design

• Gathered requirements from the client: Requirements
• Developed wireframes for the design: Wireframes

2. Construction and Implementation

Following functionalities implemented as part of the construction and implementation phase:

• Login/Sign Up and Profile Page

  • Login and signup functionality for volunteers and organization

• Volunteer Home Page

  • See list of available events to apply
  • Apply for a event

• Organization Home Page

  • Host events

• Event Details Page and Approve/Reject Page

  • Approve or Reject volunteers for the hosted event
  • More description about the event

• Chat Page

  • Volunteers and Organisers can interact with chat
  • Separate persistent chat for each event

• Optional Features (Google Login)

  • Option to login with google authentication

3. User Testing

• Validation of features

4. Deployment

• Deployment of application on Heroku platform for public access.

Technology Stack used

• Node express - UI server
• Play framework - backend server with APIs for transacting data with database
• AngularJS - Frontend of website
• Google authentication - Google sign in.
• Google Maps - maps integration for easier navigation
• Heroku - Deployment platform
• PostgreSQL - database server
• Socket.io - websocket framework for Chat functionality

Features

• Mobile website for Bugle Volunteering app.
• Sign up with email for Volunteers and Organizations.
• Google sign in for Volunteers and Organizations.
• Organizations can host events for volunteers to participate.
• Volunteers can see events based on every organization and apply for the event.
• Organizations can choose volunteers for their events.
• Volunteers can chat with organizers and other volunteers for the event he/she was approved for.
• Google Maps integration for navigation to volunteer site.

Future Work

• Profile rating system for organizations and volunteers.
• Integration with BeenVerified for background verification.
• Option for users to add profile pictures.
• Facebook integration - signin and sharing.
• Chat notifications on mobile devices.
• Email verification and captcha integration

Screenshots:

• Volunteer Screens
• Organization Screens

Screencast:

Progress Reports:

Report 1, Report 2, Report 3, Report 4, Report 5, Report 6.

GitHub:

Bugle on GitHub

Live URL:

Bugle(Deployed on Heroku)

Sample Users:
Organization - email: [email protected], pwd: o1
Volunteer - email: [email protected], pwd: v1

Specification:

Backend API Specification

spring18_bugle's Issues

show message when no events applied by user

In VolunteerEvents page, if the user has not applied to any events, then show a message saying "No events applied"

remove all console logs that LOG objects.

Browser console logs should be removed.

form validation for Create Event page.

The Create Event page needs form validation.

make screencast videos

make screencast videos in 2 parts:

• volunteer flow
• organization flow.

Logout

Create a logout button.

fix css for Google Sign in button

show a list of approved volunteers for an event

Currently the organizer cannot see a list of the approved volunteers for an event.
Show the list of approved volunteers on chat page and/or from a button click on orgEventDetails page.

Call Approve/Reject APIs from front end.

call the API for approving or rejecting volunteers from the event volunteers page.

Auto scroll chat box

chat box stays on chat and new messages are not visible. It should automatically scroll to the latest message.

Create Event page not displaying correctly on mobile.

Project Documentation.

Project Documentation

Volunteer sign up page not showing up as full screen.

Show event details to volunteers

• Show event details when user clicks on an event from a list of events.

session management

implement session management.

Long Usernames get wrapped in header.

In pages which also have a back button, the longer usernames get wrapped to the next line.

Show apply Event buttons on events page to volunteers

In orgEvents.html page, display an apply button for volunteers to apply to events.

correspondingly, show "Join Event" or "Leave Event" button on event details depending on whether user has already joined the event or not.

Scope user is not set properly during register.

When a new user registers, the scope user is not set properly, causing the username not displaying on the header and the profile page not displaying any content.

Create back button for Create events page

• Create a back button (or a cancel button on the bottom) on the create events page.

user email should not be case sensitive while login

ignore case while matching for username

Chat ID - Event ID mapping

Chat ID is currently auto incremented from 1. It needs to be set to event id or chat id!

Create Edit Event Page

When an organization user taps on any of their events, instead of taking him to the volunteers tab, show a page that shows him the event details and allows him to edit the event details.

Format Chat box

format chat box to

• highlight user message
• distinguish between messages of different users
• align left/right based on who is sending [if possible]

[Optional] Open Location picker on maps from the create events page

on create events page, open maps for the location picker.

Load old chat messages

when a user leaves the chat page, all the history goes away.
we need to store the chat on user's local storage and display it to him when he is back on the chat page.

Organization sign up page not showing up as full screen.

Show event list to volunteers

• Show list of events when user clicks on an organization from his home page.

[Optional] Try to improve UI design/theme

• see if we can make use of ng material design tabs, UI
• make use of some icons (e.g.: fontawesome)

create api for edit profile.

API details:
POST,
JSON format:
`{ uId: 2, <column_name>: '' }

fix margins of header and footer.

Header and footer taking up too much margin causing the main content to scroll (e.g. Create Event page)

no tab is highlighted on the volunteer info page

In the volunteer info page, the correct tab (chat or volunteers) should be highlighted.

fix db reset problem

sqlite database gets reset whenever server goes to sleep. Try using Postgres instead.

Bottom nav bar not at bottom in few pages.

The bottom nav bar is not at the bottom on the Organization Home page and the Event volunteers page.

hide the (disabled) back button on first level pages

back button is confusing when it is disabled. hide it for the first level pages and keep the empty button (i.e. the title should not shift left).

fix back button css

back button CSS needs to be fixed.

Create Back buttons for 2nd level pages.

• Event Details Page.
• Edit Profile Page. (if in a new page)

volunteer events not fetched correctly.

check the query for fetching volunteer events.

Show a message when no chat groups.

If a user is not approved for any events then they will have no chat groups. Show a message saying "You have not been approved for any volunteering events yet" in place of an empty screen

incorrect org detials from event details page

When the user clicks on event details page from his applied events, the organization details are not loaded correctly in the scope causing the organization name to be displayed incorrectly.

[Optional] Sign in using google

add option to sign in using google account

show data loading for google signin