rgposadas / mull Goto Github PK

User Story Description

As a host, I want to add the event location to my event so that participants can know where the event is hosted.

User Acceptance Flow

1. While creating an event, user has to fill in location field
2. Location field is autocompletes
3. User can choose between two options:
   1. Use current location
   2. Enter an address

Acceptance Criteria

• User acceptance flow is respected
• Documentation present where needed
• Unit and UI tests are implemented for every component and function
• There must exist an automated Cypress acceptance test in GIF form
• Must match Mockup

Issue Tracking

This acceptance test is for #27.
See the E2E test running here.

User Acceptance Flow

1. User presses "Create Event" button on the navigation bar
2. User fills in an event form (without uploading photo and location)
   a. If user submits invalid data, then error messages show up
3. User submits event form
4. User gets a confirmation that the event was created successfully.

Task Description

As a developer, I want to develop the business logic for multiple registration options to be able to implement the user flow.

Acceptance Criteria

• Registration is possible using an existing service (Google, Twitter, Facebook) or email.
• Documentation present for every new component and function where necessary
• Unit tests are implemented.

User Story Description

As a user, I want to have a tool that is able to identify different types of trash using my mobile camera so that the waste can be properly disposed of/recycled during events.

User Acceptance Flow

1. User presses on the Waste Recognition Tool button
2. Application requests access to the camera
3. User points the camera at an object they want to identify
4. Tool identifies the type of waste by showing icons that are hovering over the waste

Acceptance Criteria

• User Acceptance Flow is respected
• The model should run continuously on the camera feed of the user, making predictions as many times per second as possible
• The output of the model should be processed #190 , then displayed graphically on the user's screen #191
• There must exist an automated Cypress acceptance test which tests the user acceptance flow
• Documentation present where necessary
• Unit and UI tests are implemented for every new component and function
• The application should still work with seeded data
• Must match Mockup

User Story Description

As a user, I want to be able to join an event that interests me.

User Acceptance Flow

1. User logs in (Logged in user can be hard coded)
2. User finds an event that interests them on the Discover tab of the Home page
   2.a User presses on the event card, bringing us to the preview page for the event. User presses "Join" on the event preview page
   2.b User presses the join event button on the event card

Acceptance Criteria

• GraphQL mutation for adding users as participants to an event is implemented
• User Acceptance Flow is respected
• Documentation present where necessary
• Unit and UI tests are implemented for every component and function
• There must exist an automated Cypress acceptance test in GIF form
• Must match Mockup

*Dummy users can be used if logging is not completed - #99

User Story Description

As a user, I want to have multiple registration options so that I have the choice of registering with an existing service (Google, etc) or through email.

User Acceptance Flow

1. User opens the app
2. User sees multiple ways of registering
   a. Through an existing service (Google, Twitter, Facebook, etc)
   b. Using user's email
3. User chooses an option to make a Müll account

Acceptance Criteria

• User acceptance flow is respected
• Registration page is implemented
• Documentation present for every new component and function
• Unit and UI tests are implemented for every component and function
• There must exist an automated Cypress acceptance test
• Must match Mockup

Task Description

As a developer I want to have back-end GraphQL queries to:

• Discover relevant events
• See upcoming events a user has joined
• See events hosted by a user

Acceptance Criteria

• Events are ordered by event start date
• Able to query relevant events, upcoming events and events hosted by a user
• Documentation present for every new component and function where necessary
• Unit tests implemented for every function

*Hardcoded users for this task is sufficient
*Relevant events can be querying all events for this task

As a user, I want to be able to discover and join events so that I am able to participate in cleaning up littered areas.

Task Description

As a developer, I want to setup a basic and functional testing infrastructure so that other developers can build on top of this testing foundation.

Acceptance Criteria
Make sure all testing is setup before development starts:

• Setup Jest unit tests
• Setup Cypress e2e tests
• Setup React Test Renderer UI snapshot tests
• Travis runs tests that are runnable on CI

