VerifyHut - My First PWA
My reflection on the VerifyHut project
Want some music while reading? ๐ต๐ป
Background of VerifyHut
I had a course called Software Project at Haaga-Helia UAS. Students had a chance to work with a real customer and tried to develop an application that satisfies the customer’s needs. The customer’s requests were kind of difficult and pretty complicated that I thought we couldn’t create an app that could satisfy all their requirements due to limited time.
The app’s main purpose is to take recipients’ signatures to confirm that they have received the product. The product could be anything that is delivered by a courier. This app has potential and could be used for many different purposes. This is why VerifyHut was created.
You could check the project out from this link.
What can VerifyHut Do?
The idea is very simple: take another person’s signature to confirm that he/she has received or done any sort of business with the user. If I lend money to a friend, I could ask that person to sign and write the reason for signing is “Borrowing money from Vincent” ๐.
The app has all basic CRUD functions but there is a couple of things it’s not allowed to do. The user can’t modify the signature, of course, he/she can only edit the signature’s category. Moreover, at the moment, nobody can delete a user except the code owner ๐. The app could be installed on a mobile phone or desktop to be used just like a native app. How awesome that is! ๐
What Difficulties I Had?
I have to say, this project was quite challenging and I’m so happy that I’ve finished it.
Development Process
I use Scrum and Kanban Board in the development process to practice coding in sprints since the technique is important for my work in the future.
SPA
Single-page App has been in many developers’ favor because of their simplicity. VerifyHut is also SPA, however, integrated with only a few routes using React Router. This is where the nightmare began. When I test the deployment of the app on Netlify, if the app wasn’t in the root route, somehow, it broke on page refresh. Later on, I realized that Netlify couldn’t figure out the routes since it recognized the app as SPA. The fix was easy, I just had to add a _redirects file inside the public folder with only 1 line of code
|
|
Eslint
Surprised?! How can linting be difficult? Well, the linting process wasn’t difficult but conflict systems were. When I implemented Eslint the first time and started the app, I got this error
It took me hours to fix this. It was really easy:
Delete yarn.lock
Run
yarn install
Run
yarn upgrade
Voila! The problem was fixed!
Exporting Signature with Info
I think this was the most interesting feature of VerifyHut and also was one of the most challenging functions to develop.
When a user saves a signature with timestamps and other information, it would be useful to export the signature together with its info. Otherwise, it would be useless to have just a picture of a signature. The library I used for producing the signature didn’t provide a built-in function to do this. Therefore, I had to do some research and figure out how to do this.
The image is exported to PNG format using base64 so I planned to convert other information into base64 and combine the 2 strings to create a final image.
- First, I created a hidden canvas with the provided information placed next to the signature image.
- When the user clicks export, the canvas element will be converted into base64 and then combine with the signature image’s base64 string.
- This way, we have a final image that contains both the signature and its crucial information.
I think I will write a tutorial for this process ๐.
Related Documents and the Importance of Testing
I have been using MongoDB for a while now, it seems to become my go-to database for full-stack projects. We all know the NoSQL database’s weaknesses. Although MongoDB and Mongoose offer many ways to deal with related documents, I still see the limitations while coding. If I used the SQL database, resolving related documents would have been easier than using MongoDB. For example, cascade delete in SQL DB is more straight-forward than MongoDB. Thanks to this project, I realized that I didn’t know so much about MongoDB, still.
This part is where I realized the importance of testing. Since I had to implement many functions, I somehow forgot to solve the relations of the documents that have refs. Thanks to the end-to-end tests, I realized many bugs the app had at this moment such as deleting a project didn’t delete all of the signatures inside it, and moving a signature from one category to another didn’t work as expected. The integration tests alone only helped with testing whether the endpoints were working or not but e2e tests helped me figure out these crucial bugs.
End-to-End Testing with Cypress
The final puzzle that I still haven’t figured out how to solve is making End-to-End testing work on Github Actions. I’ve tried a million ways but the test always stuck at the login step. I hope I can figure this out later on.
Learning Outcome
I’ve learned so much from this project. I guess maybe I can call myself “Software Developer” now since I’ve created a PWA, not just a website? ๐ (Just kidding ๐, title is just title, right?)
Now I know:
- How to create a PWA
- Combining and creating images from base64
- Should use SQL database if the data is relational
- Solving Eslint conflicts if there is any
- Should write more tests and don’t be lazy ๐