# Web Programming Final Project -- 第80組 NBA.js
### by 電機一 項達均
Website: https://finalprojectnba.netlify.app/

├── backend
│   ├── package.json
│   ├── src
│   │   ├── db.js
│   │   ├── index.js
│   │   ├── models
│   │   │   └── article.js
│   │   ├── mongo.js
│   │   ├── resolvers
│   │   │   ├── Mutation.js
│   │   │   └── Query.js
│   │   ├── schema.graphql
│   │   └── server.js
│   └── yarn.lock
├── frontend
│   ├── README.md
│   ├── package.json
│   ├── public
│   ├── src
│   │   ├── App.css
│   │   ├── App.js
│   │   ├── App.test.js
│   │   ├── components
│   │   │   ├── BoxScore.js
│   │   │   ├── BoxScoreRow.js
│   │   │   ├── Datepicker.js
│   │   │   ├── Editor.js
│   │   │   ├── Headline.js
│   │   │   ├── NavBar.css
│   │   │   ├── NavBar.js
│   │   │   ├── NavBar2.css
│   │   │   ├── NavBar2.js
│   │   │   ├── NewsPage.js
│   │   │   ├── ScoreCard.css
│   │   │   ├── ScoreCard.js
│   │   │   ├── ScoreCard2.css
│   │   │   ├── ScoreCard2.js
│   │   │   ├── ScoreCard3.js
│   │   │   ├── Story.js
│   │   │   └── TeamStats.js
│   │   ├── containers
│   │   │   ├── Article.js
│   │   │   ├── Game.css
│   │   │   ├── Game.js
│   │   │   ├── Homepage.css
│   │   │   ├── Homepage.js
│   │   │   ├── Login.js
│   │   │   ├── ScoreBoard.css
│   │   │   └── ScoreBoard.js
│   │   ├── graphql
│   │   │   ├── index.js
│   │   │   ├── mutations.js
│   │   │   └── queries.js
│   │   ├── hooks
│   │   │   └── useData.js
│   │   ├── index.css
│   │   ├── index.js
│   │   ├── logo.svg
│   │   ├── package.json
│   │   ├── reportWebVitals.js
│   │   └── setupTests.js
│   └── yarn.lock
├── package.json
├── README.md
└── yarn.lock

All NBA data is fetched using `axios` from https://www.balldontlie.io/api/v1.

The homepage `Homepage.js` consists of `Newspage.js` and `scoreCard.js`. The article page is created by `Article.js`,
the game page from `Game.js`, which contains `ScoreCard3.js`, `BoxScore.js`, or `TeamStats.js`. In the news section, there is either the
headline(`headline.js`) or a story(`story.js`).The Article editor is `Editor.js`, which uses `Reactquill` to generate HTML code for the content
of the article.

<ReactQuill theme='snow' value={content} onChange={setContent}/>

The HTML code that is used in `Article.js` using `DOMPurify`:

// in Article.js
<Box sx={{margin:'20px 40px', fontSize:'18px'}} 
     dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(data?.getArticle.content),}}></Box>

multiple Material UI components, such as `Box`, `Typography`, `Button`, `Container`, etc. are used throughout the project. A loading icon is used in various parts of the app
for better user experience.

React `useContext` is also used in `useData.js` for states and function to be accessed by different components.

const useData = () => useContext(ChatContext); // in useData.js

User authentication is implemented using `Auth0`, but registering an account is not allowed for obvious reasons.

const {loginWithRedirect, logout, isAuthenticated, user} = useAuth0();

The backend uses graphql as its data query and mutation language, methods include: `getArticle` used in the article page `Article.js`, `getArticles` used in the news section
`Newspage.js`, `DeleteArticle` used to delete an article, and `CreateArticle` used in `Editor.js` for the publishing of an article. The data(Articles) is stored in MongoDB.
Upon starting the server and establishing connection with mongoDB, the database is cleared and data from `db.js` is saved in the database. A new id is created using `uuidv4` for every article.
## Deployment
* The frontend is deployed using Netlify: https://finalprojectnba.netlify.app/
* The server is deployed on Railway: https://finalprojectbackend-production-77b8.up.railway.app/
* Data from the server is stored in a Mongo database from Railway.
## 心得
這次專題有好幾次跟人組隊的機會，最後都沒有成功。我想主要是因為同屆修課人數不多(好像只有我)和自己實力不佳的緣故，有些可惜。畢竟自己GitHub不是很熟，也沒有過跟人合作寫程式的經驗。這也導致我每天寫到快暴斃。不過好處是這樣專題內容可以隨我所好，說不定分數比較高。

這次寫雖然花了兩個多禮拜，但過程意外的順利，很多想做的功能都有成功做出來，也沒有遇到很多嚴重的bug。我想這是暗示我自己有在進步吧。花最久的應該是處理data fetching產生的非同步問題吧，不得不說react在這邊實在在找人麻煩。後端設定graphql也相當順利，反而大部分時間都在調整CSS。過程中也秉持同一行程式碼不出現兩次的精神，雖然難免有破例啦。

另外，由於用的是免費api，很多較詳細的數據都拿不到，導致有些功能做不出來，有點可惜。

我記得，某教授好像有講過一句話，”you’ve never learned a language until you have built something you thought you couldn’t.”。我想這是一個很好的例子。不過，web development的領域之大，有好多想學的東西，希望未來幾年能好好學習，搞不好等自己強一點後再來修課或當TA也蠻有趣的。

最後想感謝黃鐘揚教授跟TA們花這麼多時間來教課，雖然每次黑客松都被電爛，作業debug到爆氣，但還是獲益良多，學到很多東西。