When developing an app, it's important to prioritize the user experience and their privacy. One way I've achieved this with Course Assist is by updating the chat UI, adding terms of service, and a help page. These updates have not only enhanced the functionality and security of the app but also provide users with a clear understanding of the services they are using. In this article, I will explain how I went about updating the chat UI and adding terms of service and a help page. Let's get straight to it🤸‍♀️

Updating the chat UI📱

After I had improved chat functionality by using FlashList I figured I'd also go an extra mile by updating the UI. I had previously done a very simple chat UI one that was inspired by the LinkedIn chat UI design. But to be honest it was not that good😕. Not that there's anything wrong with the LinkedIn chat UI design, I just felt the way mine looked wasn't all that good. When updating the chat UI this time I decided to go for the classic chat UI design😌. The one with colored message bubbles like WhatsApp or iMessage.

When creating this the biggest challenge I faced was placing different users' messages on opposite sides of the screen. To solve this I just used a view, set the flex directions to a row and set the justify-content to space between. I then added some simple functionality that allowed messages from one user to sit on one side of the row and another user on the other side and just like that it was done. The messages were on opposite sides of the screen😁.

The remaining tasks were pretty simple it was just adding a border on these messages to create a message bubble and giving these bubbles color. For the main user, I set green as the color of the message bubble because that's the main color of the app and for the other user I chose grey because that is sort of a neutral color. I then added some spacing and padding around all the objects to make them look better and also placed the message sent time under the message bubbles. The pictures below are of the old chat UI and new chat UI design respectively.

Adding terms of service and a help page📄

Terms of service and a privacy policy are something I had already created when building the Course Assist landing page. I used a terms of service generator because I can't afford a lawyer🥲, but I also added a close in it that is specific to Course Assist😅. I added terms of service to the app by simply attaching a link to the terms of service page on the Landing page, to the terms of service button in the app. I used React Native Linking for this, so when the user clicks the terms of service button React Native Linking opens the default browser on your device and redirects you to the terms of service page on the landing page.

For the help page, I also kept it simple. I just created a new get help page and put the Course Assist number and email address. I also used React Native Linking here so when the user clicks the number their phone dialer is opened with the number already there and when the user clicks the email address the default email app on their device is opened ready to compose a new email with the sender and receiver email addresses in place and subject set as 'Course Assist Query'. The images below are of the terms of service and help page links.

With these crucial steps done, the Course Assist Expert app is now ready for public use🥳. I now need to go through the Course Assist User app and make some new updates if there are any needed and also add the new features and improvements from the Expert app onto the user app. As soon as that is done the Course Assist beta can begin, something you'll not want to miss so stay tuned to the blog. Thanks for reading and see you in the next one.🙏