A place where users can post questions in a public forum, allowing other users to answer there questions. There can be a search function so users can search for there questions to avoid duplicates. There can be a sorting system through category or tags. Users can vote on correct answer.

Express API route that returns user information
For security, only the loggedin user to be returned

Look into https://jwt.io/introduction/ to help with the security - be sure to comminute with the Front End Developer for how to authorize the data pull in the ComponentDidMount Method

• Create Route
• Return Mocked JSON Structure
• Mock Authorization/Authentication - Work with Front-End/React Developer
• Integrate with the Model
• Return Model (DB) JSON Structure
• Error Catching

• Front end route to send user request to backend
• Back end API route to 3rd party site to fetch last quoted price for given ticker
• Check sufficient user balance
• If user balance sufficient, database route to send buy/sell order, ticker, number of shares, and quote price to database

List of common questions and answers. Low priority to Forum and Docs since no one once to scroll through random questions. Maybe to be used in place of Forum if we don't have time.

Where is it going to be deployed? What does that involve? What is the plan for deploying and testing?

Will need a route in express that updates the user information sent from a form

This will need to be authenticated and locked down to only the logged in user. See #10 for a potential way to handle security.

• Create Route
• Return Mocked JSON Response
• Integrate Authorization/Authentication
• Update the Database
• Return Model (DB) JSON Response
• Error Catching

create global components that are seen throughout all pages. ex: Nav, Footer, etc

May break this up into multiple sections based on the tool

Until Further notice:

• Node
• React
• Express
• SASS?Bootstrap? Compilation
• Database(s)

This should include the basic set up for both an express server to build the API and the react server for building the front -end pages

This should include any node packages that are needed

This should include all script commands for building and packing

This should include basic testing framework setups

Create two or three options for fonts, colors, textures, image style ect. and have the team choose the most effective one.

At least one due on Weds June 27

Blocked by Database Design

https://www.gloomaps.com/Hvs2xbjQ4T

With so many hands on this project its really important that we are all really clear about what pages are needed and what com-ponents need to be on each page. A site map will accomplish this and will be a great resource as things move along.
List pages needed here:

• Splash
• Settings
• Dashboard(shows user data, portfolio, pet, etc)
• Trade Center (where people can see all the stocks)
• Shop to buy pet items
• Sign up page
• About us?
• FAQ/Docs
• Forum

Sketches and complete list of pages by Monday
Preliminary map by Wednesday

This is the overall health of the pet that will be based off of three different factors.

Happiness

Fondness

Hunger

Route(s)

File - petHealth.js

This should only work for the logged in user
See #10 for potiential ways to handle security

This should permanently delete a user and all related data to help deal with GDPR

• Create the Route
• Make sure it is authorized/authenticated
• Decide with the React Developer on whether an email should be sent to the user/send an email to the user/Look at how to schedule/delay tasks so this doesn't delay the return of a response
• Return a Mocked Response
• Connect to the Models/Delete all information tied to user
• Return a Model (DB) Response
• Error Catching

After agreeing on the wireframes, create coded versions to act as a skeleton so that front-end can start adding functionality without worrying about design being implemented first.

You should be able to use React Router for this route

ComponentDidMount will include an ajax call to an express route that returns a JSON of the user Information

Following integration of Authentication, this route should only be visible to the logged in user

• Write out a plan for what components are needed - Talk to the other front-end developers in other features and see what can be reused
• Build Necessary Components with only the Display Functionality
• Add in any states, variables, other directly related functionality
• When Authentication is built, lock-down route
• Attach to API Route to retrieve data
• Error Catching

React Joyride NPM

Tutorial:
Modal pops up: Would you like to start the tutorial? Yes/No
-pops up every time but has a checkbox “do not show again”
-can restart tutorial mode from main help page

-when tutorial mode is activated, only one button/element on the page is clickable at a time, the rest are disabled. A modal or toast will appear next to the current element in focus with the user’s pet that gives them instruction on how to use the element, this process continues throughout the user’s first purchase.

Pet Happiness is based off of how well your portfolio is doing. It will increase if you have a positive value at the end of the day and it will decrease if it is negative. You can buy toys in order to increase it if your portfolio is not doing good.

Route(s)

File - petHappiness.js

This should have extra confirmation and not be extremely easy for a user to do considering it a permanent delete of all data associated with the user

• Add in delete link to the View Profile - Build/Reuse any necessary components
• Build/Reuse Any components necessary for displaying confirmation of deleting a user
• Attach the confirmation components to a click event/set up any other necessary events
• Attach to API route to delete the user
• Reroute to page that confirms the deletion of the user - This page should display handy links to the homepage and a link to close the tab
• Should this send an email to the user confirming the deletion? If so work with the API Route Developer for this feature
• Error Catching

