Awesome
政治承諾追蹤網 Political Promise Tracker
Hackfoldr(any contribution and disscussion are welcome)
專案簡介
一個列出特定當選人 or 團隊之公開承諾的網頁。 在任期間由公民朋友自發提供新聞連結、更新承諾進度, 作為公民評估此執政者 / 團隊之執行力的工具。
Solution Stack
For frontend dependencies please refer to bower.json
As for back-end please refer to package.json
.
-
Frontend
- React JS
- Material UI
- Stylus
- Webpack
-
Backend
- Express
- Sequelize
Development
Setup
After cloning the repo, please run the following to setup:
$ cd promisetw
$ npm install
Create a PostgreSQL database table called promisetw
with user ppt
and empty password. With PostgreSQL Command Line Tools installed, Run:
$ createuser ppt
$ createdb -O ppt promisetw
$ npm run seed
To run database migration and seed the mock data into database.
Lastly, please create a file .env
under the project directory in following manner:
PROVIDER_FB_ID=xxxxx # Facebook app id
PROVIDER_FB_SECRET=xxxxxxxxx # Facebook app secret
PROVIDER_GOOGLE_ID=xxxxxxxxxx # Google OAuth2 client ID
PROVIDER_GOOGLE_SECRET=xxxxxxxxxx # Google OAuth2 client secret
Passport will load these files into process.env
when running in development mode.
Start Server
We start the dev server using:
$ npm start
The command above does two things:
- Starts express server running on
http://127.0.0.1:9527
, which uses nodemon to watch bothjs
andjsx
files and reload server upon update. - Starts
webpack-dev-server
inhttp://127.0.0.1:5000
, which triggers browser reload after webpack compilation. It proxies all server requests (like/api
connections) tohttp://127.0.0.1:9527
.
After npm start
, open http://127.0.0.1:5000
to see the website running.
Database
Currently we use PostgreSQL both on heroku and localhost.
The database structure is managed by migration scripts in server/migration
.
General steps to alter the database structure (i.e. add/remove tables or add/remove columns) are given below:
- Generate migration scripts using
node_modules/.bin/sequelize migration:create
- Edit the generated script under the directory 'server/migration'
- Run
npm run migrate
(a shortcut fornode_modules/.bin/sequelize db:migrate
)
If you want to create a new model, please refer to node_modules/.bin/sequelize help:model:create
for more information.
Starting Points
server/server.js
: ExpressJS server that acts as an API server, and invokes ReactJS server-side rendering, which loadscommon/views/app.jsx
, renders to string and put the rendered string intoserver/views/app.jade
.common/views/app.jsx
: Isomorphic React component that creates the entire app.client/js/client.js
: Front-end javascript starting point, also loadscommon/view/app.jsx
and initializes React front-end app.client/styl/client.styl
: Starting point of all styles of the app.
Naming Convention
- Class files (stores, components, etc.) are capitalized CamelCase.
- Object instance files (actions, fluxibleApp) are lower camelCase.
Debugging Messages
Debug messages are inserted using visionmedia/debug. All debug flags starts with ppt:
, thus you may use DEBUG=ppt:* npm start
to print all debug messages on node.js.
The debug
instance is exposed as window.myDebug
in browsers, thus you may use myDebug.enable("ppt:*")
in browser console as well.
Deploy
Deploying to a production server like heroku involves:
- Build JS, CSS and HTML files with hash names (
npm run build
) - Commit the compiled files into repository.
- Push to Heroku.
These steps are wired inside package.json
in commands starting with deploy
.
To deploy to Heroku, just run:
$ npm run deploy
If the database structure should be updated, don't forget to run database migration on server as well:
$ heroku run npm run migrate
If you would like to inspect the compiled website without pushing to Heroku, you may:
$ npm run build # Generates hashed assets inside client/build
$ NODE_ENV=production foreman start # Start server in production mode
TODO
- let user login
- let report rating work (and api/endpoint)
- let add/edit report work (and api/endpoint)
- add Redux authMiddleware
- let AppBar change according to route
- try to make login and any post request in 1 rtt
- let homepage de-hardcoded