fire-elect's People
fire-elect's Issues
總統得票預測 componont
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.
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.
大膽預測 - 上色切圖
「大膽預測」頁面的框架和圖
CICD
Linting before commit?
A CI job to fill-in firebase credentials and deploy?
整個網站 font 的基本顏色
Material UI and layout skeleton
incorporate material UI and add some basic layout
Responsive Top Bar
Mobile or small screen: burger icon, tabs menu expands on click.
Desktop: normal tabs
庶民心聲 - container component
- 有一個 state 知道是否送出過表單
- 負責跟 firebase 溝通
Font Setting At App Level
Discuss with Designers about fonts (English, Chinese, Title, Content), and set it at app level
看看其他人 component
App Bar 的 bug
表單填寫
- 隱私條款部分請把連結設在「隱私條款」4個字上而非checkbox上
- 隱私條款4個字default- 請underline,大家才知道可以外連
- 表單填寫的立委名請存入資料庫
表單填寫另開隱私分頁,原填寫資料會跑掉
認同請分享的 CSS 問題
- section title位置跟上方icon的距離能否縮小,且一致
- 身是在何方的圖表大小請調整,現在跑掉了
- svg圖檔更新(拿掉陰影) (edited)
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?
戰情室 - 串接 firebase
我會在 Page/Warroom 下面直接開始串接 firebase,讓 warroom 數字和 firebase 資料連動
Archive 頁面 - 切版&圖片選擇
切版後讓 @missmoss 填內容,會有地方讓使用者選縣市,然後顯示相對應的圖片
臉書分享
@ponan 許願要可以分享預測結果在臉書上
我大膽預測:立委席次改整數
首頁:庶民區塊改成認同請分享
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)
認同請分享的連結錯誤
Footer 連往我要發聲的連結漏字
我大膽預測:其他政黨加tooltip
大膽預測的立委雙位數參考席次會被截掉
發生在 firefox 無痕視窗
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?
給問嗎 component
大膽預測 - container component
- maintain state, 表單送出過後就顯示為灰色
- 負責跟 firestore 溝通
倒數計時 component
認同請分享 得票率legend改小
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
React Routing
To support different section of contents
form component
立院席次預測 component
我大膽預測 歷年得票率改圖
不好意思早上我打錯字了嗚嗚,求幫忙將目前的圖檔更改成新圖 ,感恩!
previous_years.svg.zip
大膽預測互動
- 立委席次填選歸零後,不要顯示0,改為顯示上次立委席次
- 總統預測slider的數字會壓到候選人名字
庶民心聲 - 切版上色
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.