A simple one-page NIM finder web-app for ITB students Created by Abel Stanley / 13517068
Link to github page: https://kumaken.github.io/NimFinderProjekt/
-
Install React: npm install react
-
Install react bootstrap 4: npm install react-bootstrap bootstrap
-
Install react-loading-overlay module: npm i react-loading-overlay
-
Install react-browser-detection module: npm i react-browser-detection
npm start
npm run build npm run deploy
-
View the homepage and enjoy the scenery:
-
Look at the 'Getting Started' guide to get you acquainted with the website:
-
View the minimalistic about me page, just in case you don't have anything better to do:
-
Then you get to do some login action:
-
If the account is not recognized, you will get an error notificaiton.
-
If successful:
-
If you don't have any account, register first:
-
Now do the searchie-searchie, with NIM:
-
Go to next page for the same query to access more data (10 entries are displayed each search action):
-
Searchie with Name:
This application adopts decorator pattern to display the pages. Index.js will call App.js to render the one-page web application. In App.js, there is a pageRenderLogic to determine which component (which represent a page) to render. App.js will render only one component at a time.
This application also implements chain-of-responsibility pattern as App.js gives the children components privilege to render itself.
This application also uses builder pattern to construct the RequestController. This is advantageous as RequestController is used across all components, such as Login, Register, and Search which all needs to make a request to the API. Why is this so? The builder pattern removes the biggest hurdle on creating the controller which needs differing parameters for each of them. With builder pattern, we don't have to make multiple constructors to meet every demands of the components. We just need to make a builder class which will handle what kind of parameters are needed. Thus in doing so, reduces the redundancy and physical coding burden.
A brief layout of project's components: Super-Parent : App.js Super-Parent calls body components to render, such as: About.js, BaseHomeModel, LoginModel, RegisterModel, SearchModel Super-Parent also renders both footer and header everytime, such as: BaseFooterModel and BaseHeaderModel
Parent: BaseHomeModel Provides interfaces to call App.js currentPage setter to change component to render.
Parent: LoginModel and RegisterModel Both have child that is UserDataModel.
Child: UserDataModel Calls ControllerBuilder to create RequestController and make Login or Register request to the API. Also calls state setter method inherited from App.js to modify Super-Parent's state(child-grandparent interaction).
Parent: SearchModel renders a child that is searchBarModel.
Child: searchBarModel Calls ControllerBuilder to create RequestController and make search request to the API. Search by ID or NIM is recognized by performing isNaN check to searchString in getRequest Controller. Also calls state setter method inherited from App.js to modify Super-Parent's state(child-grandparent interaction).
Child: AccountModal A class that renders notifications.
Child: SearchResultModal A class that renders getRequest result to the page. Uses a Model provided by UserDataModel.
Controllers: RequestController & RefreshController. Request Controller manages sending various requests to the API and storing the response to Super-Parent's state. Refresh Controller plays part in determining whether the page is loading or not (waiting for API call).
##Library:
##Review: Nice API. Easy to use and quick response. API's endpoints are clear and precise while providing the service expected of it. Would be nice though, if the API could also return entry count as a result of a search request. It would make pagination endeavor much easier.