-
Notifications
You must be signed in to change notification settings - Fork 15
Frontend
The Prevention Point App is a single page web application written in the React JS framework. We leverage React components creating capability to create individual reusable bits of code with attached functionality and style. In the front end repository, our components are generally stored in the src/components folder.
We use Yarn as our dependency management system. It is an easy way to get everyone working on the front end to have the same tools and packages during development and an easy way to manage the dependency tree on production.
We are able to write next generation Javascript (ES6 and greater) with the aid of the Babel compiler, which compiles ES6 and greater JS code down to ES5 so its usable on all browsers.
We are using Mobx to handle state on the front end. The logic and state of our React components are stored in corresponding standalone Mobx units called stores, found in our front end repo in the src/stores directory. Think of stores as a place to store session information, or things that are currently selected, or if you are in a multi step process, what step you are on. Mobx is how we easily manage changes to the data of our React components.
Here is a great tutorial on understanding Mobx. And here are some more helpful links with getting started with mobx and understanding state: https://mobx.js.org/best/store.html https://zeph.co/mobx https://www.spectory.com/blog/MobX%20with%20React%20Introduction https://mobx.js.org/getting-started.html
http://localhost:8000/api/ will show you the exposed endpoints you can work with on the front end. A helpful dev tool for making and testing these requests is Postman. We can make requests to them using Apisauce and JSON Web Token, some important packages that we use on the front end. We use the API Sauce library for connecting the front end, the Prevention Point App, to the API, the Back end of Prevention Point. Quite simply, it is the way we create our REST requests to the backend. Each React component / Mobx store if it needs to store and get data from the backend, should have a corresponding api file that can be found in the front end repository in the src/api folder. The api files are where the requests are.
For authentication of all our requests we are using the JSON Web Token. A token is required in the header of all requests, that token expires every 5 minutes, and a refresh token is required to get a new one. The refresh token expires every 24 hours. All requests to the API should include an access token in the header.
Another important package we are using is React Router. We use React Router to configure our routes, ie hooking up our urls to their corresponding React components. Routes can be found in the src/routes directory.
Material-UI provides pre made and pre styled highly reusable react components for things like input boxes, buttons, nav bars, etc. This is why we chose to use it. Adding these components to our react components will help us style our urls more quickly.