ericweissman / icecream_whateverly Goto Github PK

Add effect when user clicks More Info on Ice Cream Flavor card.

#Project: Whateverly - iScream

##Group Member Names: Heather, Tom, Eric W.

###Goals and Expectations for the Project (What does each group member hope to get out of this project? What do we want to achieve as a team? How will we know that we're successful?):
Eric: Solidify understanding of React, Git-flow, and remote work. Heather: Be more comfortable in fetch API, React; especially stateful components. Tom: Solidify React and class concepts.

###Team strengths & collaboration styles:
Tom/ strengths: GitFlow, Terminal maniupulation Git, OOP, CSS, presentation/ weakness: array prototypes, and overall javascript syntax. Eric/ strengths: array prototypes, data management, wireframing, planning, presentation/ weakness: testing, OOP, SRP. Heather/ strengths: CSS, organization, detailing/ weaknesses: array-prototypes with multiple datasets, SRP.

###How we can use our strengths to overcome obstacles:
Communication about strengths and pre-planning for time apart.

###Schedule Expectations (When are we available to work together and individually? What constraints do we have?):
Evolving because of scheduled breaks.

###Communication Expectations (How and often will we communicate? How do we keep lines of communication open? How will we make decisions as a team?):
Daily slack check in, Waffle.io checklists, and frequent remote conferencing.

###Abilities & Growth Expectations (Technical strengths and areas for desired improvement):
Growth of React, SASS, Fetch and OOP principles.

###Workload Expectations (What features do we each want to work on?):
Frontload heavy for the next week, due to holiday break.

###Workflow Expectations (Git workflow/Tools/Code Review/Reviewing Pull Requests/Debugging and Problem-solving Techniques):
Gitflow, Waffle, Git issues, rubric check ins and code reviews on pull requests.

###Expectations for giving and receiving feedback:
Honest and upfront, sooner rather than later.

###Project management tools we will use:
Waffle.io and Git

###Day 1 Agenda:
Finish this DTR and craft User Stories, wireframes.

###Additional Notes:

Minimal Viable Product: Create an app that displays ice cream flavors, allows you to narrow your search. Upon clicking a flavor, displays all parlors with that flavor. Upon clicking a parlor, parlor information is displayed.

As a user,

• I should be able to launch the app from welcome screen
• I should be able to see all flavors of ice cream from the main screen
• I will be able to utilize a search bar to search for ice cream flavors by keyword
• When I click on a flavor card, a larger, single ice cream flavor card should display.
• Each ice cream flavor card should include a picture, title (name of flavor), description and a button that shows where the ice cream is available
• When I click on the button prompting info on where ice cream is available, I will be shown a list of all of the parlors that have the flavor of ice cream I clicked on
• When I click on the parlor of my choice, it will render a card displaying all the info of said parlor.
• I will be able to move backwards in the flow by clicking on a navigation button

Increase the opacity on hover state over ice cream picture

As a user,

• I should be able to launch the app from welcome screen
• I should be able to see all flavors of ice cream from the main screen
  -Each ice cream flavor card should include a picture, title (name of flavor), description and a button that shows where the ice cream is available
• When I click on the button prompting info on where ice cream is available, I will be shown a list of cards of all of the parlors that have the flavor of ice cream I clicked on
• The parlors listed will clearly display the address, phone number, rating, hours and price range
• I will be able to click on a button on each parlor that will display all of the varities of ice cream available
• I will be able to move backwards in the flow by clicking on a navigation button
• I will be able to utilize a search bar to search for ice cream flavors by keyword

Potential places to animate:

On card hover (grow in size by 20-30%?)
switching between cards and parlor details

Add any ideas other ideas here and we can break out into separate issues.

I figure at the very least we can have a couple Google slides where we can go over the challenges, rewards, collaborative aspects of the project and then go right into a live demo.

What do you all think?

JSX for main screen rendering

Test SearchByParlor component and add test file

Issue with cards being displayed on larger displays

Import custom fonts for title and body

Currently shows a small blue line, maybe we can add a message that shows nothing available!