tree - HackMD

# tree mern ``` . ├── api │ ├── config │ ├── contorllers │ ├── data │ ├── middleware │ ├── mockData │ ├── models │ ├── routes │ ├── Dockerfile │ ├── package.json │ └── server.js ├── ui │ ├── public │ ├── src │ │ ├── components │ │ ├── containers │ │ ├── data │ │ ├── Endpoint │ │ ├── img │ │ ├── music │ │ ├── store │ │ │ ├── action.js │ │ │ ├── reducer.js │ │ │ └── types.js │ │ ├── utils │ │ ├── common.scss │ │ ├── index.scss │ │ └── index.js │ ├── Dockerfile │ └── package.json ├── docker-compose.yml └── README.md ``` ## Breakdown of project into sprints ### Sprint 1: Brainstorming - Key meeting points: - ideas - motivations - Five project proposals - Reflections - not sure which one we can complete with time - need more survey ### Sprint 2: Estimate development scope and core function - Key meeting points: - survey result1: usable third party api for covid data - survey result2: map component for angular and react - decision of the topic of our project - Decision: MongoDB, Express, React, Node.js + Docker - Reflections - Can't find a sutible map component of angular - find a supervisor for react - ### Sprint 3: Define architecture & interactions & first prototype - Key meeting points: - Defined and agreed on overall infrastructure . - Defined minimum viable product (MVP) with functions/classes/variables. - Defined interactions between subsystems including a first iteration of the request types and their JSON syntax. - Decide a basic UI interface mockup for admin user story. - Reflections - gaming system? ### Sprint 4 : Alpha version release - Key meeting points: - frontend with mock data - Ethical issue: shoudl we change or gameing system? - Replace prediction game by forum and point system ### Sprint 5 : Beta version release - Key meeting points: - Key function: authorization, map, forum - additional feature: statistics , ranking list with mock data ### Sprint 6 : Auto testing & Version 1.0 release - Key meeting points: - build backend testing by mockgoose, supertest and chai for testing api's request and response. - build frontend testing ### Sprint 7 : Resolving issues and enhancing features - Key meeting points: - point system ### Sprint 8 : Write-up Social and ethical implications Code of ethics Social benefits Data privacy and security Data usage Social implications --- ## Front End - React + Redux. Details of implementation. ### React Why: 1. map component: [react-svg-map](https://www.npmjs.com/package/react-svg-map) #### What is React? 2. In React, instead of using regular JavaScript for templating, it uses JSX. JSX is a simple JavaScript that allows HTML quoting and uses these HTML tag syntax to render subcomponents. HTML syntax is processed into JavaScript calls of React Framework. We can also write in pure old JavaScript. 3. Single-Way data flow In React, a set of immutable values are passed to the components renderer as properties in its HTML tags. The component cannot directly modify any properties but can pass a call back function with the help of which we can do modifications. This complete process is known as “properties flow down; actions flow up”. 4. Virtual Document Object Model React creates an in-memory data structure cache which computes the changes made and then updates the browser. This allows a special feature that enables the programmer to code as if the whole page is rendered on each change whereas react library only renders components that actually change. #### Why react? 1. Simplicity ReactJS is just simpler to grasp right away. The component-based approach, well-defined lifecycle, and use of just plain JavaScript make React very simple to learn, build a professional web (and mobile applications), and support it. React uses a special syntax called JSX which allows you to mix HTML with JavaScript. This is not a requirement; Developer can still write in plain JavaScript but JSX is much easier to use. 2. Easy to learn Anyone with a basic previous knowledge in programming can easily understand React while Angular and Ember are referred to as ‘Domain-specific Language’, implying that it is difficult to learn them. To react, you just need basic knowledge of CSS and HTML. 3. Native Approach React can be used to create mobile applications (React Native). And React is a diehard fan of reusability, meaning extensive code reusability is supported. So at the same time, we can make IOS, Android and Web applications. 4. Data Binding React uses one-way data binding and an application architecture called Flux controls the flow of data to components through one control point – the dispatcher. It's easier to debug self-contained components of large ReactJS apps. 5. Performance React does not offer any concept of a built-in container for dependency. You can use Browserify, Require JS, EcmaScript 6 modules which we can use via Babel, ReactJS-di to inject dependencies automatically. 6. Testability ReactJS applications are super easy to test. React views can be treated as functions of the state, so we can manipulate with the state we pass to the ReactJS view and take a look at the output and triggered actions, events, functions, etc. [ref](https://www.c-sharpcorner.com/article/what-and-why-reactjs/) ### Redux: - React Redux is maintained by the Redux team, and kept up-to-date with the latest APIs from Redux and React. - Provides APIs that enable your components to interact with the Redux store, Redux itself is a standalone library that can be used with any UI layer or framework, including React, Angular, Vue, Ember, and vanilla JS. Although Redux and React are commonly used together, they are independent of each other. If you are using Redux with any kind of UI framework, you will normally use a "UI binding" library to tie Redux together with your UI framework, rather than directly interacting with the store from your UI code. React Redux is the official Redux UI binding library for React. If you are using Redux and React together, you should also use React Redux to bind these two libraries. The React Redux connect function generates "container" wrapper components that handle the process of interacting with the store for you. That way, your own components can focus on other tasks, whether it be collecting other data, or just displaying a piece of the UI. In addition, connect abstracts away the question of which store is being used, making your own components more reusable. [ref](https://react-redux.js.org/introduction/why-use-react-redux) ### UI library: ant-design #### what Ant Design aims to avoid complicated, messy designs and focuses on ensuring user certainty with consistent appearances. A design system for enterprise-level products. Create an efficient and enjoyable work experience. #### why - An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises. - Design value: https://ant.design/docs/spec/values Natural,Certain, Meaningful ## title ``` code ``` - points - 1. pp text [ref](https://hackmd.io/3qeKYACwQa-N_K7bRu4VnA?both)