som-timer / som_timer_fe Goto Github PK

Feature Categories:

• React

Describe the feature/Bug your gonna work on

• Add functionality for skip button
• Configure React Player with appropriate props / options we want

Feature Categories:

• Express
• React
• Styling/CSS
• Documentation
• Other:

Describe the feature/Bug your gonna work on
-Create wireframes for basic views needed on the app

Additional context
Add any other context or screenshots about the feature.

Feature Categories:

• React

Describe the feature/Bug your gonna work on

• Add test suite for Settings component
  • Unit test for inputs
  • Determine what testing needs to happen to connect Settings Context to timer component

Feature Categories:

• Testing

Describe the feature/Bug your gonna work on

• Add tests for Content Selection component

Additional context
Add any other context or screenshots about the feature.

Feature Categories:

• React

Describe the feature/Bug your gonna work on

• Make use of React Compound Timer package & hook that up
• Use state management with hooks for work/break intervals from settings
• Hook up buttons for play, pause, skip, reset

Feature Categories:

• Testing

Describe the feature/Bug your gonna work on

• Add tests for header component
• Try to use TDD to concurrently test and build

Additional context
Add any other context or screenshots about the feature.

Feature Categories:

• React testing

Describe the feature/Bug your gonna work on

• Test that all needed UI renders on About page
• There will likely be no functionality to test

Feature Categories:

• Styling/CSS

Describe the feature/Bug your gonna work on

• Choose basic color palette & fonts
• Create variables partial for SCSS

Additional context
Add any other context or screenshots about the feature.

Potential Color Palettes

Feature Categories:

• React
• Testing

Describe the feature/Bug your gonna work on

• Test Timer component as fully as possible at this point
• Test concurrently with building to make use of TDD as much as possible

Tune up styling for timer component

Feature Categories:

• React
• Styling/CSS

Describe the feature/Bug your gonna work on

• Build out basic UI & design for the primary work interval timer view

Additional context

Feature Categories:

• Styling/CSS

Describe the feature/Bug your gonna work on

• Finalize header icons & add
• Finalize header design

Feature Categories:

• React

Describe the feature/Bug your gonna work on

• Add functionality to buttons

Feature Categories:

• Testing

Describe the feature/Bug your gonna work on

• Add tests for content delivery component
• Try to use TDD to do this concurrently with creation of UI/functionality

Feature Categories:

• Express
• React
• Styling/CSS
• Documentation
• Other:

Describe the feature/Bug your gonna work on
Make Team DTR!

Feature Categories:

• Heroku / CI

Describe the feature/Bug your gonna work on

• Deployed app is not updating correctly;
• Probably need help figuring out what is wrong

Feature Categories:

• React

Describe the feature/Bug your gonna work on

• create-react-app comes with a built in ServiceWorker file, though Robbie recommended we de-activate this.
• Potential Guide

Feature Categories:

• React

Describe the feature/Bug your gonna work on

• For ContentDelivery component, connect to BE endpoint to get random video with selected break duration & category

Feature Categories:

• React

Describe the feature/Bug your gonna work on

• On Settings component, connect to BE endpoint to update work/break intervals when user selects new ones

Feature Categories:

• React

Describe the feature/Bug your gonna work on

• When the timer runs out, we want users to receive a peaceful chime to bring their attention back to content selection.
• Maybe we can bundle this with our push notification!

Feature Categories:

• React

Describe the feature/Bug your gonna work on

• Create UI for header component

Additional context

Feature Categories:

• Express
• React
• Styling/CSS
• Documentation
• Assets

Describe the feature/Bug your gonna work on

Resize assets to fit needs for manifest and shrink the image payload for the application.

Also, add the new icons for Breathwork/Meditation and Yoga/Movement

Feature Categories:

• React
• Styling/CSS

Describe the feature/Bug your gonna work on

• Create UI for content delivery view (video)
• This will involve React Player package

Additional context

Feature Categories:

• React

Describe the feature/Bug your gonna work on

• Add a short settings page, with appropriate input for work/break intervals

Feature Categories:

• Documentation

Describe the feature/Bug your gonna work on

• Create README with app description, install instructions, gifs, project reflection etc.

Feature Categories:

• React
• Styling/CSS

Describe the feature/Bug your gonna work on

• We have the core of our timer setup, but need to write a little more code to refine the aesthetic/functional pieces
  • Aesthetic: there's a little bit of code in there to have our salmon circle tick down with the numbers
    • How can we access timeLeft from the Timer component given by react-compound-timer
  • Functional: our Timer is connected to the SettingsContext, but when a user changes their time in settings it's not updating on screen
    • After some troubleshooting yesterday, we determined that the update is happening in the CountdownTimer component, but isn't getting passed down to Timer's state...
    • Note from 10/26/2020: after implementing Router, this functional issue is resolved. The Timer component is now only rendered after settings have been updated. -jkw

Feature Categories:

• React

Describe the feature/Bug your gonna work on

• In Timer view, add useEffect hook to get settings from BE on load

Feature Categories:

• React (PWAs)

