Building Course Assist Part 20: Adding some last minute bug fixes and features
With Course Assist now just a heartbeat from launch I've been conducting system tests to make sure everything is working the way it's supposed to. But with system tests come different issues some new and some that I might've overlooked when developing the app. Nevertheless, I quickly sprang into action to get these sorted before launch😤. In today's article, I'll show you some of the bugs I discovered while testing Course Assist, the solutions I used to fix them and some new features I added as a general improvement. Let's jump straight in🤾
Bugs discovered and solutions used to fix them🔧
Messages and chat sockets weren't working: The messages and chat sockets that enable real-time sending of messages between users on the Course Assist apps weren't working the way they were supposed to. I did a little investigating and found that this was because the user variable used in the socket on receive function to determine which user is receiving which message was generated in a separate function and not the socket function and was causing the on receive socket to only get the user variable on the second-page render and not the first.
Solution: To fix this I simply defined the user variable inside the on-receive socket function which is now received on the first render and the sockets work correctly😁.
Images on the verification email template stopped showing: The verification email template has a few images, that's the Course Assist logo and some social media icons. Originally I uploaded these images to my Google Drive and got the links to these then attached them to the image tags src on the html template and it worked. For some time at least 🙄. After testing I discovered they weren't showing anymore.
Solution: I fixed this by creating a new image model for the email template images in the backend and uploading these images to the deployed backend, then via the API I attached their links to the html email template. In other words, I did what I did with Google Drive except now on my server. It worked like a charm💪
Static files and media were not loading on the backend: The Course Assist backend is deployed on a Digital Ocean droplet running Ubuntu with Nginx. After I had deployed it I tried to access the admin and got a bare html admin site which we do not want.😅 After some investigating I found this was caused by a 403 forbidden error on the static and media files folder because the user on the Nginx server did not have permission to view these folders.
Solution: To fix this I just changed the user on the Nginx config file to the user name I'm using to access the Ubuntu server and it worked just fine.💃
Newly added features✨
Connection failure page in the Course Assist User app: I added this to give users a nice UI when their Internet connection is not okay. The image below is of what users see when their internet connection cuts while using the Course Assist app.
An activity indicator when sending messages in chat: To improve the chat UX I added an activity indicator that is activated when the user sends a message and deactivates when the message is sent. Below is an image of the activity indicator on that chat page.
A progress bar on the payment gateway webpage: I've also added a progress bar to improve the UX on the payments webpage. The green progress bar moves as the webpage loads. The image below is of the process bar on the payment gateway webpage.
This is not an exhaustive list but one with the most significant bugs I discovered and features I added. Thank you for reading and see you in the next article🙏.