search

voteamerica / voteamerica.github.io

Front end for the Carpool Vote website. Support every American's right to vote!
http://www.carpoolaction.org/
MIT License
38 stars 50 forks source link

Operator page and associated development environment #375

Closed jkbits1 closed 6 years ago

jkbits1 commented 6 years ago

This PR works with the recent back-end update to provide an operator page secured by a login.

The page is designed to be extended in a modular fashion to support reasonably-sized contributions from multiple volunteers. The page as provided here shows a list of drivers. As much as anything, this is to show proof-of-concept and an example UI and code for new volunteers.

Probably a lot of the explanation below will be added to the Readme some time after the PR is approved.

The new setup, as described below, is automatically provided by the use of the docker development environments provided in the back-end repo.

The main reasons for the new setup are to provide a development setup that is mainstream, efficient and suits modular development. So the idea is that we provide a setup that enables us to encourage volunteers who use modern tools to help us out by the creation of reasonably-sized contributions.

As well as the technologies below, the operator page can be extended by use of plain JS, with no framework at all, or JQuery. Such contributions are perhaps not ideal but possible and there is some code in this PR that demonstrates the use of plain JS (it may need a quick tweak first). Technologies such as Vuejs may possibly fit in, too.

However, the main technologies used and encouraged are: React - more specifically the React/Redux pattern. This pattern may not suit every React coder, but is very mainstream. If a volunteer can show some other React style can be used alongside without significant issues, that would be acceptable.

Webpack is built into the docker development environments so no manual build steps are necessary for volunteers except writing code. As yet, there is no hot-module-reloading but the way the operator page works means this isn’t a big issue. There’s some room for improvement, but coders can use ES6 (and beyond as we expand the setup) code and source-maps exist for practical browser debugging.

jkbits1 commented 6 years ago

I'll merge this now and review the site to be sure everything works ok