Code Monkey home page Code Monkey logo

speakbox-fall-2018's Introduction

speakbox-fall-2018

Wiki: Simplified GIT Workflow

Description

Speakbox is an app that focuses on allowing users to "live mentally, physically and socially well" through the use of science-proven tools and activities. Features include a mood board, a private journal, suggested activities, and a community forum where users can ask and answer questions related to mental health.

Installation

Install Prerequisites in home directory and install Dependencies from the inside project directory:

Prerequisite

Install Homebrew:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Install Yarn:

brew install yarn

Instal Dependencies

yarn install

Run IOS

First

React Native: Start Packager

Then

react-native run-ios

Run Android

First

React Native: Start Packager

Then

react-native run-android

Authors

Technologies Used

Front End:

  • React Native

speakbox-fall-2018's People

Contributors

10thfloor avatar ajaguasin avatar elim322 avatar juett avatar juliabrowne avatar siddharthparmar7 avatar

Watchers

 avatar  avatar  avatar

speakbox-fall-2018's Issues

Forgot Password Screen

  • final form
  • email field with invalid email message if email is incorrect
  • submit button
  • back to login page button
  • confirmation notification popup
  • styles

Make Default Screens

(all with conventional file structure)

  • create a graph screen
  • create logs screen
  • create activity screen
  • create community screen

Onboarding Screen (reminder)

  • set a reminder screen
  • skip button
  • doesn't connect to actual phone (no push notifications)
  • connects to profile page on app (reminder time chosen is the same as the reminder time in profile)
  • styles

Create file structure

Create folders for:

  • components
  • context
  • config
  • navigation
  • assets
  • lib

Create main directory for JS files and folders and move App.js file into JS folder.

Create Journal Screen

  • attach to navigation
  • add functionality to link to 'Add Journal Entry Screen'
  • styles

add fonts

  • quick sand (regular, light, heavy)
  • avenir (regular, book, heavy)

CSS GUY

  • add all completed screens and components to this list
  • UserLogin Screen and LoginForm Component
  • style all screens and components on this list the same way
  • ensure all styles accurately depict invision design
  • delete each screen and component after completion until all are done

Journal and Activity Logs

  • sort entries and activities by month (first entry/activity at the bottom of page)
  • display journal entry emotions
  • display activity helpfulness level
  • create journal entry button
  • create profile icon on top right of screen
  • styles

Journal Entry Screen/Form in Journal Screen

  • add streak counter
  • add date
  • add journal input
  • add optional emotion hashtag input
  • add photos input and connect with camera roll or phone camera feature
  • add submit button
  • add not now button

Assets

  • add Assets Folder
  • add Images Folder to Assets Folder
  • add all Images from the design team to Images Folder

Edit Account Screen

  • add Edit account screen to Profile Screen stack
  • add select avatar image link to modal
  • add avatars to modal and style
  • add account form (username, password, email, plant name)
  • style form (hide password toggle)
  • add confirm button link back to account screen
  • finish all styles

Mood Screens and logic

  • add How are you feeling? title
  • add smile face
  • add mood slider
  • animate smile face based on slider input
  • add Add Emotions list with sliders
  • style list
  • submit button with a link to the journal entry screen
  • finish styles

Graph Screen

(ask about chart.js for graphs)

  • add graph title
  • add today graph with a link to this week graph and styles
  • add this week graph with a link to today graph and styles
  • install react-chips
  • add all chips (joy, sadness, comfort, fear, esteem, shame, anger, calmness)
  • add color to chips, graph lines, and bars
  • add content to graphs
  • filter graph by chips selected
  • finish styles

Submit Journal Entry Popup

  • add submit journal entry pop up
  • add link to Profile screen
  • add Awesome! title
  • add plant (animate)
  • add plant description
  • add Journal/Plant Streak
  • add do activity selection(Yes links to activity screen, Not Now links to graph screen)
  • finish styles

Realm

  • store token for login
  • store plant name
  • store avatar
  • store plant colour
  • store journal streak
  • store reminder time

User Login Screen

  • final form for the login screen
  • auth logic
  • integrate SpeakBox API
  • Forgot Password button (takes user to forgot password screen)
  • styles

Context

  • make tokenProvider
  • make Profile Provider
  • make add, delete, getAll for tokenProvider
  • make update for avatar, name, password, email and plant name for profileProvider
  • ensure all methods work
  • clean up code

Signup Screen

  • final form for signup
  • avatar upload
  • password view toggle (on both enter and re-enter password)
  • authentication
  • submit button (takes user back to login page)
  • signup error: "please enter a valid email address" etc
  • styles

Loading Gif

  • make loading gif component
  • animate loading gif
  • add loading gif where neccisary

Profile Screen

  • create a profile screen file structure
  • add user avatar
  • add edit account button and link to the edit account screen
  • add plant image with current age and future growth description
  • hardcode reminders tabs (toggle, time(popup))
  • add logout button
  • finish styles

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.