Plan for frontend? - Githubissues

JMStudiosJoe commented 6 years ago

Are there plans for moving to more modern web app architecture?

ychoy commented 6 years ago

From our last discussion at civic hack night with @psithara and @lilannie, it seems like we want to build the frontend with React.

The app as a whole: Node,JS Express, React

Data parsing (which libraries did you want to use @psithara)

Based on what we discussed, I've written up some user stories. I'm open to your ideas and feedback:

When the user visits the website, they should see a Welcome page that explains what Open Disclosure San Jose (or Open Disclosure Santa Clara County) is about
Then the user can click "Visit the dashboard/Follow the money/something descriptive"
The user will see a two column panel: left sidebar is a list of local elections including local measures. The right sidebar is wider (3/4th of the page) and is a page with instructions (click something on the left) if nothing is selected
The user can click on an election / measure. For example, if they click San Jose City Council, the left sidebar should open an accordion that shows a list of City Council races for the General Election.
After the user clicks on a race, like San Jose City Council District 9, the user should see the following on the right side bar:
- List of Candidates with their photos, titles, and total money raised. A link with their candidate pages to learn more.
Once the user clicks on a candidate, they should see the following appear in the right sidebar:
- Brief candidate biography/ summary
- Social Media Links
- Total Contributions:
- Total Expenditures:
- Current balance:

(Bar charts with largest to lowest amounts):

Overall stats about Contributions: % out of state, % within X (district or city), % within California
A break down of total contributions
Link to see all contributions (not including loans), and it should take the user to another view, where they see a table and contributions organized by largest --> smallest amount: Donor Name | Donation Amount | Date of Donation
A break down of total expenditures
Optional/Phase 2 (more pages): Committees controlled by candidate

Other pages/tabs on menu:

About the project
Register to Vote
Find your ballot (link to Voters Edge? )

What do y'all think? @JMStudiosJoe @psithara @lilannie @myracheng

JMStudiosJoe commented 6 years ago

@ychoy yes this all sounds good to me, should we get a google sheet going with a list of user stories then GitHub issues? Sounds like this project could also use its own drive folder?

lilannie commented 6 years ago

I love the user stories! Great job ☺️ I plan to put a bunch of the frontend together this weekend.

I'm no CSS wiz, but I can whip together an un-styled E.R.N. (Express React Node) website real quick.

ychoy commented 6 years ago

@JMStudiosJoe I shared with you the draft Google doc project roadmap via your email. I think each user story could be broken up into separate issues.

ychoy commented 6 years ago

Awesome, @lilannie!

JMStudiosJoe commented 6 years ago

@lilannie sounds good on starting the front end do you plan on using create-react-app? I can help with the css part and can also integrate the small project for looking up by address. @ychoy yes got the document thanks :)

_{Sent with GitHawk}

dphale commented 6 years ago

@ychoy I like the stories. How does CFSJ typically make prospective users aware that apps/content are available? E.g. plugin or link to Merc? Link in https://votersedge.org/ca? If someone can send me a link to screenshots here or on slack I can get user feedback.

dphale commented 6 years ago

@lilannie @JMStudiosJoe @ychoy here is the link to embed votersedge - https://votersedge.org/ca/page/resources#engage-voters. I like their UI - very simple

lilannie commented 6 years ago

@JMStudiosJoe I have only minimally played around with create-react-app.

I plan on using Webpack to build the JS and SASS. I can serve the Webpack bundle using Node.JS for dev purposes.

I'm assuming we want to insert the Webpack bundle in the public/index.html file when we deploy.

JMStudiosJoe commented 6 years ago

@lilannie do we need SASS? I have gotten pretty good with just CSS and React makes it nice and easy. create-react-app does all that for you besides the SASS and gets a good starting point for not only project structure but tests are easy to add from there as well. Up to you though :)

lilannie commented 6 years ago

@JMStudiosJoe SASS is just a nice to have. Not super necessary. Same thing as CSS with some added bonuses like variables.

You can add normal CSS to SASS files and it'll work the same.

I just finished the boilerplate: https://github.com/codeforsanjose/OpenDSJ-2018/pull/7

Gonna continue working on it today.

JMStudiosJoe commented 6 years ago

@ychoy @lilannie @dphale think we can close this issue as well. Plan for frontend is React with SASS with NodeJS express backend. We also have user stories to start developing.

lilannie commented 6 years ago

The user will see a two column panel: left sidebar is a list of local elections including local measures. The right sidebar is wider (3/4th of the page) and is a page with instructions (click something on the left) if nothing is selected

Number 3 in the list of user stories is partially done.

We just need to add instructions to the DetailViewContainer when nothing is selected.

lilannie commented 6 years ago

The user can click on an election / measure. For example, if they click San Jose City Council, the left sidebar should open an accordion that shows a list of City Council races for the General Election.

Just a thought: I don't think the different Races should be hidden under an accordion until the list of Races is gigantic.

For now, I think it makes our site look more legitimate if we show all the Races we have gathered data about.

myracheng commented 6 years ago

I agree that we should have all the Races more prominently displayed, so users can immediately find it and see what other options there are. One concern is that doing so may be too overwhelming, e.g. if voters aren't sure which city council they are supposed to be voting for

lilannie commented 6 years ago

This issue is pending. We may not need to implement our own frontend if we decide to use Code for Oakland's Open Disclosure website.

mdudhani commented 5 years ago

This is one of the visualization library I found which works with React Demo: https://nivo.rocks/pie Github: https://github.com/plouc/nivo

codeforsanjose / OpenDSJ-2018

Plan for frontend? #6