fire-elect's People
fire-elect's Issues
Material UI and layout skeleton
incorporate material UI and add some basic layout
我大膽預測:其他政黨加tooltip
Read Data from Firebase -- Websocket Flavour
Hard code some data in firebase, and construct a component that reads from it.
To start simple, let's not worry about redux or useReducer etc. Just a component reading one data row from firebase in a useEffect().
Let's try web socket in this task (=> when data in firebase changes, we want web page to change automatically)
認同請分享 得票率legend改小
Font Setting At App Level
Discuss with Designers about fonts (English, Chinese, Title, Content), and set it at app level
Read Data From Firebase -- RESTful flavour
Hard code some data in firebase, and construct a component that reads from it.
To start simple, let's not worry about redux or useReducer etc. Just a component reading one data row from firebase in a useEffect().
Let's try if non-websocket is possible on firebase.
React Routing
To support different section of contents
庶民心聲 - container component
- 有一個 state 知道是否送出過表單
- 負責跟 firebase 溝通
我大膽預測:立委席次改整數
首頁:庶民區塊改成認同請分享
大膽預測 - 上色切圖
「大膽預測」頁面的框架和圖
立院席次預測 component
CICD
Linting before commit?
A CI job to fill-in firebase credentials and deploy?
認同請分享的連結錯誤
Footer 連往我要發聲的連結漏字
Navbar 樣式
昨天忘記討論到這個咯!
Design Firestore Schema
Design schema to store realtime statistics. Roughly:
For each constituency: vote counts for each candidate, number of polling stations, number of polling station that completed counting.
What is collection and what is document? How to update data?
Archive 頁面 - 切版&圖片選擇
切版後讓 @missmoss 填內容,會有地方讓使用者選縣市,然後顯示相對應的圖片
認同請分享的 CSS 問題
- section title位置跟上方icon的距離能否縮小,且一致
- 身是在何方的圖表大小請調整,現在跑掉了
- svg圖檔更新(拿掉陰影) (edited)
form component
Study: Map Visualisation and React
Search for and play a bit with map visualisation tools that works with react, for example:
https://react-leaflet.js.org
https://uber.github.io/react-map-gl/#/
https://deck.gl/#/
https://www.mapbox.com (paid)
Can it register hover and click callback or fire event when user clicks some area? We probably need this for interactive charts.
臉書分享
@ponan 許願要可以分享預測結果在臉書上
Study Analytics in Firebase
Google analytics is integrated with firebase:
https://firebase.google.com/docs/analytics
This might be a good way to log and analyse how people use the site and what they fill after playing predict game (it automatically distinguish user session for us)
Some questions:
- What data will look like if a user played the game multiple times?
- Can we export data from GA? Do we need to export?
App Bar 的 bug
表單填寫
- 隱私條款部分請把連結設在「隱私條款」4個字上而非checkbox上
- 隱私條款4個字default- 請underline,大家才知道可以外連
- 表單填寫的立委名請存入資料庫
大膽預測 - container component
- maintain state, 表單送出過後就顯示為灰色
- 負責跟 firestore 溝通
大膽預測互動
- 立委席次填選歸零後,不要顯示0,改為顯示上次立委席次
- 總統預測slider的數字會壓到候選人名字
表單填寫另開隱私分頁,原填寫資料會跑掉
倒數計時 component
Study: D3 in React
Try different options, ex:
https://github.com/react-d3-library/react-d3-library (no longer maintained)
https://www.npmjs.com/package/react-d3-graph
https://github.com/uber/react-vis
And then we can have a better idea how to build interactive chart
看看其他人 component
庶民心聲 - 切版上色
我大膽預測 歷年得票率改圖
不好意思早上我打錯字了嗚嗚,求幫忙將目前的圖檔更改成新圖 ,感恩!
previous_years.svg.zip
戰情室 - 串接 firebase
我會在 Page/Warroom 下面直接開始串接 firebase,讓 warroom 數字和 firebase 資料連動
整個網站 font 的基本顏色
大膽預測的立委雙位數參考席次會被截掉
發生在 firefox 無痕視窗
總統得票預測 componont
Responsive Top Bar
Mobile or small screen: burger icon, tabs menu expands on click.
Desktop: normal tabs
給問嗎 component
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.