Biodiesel Simulation

A React based web app embedded into the University of Idaho's Biodiesel Education website to teach a user the process to make biodiesel.

Background
The University of Idaho's Biodiesel Laboratory has a website that helps educate about biodiesel and how to produce it. All of the current documentation and media is excellent in the education of biodiesel but or goal is to create something new that will educate in a fun and interactive way.

Problem Definition
The University of Idaho's Biodiesel Education website currently only has articles and videos on the production of biodiesel as it's main form of education. Our team is tasked with creating a web application that will be a both interactive and fun tool to teach the steps of making biodiesel.

Technologies
For our project we will be using React, Redux, and Typescript to produce an embedded web-page application.

React
React is a Java Script library used to build scalable user interfaces.

Redux
Redux is a Java Script library designed to help maintain application state.

TypeScript
Typescript is a programming language that is a strict syntactical superset of JavaScript that allows for strict typing.

Project Learning
For this project the two main things we had to learn where the development stack which is React, Redux, and Typescript and the process of producing biodiesel.

Development Stack
We decided on using react because it is a very intuitive library that is very responsive, which helps to make changes reflected in the demo application. This helps to make small incremental edits while developing incredibly easy and allows for quick fixes to bugs as they appear. React also uses a very simple property passing system that allows for the design of small tightly focused components that can easily be re-used elsewhere in the application. The only thing that React was really missing was some way to store an application wide state that would persist from scene to scene in our application, that is where Redux comes in. Redux allows you to react a state store that is able to be interacted with in any part of your application, it allows allows you to map your state store into the properties of the current component. This all works together to help make the processes of storing, accessing and mutating data throughout our application much easier than it would have been if we were passing the state of one component to the next using its properties. The final technology we decided to ad was TypeScript, this is because it gives us more control over the typing of properties in React. This helps eliminate ambiguity and makes it easier on us to keep track of how the types are being coerced between multiple scenes and states.

Biodiesl production
The second thing we had to learn for our project was the actual process of creating biodiesel, with some documentation provided to us and a few tours of the biodiesel lab. We learned that the general process is  Collect waste cooking oil and pump it into the reaction vessel Heat the oil to 60°C to lower the water content and destroy some impurities Test the acidity and water content of the oil and add low acidity oil to lower acidity if necessary Pumps 80% of the total methanol and catalyst to be used into the reaction vessel Mix the oil at 60°C for an hour to give time for the oil, methanol, and catalyst to react Lower the temperature to 40°C and allow to settle for several hours Drain out the glycerol produced in the reaction Raise the temperature back to 60°C and add the remaining 20% methanol and catalyst Once again mix the oil at 60°C to allow the mixture to react Lower the temperature to 40°C and allow to settle for several hours Drain out the glycerol produced in the reaction Wash the oil with water several times until the soap level is under 41 parts per million Raise the temperature to 90°C to dry out the oil Filter the oil through a 10 micron fuel filter Test the oil to check that it meets biodiesel standards and add additives to meet the standards if necessary <li>Label and store the oil, it is now ready for use as a fuel </ol>