As a host, I want to be able to create events so that I am able to coordinate a group of people to clean up a littered area.

Spike Description

All frontend tickets will rely on react state management. Therefore, it is important to de-risk and have the knowledge to implement Apollo GraphQL or Redux.

Timebox

2-3 Days

After the Timebox

Don't forget to document all spike findings as comments within the spike issue.

Issue Tracking

This acceptance test is for #29.
See the test running here. Please keep in mind it's still the US-1.1 GIF, however it is updated to include location.

User Acceptance Flow

1. While creating an event, user has to fill in location field
2. Location field is autocompletes
3. User can choose between two options:
   1. Use current location
   2. Enter an address

As a user, I want to be able to communicate with other people so that I can express myself on the platform and during events.

Task Description

As a developer, I want to be able to train and deploy a machine learning model so that it can be used within the web application.

Extra Description

• Training will be done on a YoloV3 model using darknet
• Model with be converted to a Tensorflow.js compatible format to be used in the browser.
• Model with be uploaded to Github or some other file sharing platform so that it can be downloaded by the Mull application when needed.

Acceptance Criteria

• Training pipeline can be done on a local computer
• Documentation present for the process of training and deployment of the model

Hints:

• During spike, training 2 classes with ~100 images/class took 9 hours on google collab (free version).
• Train on:
  • Google Collab Pro (wary of being kicked out due to inactivity)
  • Locally
  • Other platforms: https://analyticsindiamag.com/5-alternatives-to-google-colab-for-data-scientists/

Task Description
As a developer, I want to update the mobile and desktop navigation bars so that it matches the updated mockups.

Extra Description
Since the Profile icon is now on the mobile upper nav bar and the Messages icon replaces it, both the desktop and mobile nav bars have to be updated.

Pre-requisites

• React component hierarchy exists for devs to follow

Acceptance Criteria

• Mull logo accommodates notches
• Nav bar shows all the buttons and each button is routed (but can lead to dead links)
• Documentation present for every new component and function
• Unit and UI tests are implemented for every component and function
• Must match Mockup

As a user, I want the ability to share on various social media platforms so that people can see my profile and events of interest.

Issue Tracking

This acceptance test is for #30.
See the test running here.

Note: The current E2E covers 1.b only as 1.a will be completed along with #99.

User Acceptance Flow

1. User opens the app
2. User sees multiple ways of registering
   a. Through an existing service (Google, Twitter, Facebook, etc)
   b. Using user's email
3. User chooses an option to make a Müll account

Issue Tracking

This acceptance test is for #66 .
See the test running here.

User Acceptance Flow

1. User logs in (Logged in user can be hard coded)
2. User finds an event that interests them on the Discover tab of the Home page
   2.a User presses on the event card, bringing us to the preview page for the event. User presses "Join" on the event preview page
   2.b User presses the join event button on the event card

As a user, I want to have an account and profile on the Müll platform so that I can login and have a way to track my activity on the app.

Issue Tracking

This acceptance test is for #33.
See the test running here.

User Acceptance Flow

1. User presses on the Waste Recognition Tool button
2. Application requests access to the camera
3. User points the camera at an object they want to identify
4. Tool identifies the type of waste by showing icons that are hovering over the waste

Please note that the acceptance test GIFs are manual since it was difficult to make E2E tests for the ML tool.

Task Description

As a developer, I want the correct projects to be linted, tested and built depending on the context so that resources are utilized optimally.

Extra Description

The Nx CLI offers a powerful feature called affected, where Nx determines what projects in your workspace were affected by newly introduced changes so that only the relevant parts of the codebase are linted, tested and built. Nx does it by comparing the current HEAD with a BASE, both of which can be set manually. By default, the BASE is master, but this isn't always going to be accurate, since features branches will be merged into develop, not master. In such cases, develop should be the BASE, so that the correct diff can be calculated.

Hints:

• TravicCI lets you set environment variables to
• https://docs.travis-ci.com/user/docker/
• https://nx.dev/angular/cli/affected