Create illustrations to be used for the site, such as the avatar. Style may be pixelation, think old school video games. Subject matter focused on the animals/pets of the stock market listed below:
-bull
-bear
-wolf
-chicken
-pig
-ostrich
-stag
-dog
-sheep

Planned out system of creation by Wednesday

This is really important to have this diagramed and in the Wiki or Readme - Everyone will need to follow this when creating new files

Using React this can be done multiple ways and doesn't need a new route in React Router. Rather you can switch out the component for displaying information vs displaying the form.

Be sure to include real-time validation on all form fields. The field should validate as the user types.

• Build Display Components - Be Sure to check the repo for any that can be reused from other features
• Build Validation Functionality - Requires States and Event Listeners
• Attach to API Route to update Database/Update necessary states on returned response
• Error Catching

• Route (React and/or Express)
• SASS
• Components

Gives written overview of each page of the website and what interactions can take place on those pages.

-collapsing rows

Once all pages have been coded as wireframes, pull styling from designed pages mock ups and apply css to the coded wireframes.

Combine the storyboard and illustrations!

Use HTML5 Canvas to code and animate the desired story with the illustrations.

Will C is working on

creating the users model in MySQL

Will start mongoose model for user and portfolio

Update user balance in database
Update user portfolio in database
Send feedback to front-end: transaction complete or insufficient funds, new balance

Pet hunger is based on how often you give your pet food. You will need to log on periodically and feed your pet. you can use the in game currency to purchase your pet food then use it to increase its food level.

Route(s)

File - petHunger.js

Publically Viewable information for people who want more before gettings started?

• Route
• Sass
• Components

Anything with a * next to it, is explained down bellow in comments
This might include:

• Email
• Name
• User Name
• Rank/Status
• Pet Info
• Length of Account
• Option to Change Pet/Pet Name *
• Link to transaction history
• Link to Delete Account *
• Edit Link (indvidual fields or otherwise)
• Change Email Link *
• Change Username Link *
• Change Password link *
• Verification *
• Submit a Ticket Link *

This is based on the amount the user logs in to the app, increases with more logins, decreases if you do not log in for long periods of time.

Route(s)

File - petFondness.js

React component for displaying a status bar. Given a number(%), the status bar will fill accordingly.
Status bars include: Overall health, happiness, fondness, and hunger.

Create quick story boards so the team knows what need to be accomplished. Keep it simple.

These storyboards map out a fun animated intro to the game that would further be tackled by HTML5 Canvas animations and could also start to sketch out ideas for a tutorial to guide the user through their first stock exchange.

Check out the following tool - We should have a diagram so everyone working on the database as well as all the developers understand the structure that we will be followed - This goes whether for MongoDB or MySQL or any other database

https://app.quickdatabasediagrams.com/#/

Wireframe major pages and work out necessary components further

along with the react router route

Answer the question about what kind of sign ups you are allowing first

On the pages where users will be making transactions and analyzing their portfolio, their pet will appear in a corner with a question mark above their head. If the user clicks on the pet, it will offer advice on how to continue on the page. This feature will be introduced during the tutorial mode. The pet will aim to share enough advice to keep the user engaged on the page, instead of just linking them to the help page.

Blocked by Database Design

Directs user to Docs, Forum, maybe FAQ, and has an option to re-initiate tutorial mode.

Create market transaction routes which start with the user front end order to buy or sell stock.

• Front end code that takes user input: ticker symbol and number of

• Work with front end developer to build order form

• Front end route to send user request to backend

• Back end API route to 3rd party site to fetch last quoted price for given ticker

• Check sufficient user balance

• If user balance sufficient, database route to send buy/sell order, ticker, number of shares, and quote price to database

• Update user balance in database

• Update user portfolio in database

• Send feedback to front-end: transaction complete or insufficient funds, new balance

Take credit for your work in the app

The about page needs to have a photo of every team member with a title. The person assigned to this task should ask the class to supply how the photo and how they would like the information displayed.

• .json file that stores each team member information or place the team information MongoDB

If using mongoDB, work with DB team

• API route to return all team members from the db

• A react router route for the about url

• SASS or any styles necessary - Work with the design team to ensure brand consistency

Components

• About.js
• Should make use of the grid that is being used
• Member.js (Component that takes props for a single person)

You may also want to include links to github/linkedin - recommend fontawesome for react for the icons

If also including bios, I recommend placing the bio information in a modal and making the pictures