...
- update from feedback Avijit Prasad
- Final software architecture (diagram) Tingzhuang Zhou
- tech stack we using (any changes) Tingzhuang Zhou
- other teams API using (used team minions' API but discard finally- justify this) Avijit Prasad
- existing API using Avijit Prasad
- Summary of Key benefits/achievements of project relating to design/implementation Lin Thit Myat Hsu
...
We have our node.js backend connected MongoDB atlas for features like user authentication, bookmarks feature, and we have the NextJS/React/Redux/MUI front end to build the client side applications.…
...
But soon we realize it is very overwhelming for us to complete everything in demo, and we didn’t do well in week 8’s demo, therefore after we deeply reconsider the feedback from the demo, we simplified our application architecture from multipage application to simple page one and focusing on the user interaction of data that will benefits to customer. the reworked architecture is showing blow:
The architecture is more straight forward that we have our NextJS rendering the React simple Map, and the side information Card, the card contents data plus Recharts case chart, each time user click into different counties in the map, the Card will be filtering data from API calls by useState hooks.
Backend - NodeJS, ExpressJS
...
Material UI (MUI): an open-source frontend framework for React components based on Google’s Material Design
We decided to use MUI as it would make the development of our app quicker and easier. Since MUI defines its own components, we can use them to quickly design the UI of our app, instead of spending time writing our own CSS classes
Since we had decided to use React for our frontend, and MUI uses React components, it was only logical we used MUI over other non-React frameworks such as Bootstrap
Additionally, some of our team members already had some experience using it. The extensive documentation also means it will be quick and easy for the team members who haven’t used it before to pick up, as well as debug
By using MUI, we can keep our frontend UI theme consistent, and even customize it to suit our needs
Recharts JS - A composable charting library built on React components
We choose Richards over the other visualization kit, because the document is easy to read so we can easily implement the chart in our own
- While testing the charts framework, we found out Recharts includes built in neat animation by default, the animation will further enhance user experience
even customize it to suit our needs
Recharts JS - A composable charting library built on React components
We choose Richards over the other visualization kit, because the document is easy to read so we can easily implement the chart in our own
While testing the charts framework, we found out Recharts includes built in neat animation by default, the animation will further enhance user experience
React Simple Maps
Create beautiful SVG maps in react with d3-geo and topojson using a declarative api.
We choose the React Simple Maps as our core package, over the other maps like google maps, because it is a React map library that allow us to customize a zoomable, Composable map component, that help use develop the functionalities like click to switch county display.
Jupiter Notebook preprocessor:
asdfasdf
Key Benefits
Our first main key benefit was the total overhaul of the design compared to our old week 7-8 design. While that design had some benefits, with help from our tutor we managed to refine our ideas and move from an application which did a lot of multiple things decently to a much better application that did one thing very well - all done within only 2 weeks.
...