Acceptance Criteria
Modify the travis config yaml to do the following:

• If the current branch is master, lint, test and build all projects
• If the current branch is develop, only lint, test and build affected projects, and set BASE to master (default)
• If the current branch is a feature branch, only lint, test and build affected projects, and set BASE to develop (default)

Spike Description

The trash recognition feature of our application is arguably the most technically uncertain part of the feature set. Although our proposal examined the possible options of libraries and/or approaches, the uncertainties and limitations of the approaches possible to us need to be explored.

• Document all viable approaches to in-browser (pref. real-time) object detection
• Create a proof-of-concept which can run in the browser and detect object from the user's camera

Timebox
2 weeks

After the Timebox
Don't forget to document all spike findings as comments within the spike issue.

Task Description

As a developer, I want the "Discover", "Upcoming", and "My events" tabs to be implemented so that other user story can be supported.

Acceptance Criteria

• The tabs are implemented for the discovery page and the user can swipe/tap to switch between tabs.
• Each tab is routed, but can lead to dead links or pages
• Documentation present for every new component and function
• Unit and UI tests are implemented for every component and function
• Must match Mockup

Task Description

As a developer, I want to setup a local dev database so that we can start developing and storing our data.

Acceptance Criteria

• Database matches ER diagram
• Documentation for how to setup your own local database to work with our project
• Documentation present for every new component and function

 * Description of Function/Component
 *
 * @param param1 Description of parameter 1
 * @param param2 Description of parameter 2

Issue Tracking

This acceptance test is for #65 .
See the test running here.

User Acceptance Flow

1. User lands on the home page, which is the discover page
2. User can choose to see:
   1. events relevant to them
   2. Upcoming events that they joined
   3. The events they created

Issue Tracking

This acceptance test is for #48.
See the test running here.

User Acceptance Flow

1. User completed filling out the form
2. Press on "Submit" button
3. User is able to review the event information
   1. If user is unsatisfied with the form, user presses on "Edit" and returns to the form to make changes

Task Description

As a developer, I want a event page so that user can look at the details of an event.

Extra Description

