HackMD
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到爆氣，但還是獲益良多，學到很多東西。
