lmcneel / stalks Goto Github PK
View Code? Open in Web Editor NEWUT Coding BC at Houston Project 3
UT Coding BC at Houston Project 3
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
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 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:
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:
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
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
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
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.
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?
Anything with a * next to it, is explained down bellow in comments
This might include:
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
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.
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
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.