This page will be used in multiple places in the application, including when the user joins an event (#66), and when the user reviews an event they are about to create (#48). This task aims to support such user stories.

Subtasks

17.1 Back button Now a separate task #78

• 17.2 Event page header
• 17.3 Event info
• 17.4 Mull button
• 17.5 Integrate Components into this task.

Acceptance Criteria

• Documentation present where necessary
• Unit and UI tests are implemented for every component and function
• Must match Mockup

Task Description

As a developer, I want to setup Storybook so that it enables us to create robust, reusable, and testable UI components.

Acceptance Criteria

• Setup Storybook UI component tests
• Travis runs all runnable tests on CI
• Setup a Storybook knowledge handover meeting with the team
• Documentation exists as to how to implement and run Storybook tests

Spike Description
Before we start the development of our PWA application, I thought it would be a good idea to first get a proof of concept project working with all of the major "mobile-native" features we plan to use for our project. These features include:

• Camera
  • Photos
  • Video
• Location Services
• Push notifications

This POC will be developed as a separate React PWA application on the cris/pwa-poc branch. Progress for implemented features will be given on this issue.

Timebox
How long should the spike take?

It should take a week, so until September 27th.

After the Timebox
Don't forget to document all spike findings as comments within the spike issue.

Task Description

As a developer, I want to set up the navigation bar so that the component is ready for other user stories to be developed on top of it.

Pre-requisites

• React component hierarchy exists for devs to follow

Acceptance Criteria

• Nav bar shows all the buttons and each button is routed (but can lead to dead links)
• Documentation present for every new component and function

 * Description of Function/Component
 *
 * @param param1 Description of parameter 1
 * @param param2 Description of parameter 2

• Unit and UI tests are implemented for every component and function
• Must match Mockup

Task Description

As a developer, I want Travis to trigger Docker builds, so that the appropriate images run on the dev and prod environments.

Acceptance Criteria

• PRs build dev image tags
• Develop branch builds develop tags
• Master branch builds latest tags
• Documentation present

User Story Description

As a host, I want to upload a photo to my event so that participants are able to view the littered area.

User Acceptance Flow

1. While creating an event, user has to upload a photo as their event image
2. When user submits the event form, the uploaded image becomes the event preview image

Acceptance Criteria

• User acceptance flow is respected
• Documentation present where needed
• Unit and UI tests are implemented for every component and function
• There must exist an automated Cypress acceptance test
• Must match Mockup

Task Description

As a developer, I want GraphQL to be set up for communication between the front-end and back-end applications so that we can take advantage to GraphQL's powerful feature set when querying information.

Acceptance Criteria

• Have a working GraphQL setup
• Have functioning GraphQL calls
• Have mock data to test

User Story Description

As a host, I want to review my event before I create it so that I can verify that I’ve filled in the event creation form properly.

User Acceptance Flow

1. User completed filling out the form
2. Press on "Submit" button
3. User is able to review the event information
   1. If user is unsatisfied with the form, user presses on "Edit" and returns to the form to make changes

Pre-requisites

• React component hierarchy exists for devs to follow
• Event Creation form is completed

Acceptance Criteria

• User Acceptance Flow is respected
• Documentation present where necessary
• Unit and UI tests are implemented for every component and function
• There must exist an automated Cypress acceptance test which tests the user acceptance flow
• Must match Mockup

User Story Description

As a user, I want to see a list of events so that I can see events that I can join.

Extra Description

The user should be able to:

• Discover relevant events
• See upcoming Events
• See their own events

User Acceptance Flow

1. User logs in
2. User lands on the home page, which is the discover page
3. User can choose to see:
   1. events relevant to them
   2. Upcoming events that they joined
   3. The events they created

Acceptance Criteria

• User Acceptance Flow is respected
• Documentation present where necessary
• Unit and UI tests are implemented for every component and function
• There must exist an automated Cypress acceptance test in GIF form
• Must match Mockup

*Hardcoded users for this task is sufficient
*Relevant events can be querying all events for this task

Task Description

As a developer, I want to set up a media backend so that it can support stories that uploads media.

Acceptance Criteria

• Media backend is set up and functional
• Can upload and download images
• Can be reachable through a backend endpoint
• Documentation present for every new component and function

 * Description of Function/Component
 *
 * @param param1 Description of parameter 1
 * @param param2 Description of parameter 2

• Unit and UI tests are implemented for every component and function

Task Description

As a developer I want a UI to allow users to create an account using multiple registration options.

Subtasks

• 18.1 Login page
• 18.2 Registration page

Acceptance Criteria

• Documentation present for every new component and function where necessary
• Unit and UI tests are implemented for every component and function
• Must match Mockup

As a user, I want to have a tool that is able to identify different types of waste so that I know what is the best way to dispose and/or recycle different types of litter.

As a user, I want to be able to find the nearest waste disposal locations near me so that I am able to properly dispose and/or recycle the waste that I had just picked up.

User Story Description

As a user, I want the ability to deactivate my account so that all my account data can be deleted.

User Acceptance Flow

1. User is logged in
2. User presses on "Profile" on the navigation bar
3. User presses on "Settings"
4. User presses on "Account Settings"
5. "Delete Account" button is shown
6. Once user decides to delete account, their profile will no longer be searchable and will also be wiped from the database

Pre-requisites

• React component hierarchy exists for devs to follow

Acceptance Criteria

• User acceptance flow is respected
• Documentation present for every new component and function

 * Description of Function/Component
 *
 * @param param1 Description of parameter 1
 * @param param2 Description of parameter 2

• Unit and UI tests are implemented for every component and function
• There must exist an automated Cypress acceptance test in GIF form
• Must match Mockup

Task Description

As a developer, I want to improve the object detection model by gathering data on objects it has trouble detecting so that it can be a useful tool.

Acceptance Criteria

• Repository of training data is available: link (password on Slack)
• Data is saved in the Pascal VOC format
• Gather as much data as possible for the following objects in the Pascal format (list to be expanded as we go):
  • Bottles
  • Food
  • Tin cans
  • Box
  • ...
• After gathering data, some form of accuracy report should be done to assess the performance of the model, and where improvements are needed

Hints:

• Converter which can convert between many standard formats: https://roboflow.com/formats/pascal-voc-xml
  • In general, many tools exist which can convert between different format (ex: "convert to Pascal VOC" on Google). If we can't find what we need, we can just write scripts ourselves and add it to "ml/trash-recognition".
• Good data source: https://storage.googleapis.com/openimages/web/index.html
• Good tool to download from open images: https://pypi.org/project/openimages/
• Good tool to label data manually in the Pascal VOC format: https://github.com/tzutalin/labelImg
• Or maybe even have other models annotate images for us 👀 https://scale.com/image
• ~500 photos minimum per object

Task Description

As a developer, I want to setup SonarCloud so that it will provide use with useful code quality and security reports.

Acceptance Criteria

• SonarCloud is set up and running
• Travis triggers SonarCloud

Task Description

As a developer, I want to implement a generic event card component so that it can be available across the application to support other user stories.

Acceptance Criteria

• Documentation present for relevant new components and functions
• Unit and UI tests are implemented for every component and function
• Must match Mockup

As a user, I want to be able to have friends so that I am able to engage and keep in touch with them on Müll.

User Story Description

As a user, I want the tool to be able to show me more information about the identified trash object so that it can inform me of the type of waste and how to properly dispose/recycle it.

User Acceptance Flow

1. Tool has identified the types of waste the user is pointing at (icon pops up)
2. Pressing on the icons shows more detailed information about the waste
   a. Shows detailed information as to what type of waste it is
   b. Shows recycling/disposing instructions for that type of waste

Acceptance Criteria

• User Acceptance Flow is respected
• There must exist an automated Cypress acceptance test which tests the user acceptance flow
• Documentation present where necessary
• Unit and UI tests are implemented for every new component and function
• The application should still work with seeded data
• Must match Mockup

Task Description

As a developer, I want to setup a UI library so that developers are able to store reusable UI components.

Acceptance Criteria

• Have a UI component library for common components that can be shared across applications

Task Description

As a developer, I want to set up our production environment so that our users are able to access the application.

Acceptance Criteria

• www.mullapp.com routes to prod application's external IP
• Site points to a prod database instead of our dev database
• Documentation present

User Story Description

As a user, I want to have an editable and customizable profile so that I can make my Müll profile engaging.

User Acceptance Flow

1. User logs in to the app
2. User clicks on "Profile" button on the navigation bar
3. User sees their profile
4. User clicks on "Edit Profile" and edits their public profile information (name, description, avatar/icon)
5. User should now see their updated profile

Acceptance Criteria

• User can see their profile
• User can edit their profile fields
• User Acceptance Flow is respected
• Seeder should be updated if needed
• Documentation present where necessary
• Unit and UI tests are implemented for every component and function
• There must exist an automated Cypress acceptance test which tests the user acceptance flow
• Must match Mockup

User Story Description

As a user, I want to create and edit events so that I can coordinate cleanup activities with other users.

User Acceptance Flow

1. User presses "Create Event" button on the navigation bar
2. User fills in an event form (without uploading photo and location)
   a. If user submits invalid data, then error messages show up
3. User submits event form
4. User gets a confirmation that the event was created successfully.

Acceptance Criteria

• User acceptance flow is respected
• Documentation present for every new component and function
• Unit and UI tests are implemented for every component and function
• There must exist an automated Cypress acceptance test in GIF form
• Must match Mockup

Issue Tracking

This acceptance test is for #28.
See the test running here.

User Acceptance Flow

1. While creating an event, user has to upload a photo as their event image
2. When user submits the event form, the uploaded image becomes the event preview image