astroash / policy-picker Goto Github PK

User stories

As a user browsing the app I can see:

• a consistent style and colour scheme throughout the app
• icons, images and beautiful fonts
• usable on both mobile and desktop size screens

Success Criteria

• accessible, consistent colours, fonts and grids
• responsiveness
• suitable images and icons

Ejected app linter woes

User stories
As a user arriving on the infograph page l can:

• see slick animated graphs

Success Criteria

• exit button to take you back to previous page
• responsive graphs
• copy and data to be inputted dependant on state/ endpoint

User stories
As a user arriving on the homepage I :

• see an animated loading screen

Success Criteria

• display loading page when navigating to '/'
• do not display loading page when navigating to '/home'

Cookies will allow us to only display the instruction modal the first time users use the site. Research needed to find out:

• how to set cookies in react/ react-router-dom
• how to interact with cookies in react/ react-router-dom

We need to add an onClick to the menu links which will call the changeTopic method from app state. This will change the icons and text on the policy carousel properly.

Acceptance Criteria:

• I can click on a menu link and be taken to a policy view, which has the correct topic icon and title on it, and not the home icon.

User stories
As a user arriving on the snippet swipe page l can:

• view a snippet
• swipe up or down to vote
• swipe left or right to view other snippets
• click i for more information
• revote on snippets

Success Criteria

• view this page on correct endpoint
• a navbar with an icon of my policy topic
• swipe up or down to vote
• swipe left or right to view other snippets
• click i for more information
• revote on snippets

As a user I can see a carousel of three pages of instructions for using the snippet swipe section.

Selection criteria:

• Modal that pops up on only on the first play of the snippet swipe game
• Open and close button for the modal
• Carousel of three pages of instructions for the modal

User stories
As a user arriving on the summary page l can:

• view a table of policy snippets I have voted on
• see a section of links of pages to go to next

Success Criteria

• display navbar with icon of section I am on
• a summary of how user has voted
• section of link info of how to get involved including link to ask an MP

• Find out what the issue is
• Spike to fix it,
• Fix it.

Acceptance criteria:

• Repo deployed to heroku.
• Automatically pushes from master
• Custom domain name
• PWA option to save app to desktop is available

has occurred both

• after successfully running countdown in / and redirecting to /home
• and navigating straight to /home

404 generated by nginx, not our own server.
I guess if content is rarely-used, heroku takes a while to pull it up from the archives.

User stories
As a user arriving on the ask an mp page l can:

• enter a question
• see questions other have asked

Success Criteria

• view navbar
• an input field for text with a non working submit button
• mock previous data for questions

Generic components will be created to display the copy. Research needed to decide the best place to store this. Current ideas are:

• in parent state (as objects/arrays)
• in a json file
• as arrays in separate js file

Use react-router to make working routes to all pages

We need to research how to test our React project using Jest.

https://facebook.github.io/jest/docs/en/tutorial-react.html

User stories
As a user on any page I can click on a burger menu and see a dropdown of 'pages' I can navigate to.

Success Criteria

• display burger menu
• have clickable icons and text to take me to different routes

Research the following to discover which of these three are best practice and most effective to navigate our site using React router.

• individual endpoints with/without location persisting in state
• generic endpoints with location persisting in state
• query strings with/without location persisting in state

User stories
As a user arriving on the homepage I :

• see an animated loading screen
• and then redirected to a home page with an interactive navbar and 6 clickable icons

Success Criteria

• display 6 icons with headings for each policy area
• each icon being a link to different endpoint
• have a navbar

User stories
As a user arriving on the form page l can:

• enter info about myself

Success Criteria

• display navbar
• enter age
• enter whether voted in the previous election
• link to summary page

Research Redux to see if it is worth the time investment to learn.

Research the following react components to see if they have the functionality needed for the app:

swipey module https://www.npmjs.com/package/react-swipe-card#demo

carousel component https://www.npmjs.com/package/react-slick

nav component
https://reactstrap.github.io/components/navs/

Also look into:

• infograph
• form
• loading page
• snippet swipe/drag

IF the first two do not have full functionality research hammer.js.

User stories
As a user arriving on the policy carouse l can:

• view a large policy card
• swipe left or right to see other policy cards

Success Criteria

• a navbar with an icon of my policy topic
• a big centered policy card with a large image, headline, paragraph and link to snippets
• entire card is clickable
• swipe left and right to view the next policy card
• use arrow keys to view the next policy card

• Find a selection of icons to use on the site from https://nucleoapp.com/
• Send the list to Noga to download

Setup a boilerplate environment ready to customise.
Acceptance Criteria:

• createreactapp
• tachyons
• travis
• eslint
• coverage (built-in to React Jest)

Users name:

Users top three pain points using application:
1.
2.
3.

Users profile:

Additional observations:

Error message: MatchMedia not present 🐛

Animated graphs are wanted in the infograph. Research needed to see if any of the follow are suitable:

• chart.js
• leaf.js
• wrappers for d3 ??
• mockup with css