Building Course Assist Part 7: Adding some final features and bug fixes (2/2).

Building Course Assist Part 7: Adding some final features and bug fixes (2/2).

This blog is a direct continuation of the previous blog which if you remember or have read the title of this one was about adding some final features and bug fixes. Because there was quite a bit to be done I decided to once again split the blog into two parts with this being part 2. In the last blog, I talked about how I worked on optimizing the sockets used in the app and adding some improvements to the messages list and chat. In this blog, I'll talk about the remaining changes I made which were adding notification badges to the bottom navbar and a couple of improvements to the UI in some sections of the app. So without further a do let's jump straight in🤾‍♂️.

Adding badges to the navbar

The first thing I did was add notification badges to the navbar. What's this you ask😄? You know when you're using your favorite social media app and you get a message or notification then a little colored circle or heart appears on top of the icon that indicates a section of the app, like the bell icon on Facebook for example? This is exactly what I was trying to replicate. The notification badges in Course Assist are used to indicate whether there are unopened messages and notifications in the app. The badge is also supposed to disappear once a user opens all unopened messages and notifications. All this is supposed to happen automatically and this is where the problem was🤨. To solve this I used UseContext (which if you don't know about you can read about at this link😀). It's basically just a React feature that allows you to manage state across different components in your project. So I set up context at two points, when the app is open and when a user opens an unopened notification. Like this the state is constantly updated so when the user opens the app they'll immediately know if there's an unread message or notification and also when the user opens all notifications or messages the badge will automatically dissappear. All this is made possible by using adding a simple has_seen field in the notification and messages models in the database which changes everytime a unopened message or notification is clicked. Unfortunately😬, because context works with UseEffect here, if the user is already in the app or in the notifications or messages page a new badge won't appear unless it's somehow refreshed but for now Course Assist will just have to be lauched like this then maybe later I will add the feature so the badge is updated automatically despite already being in the app.

Improvements to the UI

Next I worked on adding some improvements to the UI, nothing too complicated just a little something to make the app look better which includes:

  • Making reviews on the expert profile look better: This is basically just a list of reviews and ratings an expert has gotten from people he or she has helped.

  • Organising the request list on the expert requests page: For this I just organised the list of requests an expert made in descending order of time.

  • Added profile picture place holders: You know that faceless man you see before you add a picture on Facebook? Yes that guy😂. I added a placeholder like that which you'll see if you don't have a profile picture. I just downloaded some random picture from the internet so hopefully it won't come bite me in the neck later🙂.

  • Improved button UI: Last but not least I just made a couple buttons look pretty, something I forgot to do earlier on.

What's next?

With this last step I can now gladly say Course Assist is a complete project but by complete I don't mean a hundred percent complete, if you're a software engineer like me you'll know that a project is never really a hundred percent complete😅, you just have to get it to a point where its able to do what it was built to do without much issues and that's where Course Assist is right now. That being said I'm also glad to announce the creation of a new blog series I'll be starting called Running Course Assist🥳. I've decided to create this because most tasks going forward will be focused on the day to day running of Course Assist and not building, though I will still be updating the building Course Assist series when I add some significant changes to the app. The first Running Course Assist blog should be out next week starting with getting a logo and creating socials for Course Assist🙌🏾 . Also in the next month or so I'll be starting a new project which we'll mean a new building series, all this and more exciting things to come which is why you need to stay tuned to the blog so you don't miss a thing. You can also follow me on my socials at this link so you know about my blogs the second I post then. Thanks for reading and see you in the next one🙏.