Describe the feature/Bug your gonna work on

• In order to add push notification functionality to our app, we need to introduce some PWA technologies. In order to do these technologies, we need to do some research!!

Additional context

• Add any useful content/notes to this Google Doc!

Feature Categories:

• React

Describe the feature/Bug your gonna work on

• create SettingContext, to store user input for work/break intervals
• link this context to timer component
  • Add math methods to convert user input into milliseconds

Feature Categories:

• React

Describe the feature/Bug your gonna work on

• For MVP, just create 3 options for content selection:
  • Yoga/movement
  • Breathwork/meditation
  • Somatic

Additional context

Feature Categories:

• Sourcing content

Describe the feature/Bug your gonna work on

• Create Google form to allow community members to submit content

Additional context
https://docs.google.com/forms/d/1U0L4mOQk1ScVpVXdSns734BM0MhalaL9UeNloy1GKe8/edit?ts=5f91fc11&gxids=7757

Feature Categories:

• Express
• React
• Styling/CSS
• Documentation
• Other: (Setup)

• Setup repo with PR template and Issue template
• Install dependencies for node-sass

Additional context
Add any other context or screenshots about the feature.

Feature Categories:

• React
• Styling/CSS

Describe the feature/Bug your gonna work on

• Create a Container component that will conditionally render Timer, Content Selection, or Content Delivery based on the view
• Create new context for View that wraps this component, so it can be used/updated for conditional rendering

Additional context

• When this is done, I can make a few quick updates on Content Delivery component to incorporate it into the Container component properly

Add any other context or screenshots about the feature.

Feature Categories:

• React

Describe the feature/Bug your gonna work on

• Connect button clicks
• mock "network requests" - all these would do would get appropriate data from our mock data file to use in component

Feature Categories:

• Express
• React
• Styling/CSS
• Documentation
• Other:

Describe the feature/Bug your gonna work on
Create full MVP for SOM Timer

Feature Categories:

• Styling/CSS

Describe the feature/Bug your gonna work on

• Tune up styling for the Settings Component.

Feature Categories:

• React

Describe the feature/Bug your gonna work on

• Do individual research on basic hooks that we will need for this project
• Focus on useState, useEffect, and useContext
• Share learnings in google doc

Additional context
Notes sharing document:
https://docs.google.com/document/d/1G-O-g7BxOTDRyik3txNZ3Th2ynOFT5JDnqtTdvvB6X0/edit#

Feature Categories:

• React
• Testing

Describe the feature/Bug your gonna work on

• Create tests for App component for integration & acceptance-level user stories

Feature Categories:

• Clean up Styling on ContentDelivery component.

• Styling/CSS

Feature Categories:

• React

Describe the feature/Bug your gonna work on

• For each of the components in HomeContainer, implement View context
• Then add functionality to update view prop when time to render next view

Feature Categories:

• Sourcing videos

Describe the feature/Bug your gonna work on

• For each length/category combination of videos (5min, 7min, 10 min for each category of yoga/movement, breathwork/meditation, somatic exercise), source 2 videos

Content Log

Feature Categories:

• Styling/CSS

Describe the feature/Bug your gonna work on

• Finalize icons for content selection & add
• Finalize design for content selection component

Feature Categories:

• React

Describe the feature/Bug your gonna work on

• Finalize what needs to be in App component
• Add routes to each page as needed

Feature Categories:

• React
• Other: TravisCI, Heroku

Describe the feature/Bug your gonna work on
Deploy the frontend!

Feature Categories:

• React
• Bug

Describe the feature/Bug your gonna work on
Currently, there is a bug with the component from React Compound Timer, where its state does not update on first page load with the settings Context values. The CompoundTimer component (built by us) does receive the updated value, but it's not making its way into Timer state.

Additional context
We tried making use of the built-in setTime method, and did not have luck with that yet, but we can revisit that.

Feature Categories:

• React

Describe the feature/Bug your gonna work on

• On Settings component, connect to BE endpoint to update work/break intervals when user selects new ones

Feature Categories:

• React
• Other: PWA tech (push notifications)

Describe the feature/Bug your gonna work on

• We've done a lot of research into PWAs! Now it's time to put these pieces together to set up push notifications.
  • Note: After doing some digging into push notifications, we've decided to settle on just notifications functionality via the Notifications API. In the absence of distinct users getting saved to our back end, I couldn't find a way to make this secure enough to handle push notifications (via the Push API). jkw, 10/31/2020

Feature Categories:

• React

Describe the feature/Bug your gonna work on

• Add an Under Construction & Does Not Exist component

Additional context

• After testing out our Route implementation, we realized it would create a more seamless user experience if we could route them to error pages.

Feature Categories:

• React

Describe the feature/Bug your gonna work on

• Edit the existing manifest.json file with additional properties/different properties
• Edit title tag/meta description/any other meta data

Feature Categories:

-React
-Styling/CSS

Describe the feature/Bug your gonna work on

• Create About component with contributor info, About the app, and Pomodoro technique ( See screenshot below for example & wireframes)

Additional context