React UTU sistem prestasi part 2

Hi all,

This is continuation of the part 1 on how I make a react.js web application with express.js. Please see the part 1 for the design and requirements. In this post we will dive deep into how the application works.

Frontend – React.js

For the frontend, we will use react redux that hold all the data in a store. We have one highest store level and all the components will pull the data from that one store. For this app, the store will contain

1. user -> this will hold all the userdata
2. userPrestasi -> this will hold all the user achievements

Every action that happens on the frontend will edit the store through action and reducer. Action basically defined what the application can do. These are:

1. authActions -> to handle when user login and pulling all the user details and his/her achiements
2. biodataActions -> to handle when user change their personal details
3. prestasiActions -> to handle when user add or edit prestasi
4. printActions -> to handle when user wants to print something
5. updatePasswordActions -> to handle when user update their password
6. uploadActions -> to handle when user upload a file

After an action was executed, a reducer will take care of the action and assign it to appropriate state. For this app, we only have 2 reducers because we only have 2 item in the store. These are:

1. authReducers -> to set the user details when login
2. prestasiReducers -> to handle when prestasi action is executed

Data flow

In this app we are using react.js, Nginx, express.js, and MySQL. React.js (frontend) will communicate with the server through (nginx and express.js) and retrieve the data from MySQL database. Here is a digram explaining how this works:

A react app shows data taken from a store. If a user is doing something “i.e add a new achievement”, an action will be dispatched. This action will make an API call to the server to insert the new achievement in the database. After successful insertion to the database, a reducer will be dispatched. This reducer will then add the new additional achievement and add it to the store. React will recognise that there is a data change in the store and it will re-render the page.

Server – Express.js

To handle all the necessary request, we have several endpoints declared in our express.js. These are:

1. /api/auth -> to authenticate user on login
2. /api/biodata -> to handle when user edit their biodata
3. /api/password -> to handle when user change their password
4. /api/prestasi -> to handle when user adding achievements
5. /api/edit-prestasi -> to handle when user edit achiements
6. /api/files -> to handle when user upload proof of achievements
7. /api/print -> to handle when user print their achivements

Overall this was not a very big project with less than 6 actions and only 7 endpoints. The bigger challenge for was managing the server to print the report. The other api endpoints are just doing CRUD to the database, but the print is something special. For this I use ‘pdfkit’ module. The data is sent to the server via actions. And the server render the PDF and sent it back to the browser. This is one of the example:

The important thing about this is depending on how many achievements you have per semester, the print out will change.

This is will be the end of this react application. If you like to try it, you can go to:

https://utu.damartrianggoro.com/

NIM: 1234556789

pass: 123456789

You can add and edit achievements, and also print the report. My brother (the teacher) is now applying for funding for this application and hopefully this can be put to live very soon.