Author: Warren Lourens

For our Assessment we need to create a website that has a database attached so that we can simulate a real world application. When it comes to databases there are a number of choices but the once we are using for our assessment is MongoDB.

What is MongoDB?

Unlike MySQL databases that organize their data in tables and use queries to apply CRUD MongoDB stores its data in a JSON-like documents because it is structured similar to a JSON object. Below is a image of how data is stored in a project.

So what is the point of using a database that is not your conventional database such as MySQL or Microsoft Access?

Advantages of using a non query based database such as MongoDB is its dynamic flexibility to be implemented in a wide range of different coding languages such as c#.

Another benefits by having data stored in documents and embedded arrays is to negate the need for expensive joints and complected normalization.

Due to the adaptability and power of Mongo it can be used in both cloud and Sever options. For the use in cloud storage Mongo makes use of Atlas which is a fully managed service that makes it easy to deploy your database on your desires service such as AWS,Azure and Google cloud platform (GCP)

Or you can store your data locally in on a server so that your information is safely stored onsite.

For a person that is used to managing data with query driven databases such as MYSQL Mongo’s database handling concept seams odd and potentially detrimental to the data that is being stored, However, the data that Mongo handles seams to be stored and managed appropriately.

What is typescript?

Typescript is a superset of Javascript meaning that if you have a firm grasp on Javascript then you should have little problems getting started with Typescript as the syntax is the same.

The way i view Typescript is not like another language but rather a tool because of the close relationship they share together.

One reason why i view Typescript as a tool is because you can copy and past your Javascript code within the .TS file and it will work without fail.

One of the issues with Javascript is that you can only discover compiler errors at runtime which can be a pain if you do not want to run the program after each small change. This is where Typescript comes in handy as it is a static checker. If a language is a static checker it will check the code for any errors without the need for running the application.

As you can see it is rather helpful for identifying such errors like simple spelling mistakes that can be easily overlooked. Another nice feature of Typescript that it will will provide you with a small explanation as to why the error has occurred and provide potential fixes.

How do you get started with Typescript?

In order for you to start using Typescript in your projects you will need to install the needed libraries and dependencies by inputting the command in your desired terminal

Once you have installed the needed dependencies you will need to create a Typescript file that has the .ts extension.

Another benefit Typescript offers the user is by adding additional features such as the creation of classes such as class object-orient languages such as C#.

There is a wide range of different web frameworks that a developer may choose from when designing a future web based application each with their own flavor.

Angularjs

So what is Angular? it is a framework that is built on Typescript which provides a component based driven platform that consists of many built in libraries that help Angular to be scalable and provide the developer with a good range of features such as form management, server and routing features that all help the developer produce a web application that meets the needs of their client.

The above picture demonstrates what a Angular component looks like and how the component is called upon. As you can see the user creates tag called <hello-world> which they call upon when they wish to use the component.

Other frameworks such as Vue.js also offer similar tools that the developer may find themselves using. Vue.js however is a progressive framework which has a core library that focuses on the view layer such as the interface.

The vue.js framework is easy to pickup and integrate into projects with easy component creation and implementation. The below image shows how easy it is to create and use a vue.js component

in order for a developer to decide on which framework will be the perfect fit for their project they can go each framework’s website and have a closer look at the official documentation that will help them get a better understanding which framework will be best suited for their application.

Mean stack is a full stack java script framework that was designed to help developers create web applications with ease. This architecture has been created from the four main architectures such as:

M- Mongodb. Mongodb is an open source database which stores desired database.

E- Express.js. Express and node work together to make the server side of the application

A- Angular. Is the front end of the web applications that the user interacts with through the web browser.

N- Node.js. Node and Express work together to create the server side of the application.

The diagram below demonstrates how the architectures work together to form the web application as a whole.

Even though as a developer the term Mean stack gets passed around a lot there are other versions of the architecture that produce a similar outcome. These alternative acronym:

MERN- For this to work we switch out the Augular for the other popular framework React.js

MEVN- Another alternative is to have Vue.js as the client side framwork.

Regardless of which acronym you decide to use they all accomplish the same outcome.

As you can see it is important to have a good understanding of how Mongodb,Express.js and Node.js work as they all are essential parts of the full stack development process.

When i heard we where going to be learning Javascript as well as React.Js to produce a website of our choosing then later hosting our given website onto a server of some kind i was excited and eager to learn.

Sadly due to unforeseen events the course had to go through s series of changes and thus making learning more difficult. However the course still managed to teach me some website developing skills that are related to full stack development.

During the course of the summer break i indent to extend my understand of React and its Hooks to become a better full stack developer.

Intoduction

When course started we spent a lot of time trying to learn Flux. Sadly Flux was no longer relevant to our studies and so the course evolved to include React.JS. Changing the course outline was the right choice as React is a popular framework that has a lot of resources available online through LinkedIn or at a lesser extent Youtube.

The demos where we were able to utilize the code and mold it to fit the needs for our assessment was rather complicated at first glance . Sadly, i struggle to take my code and another person’s code and mash it all together to form a whole new block of code.

Issue: Hosting

For the purpose of assessment 3 where we needed to host our websites i understood the concept but struggled to replicate the code from the demos into my own project. I spent weeks trying to create the needed back end for my assessment so that it could be hosted by using the required back end.

What did i learn?

I learnt that try as you must if you do not have the correct dependence installed in your project then React will struggle to operate as required.With some help installing the needed React dependence then i was able to host my website locally. Even though i hosted my website locally it still sent and retrieved requests from the back end.

Deleting data

One of the requirements for our assessment was that we were meant to be able to delete data from a table. I created the needed functions in order to delete data of our choosing but sadly the function calls failed to produce the desired outcome.

Course reflection

Overall i still learnt something regarding React and how to host a website using a back end to handle all the logic behind the scenes while the front end displayed the data correctly so that the user can read the information as required.

I do wish that we started the course with React.js and Hooks instead of trying to learnt Flux-which took a almost 6 weeks of course time.