My Development Process

Rennie Bevineau — Tue, 30 Mar 2021 23:46:33 +0000

Now more than ever e-learning platforms must be employed to reach new students and retain existing ones. As I started working with Peace of Cake English Academy we took a look at what challenges they were facing with keeping students engaged in content and retaining students at their academy. Together we determined that enhancing the impact of their learning materials would be of primary importance. We created a test application converting their pdf materials into an online fill in the blank quiz complete with audio.

This solved a key problem the students were having. Having an engaging way to get instant feedback concerning the learning material they were being assigned. The students would previously have to find the audio or video files in the pdf online and listen to them while filling out a paper copy of the questions the instructor gave them. Also, students are more accustomed to all their learning materials being online and having things being in an engaging format. By gamifying the learning materials we enabled the students to get instant feedback concerning right and wrong answers and see the media files integrated within each question. At the end of the quiz, the student could see their score and could retake the quiz to score higher.

No alt text provided for this image

This was a great improvement upon the previous process. We immediately received feedback from students about how engaging the new quiz was. Students could complete the material on their computer or phone. They didn't have to depend on the teacher sending them over the materials. They had access to the quiz at any time they needed it and could take the quiz as many times as they wanted to retain their lessons quicker. They also did not need to depend on the instructor to grade their quizzes as they received instant feedback after each question.

While this was a great improvement over the previous process there were improvements to be made. The process that the instructor used to make the quiz material was the same as always. They would create the quiz pdf and now hand it over to the development team to be changed into the finished code. I took a look at this process and suggested to the client the creation of an admin section. Through developing a dashboard for the instructors, they are now able to create custom quizzes that can be directly used by students. This prevents further development time after each quiz is made and gives teachers direct control over uploading media and creating, editing, and deleting quizzes. The new dashboard was ready for adoption. The easy to use interface meant that the instructors could quickly create new quizzes with a low learning curve to use the dashboard.

No alt text provided for this image
In the end, we were able to directly translate the way that POC English academy created quizzes in paper form into a web application and created an e-learning platform that exceeded expectations. The client found that students are constantly looking for new ways to interact with their English lessons that are catered to their interests. That is why providing them a unique and engaging e-learning solution centered around the teacher's style of developing materials and the student's interests has been so helpful for them to retain and grow their client base. With e-learning, it is important to make sure that the student is engaged and offered a unique experience time and time again.

Redux Basics

Rennie Bevineau — Mon, 15 Mar 2021 01:30:43 +0000

State management is an important aspect of an application. An application's state is the values in your application at any point in time. For example, in the front-end of an application when there is a form the initial value within each form input box will be an empty string. When the user types in each input box this "state" changes and these values within state change.

As you can see anytime the user interacts with the application many values have the possibility of changing and can affect the state. In a small application keeping track of these state changes is fairly stress-free. As the application grows it can become more problematic to keep track of state that is used and changed in various parts of the application and in different functions within the application.

To solve this problem state management becomes important. One such popular state management tool is the Redux library.

The Redux library can be used with a variety of front-end frameworks. In the Redux library, the three main pieces that orchestrate state management are the store, the reducer, and the action.

The first piece that orchestrates state management is the store. The store will hold the state and the code responsible for changing, listening to, and retrieving the state. A store is created by calling the create store function from the Redux library and passing in a reducer function.

import { createStore } from "redux";
import mainReducer from "../reducers/index";

const store = createStore(mainReducer);

export default store;

The reducer that is passed into the store is responsible for creating the state. This reducer is a function in the redux library that takes two parameters. The current state and the action (instructions to change the state).

The key characteristic of the redux reducer is that it does not mutate the state in place, it is a pure function. A pure function is one that will produce the same output for a given input. Instead of mutating the state in place, the redux reducer will instead return a new state. The React framework for example does not use a pure function to change the state. In order to change the state, you call the setState() method. This method mutates the original state in place.

To see a reducer in action we can look at this basic reducer function.

const state = {
 reviews: []
};

function mainReducer(state , action){
 return state;
}

This example reducer doesn't do much at the moment. It just returns the state. Next, we will dive into what the action does and its role in working with the reducer to produce state.

An action is an object that is dispatched in order to notify that the state needs to be changed. This action has two properties. A type and a payload. The type property is the type of action that will be taken to change the state. The payload is the changes that will be incorporated into the state. The type property is required the payload property is not. Here is a simple example.

payload: { title: 'New Restaurant Review', id: 1 }

export function addReview(payload) {
  return { type: "ADD_REVIEW", payload }
};

Here you can see that the action object is wrapped in a function. This is a best practice in Redux. This is so the creation of the object is abstracted away. The addReview function produces an action with the action type to add a new review and a payload that has the new review to be added.

Now to show the reducer and the action working together to produce a state we have the following code-

const state = {
 reviews: []
}

function mainReducer(state, action){
 if(action.type = "ADD_REVIEW"){
  return Object.assign({}, state, {
   reviews: state.reviews.concat(action.payload)
  });
 }
 return state
}

export default mainReducer;

Here you can see that this reducer receives an action and the action type is checked within the if conditional. If the type is an "ADD_REVIEW" type then we return a new state being careful to keep the reducer as a pure function. In order to keep it a pure function it uses Object.assign to assign a reviews property to a new object and concat in order to add a new review to the current values within the reviews array without mutating the original reviews array.

Now you may be thinking - how is an action sent?, how can I execute code when the state is changed? and how can I retrieve the state at any time? For this, the redux library has three methods that can be called on the store. These methods are getState, dispatch, and subscribe.

The getState method (store.getState()) retrieves the state of the application.
The dispatch method (store.dispatch(action))sends out an action in order to change the state.
The Subscribe method (store.subscribe(() => console.log('run some code'))) is for listening to the state's changes and when it does change maybe running some code in response to it.

So there you have it, a very basic explanation of Redux in order to get you started with the library and get you on your way to learning more complex topics within the library. The Redux library is framework agnostic and can be used within many popular frameworks, notably the React framework. In fact, there is a library you can use called react-redux in order to more easily connect react with redux and it is worth exploring.

Forem: Rennie Bevineau

My Development Process

Redux Basics