Case Study - GP Online Web and Mobile App
Project Overview
For our Second Year Team, me and my group had to work together to design, implement and document the development process for a medium-scale web/software development. We also had to do a presentation to demonstrate the website working in action and implement a unique functionality to it as well.
​
Website link: Home | GPonline (gponline-app.herokuapp.com)
Project Roles
Eoghan Feighery - Front End Developer, Back End Developer, Team Leader
​
Mariusz - Back End Developer, Front End Developer
​
Vitalie - Back End Developer, Front End Developer
​
My core role was the front-end developer of the web and mobile app. This involved constructing the wireframes for the design and look for the front end of the site and built the code for its structures on both browser and smartphone layouts, ensuring the website’s stability across multiple platforms. Additionally, I supported the back-end development of the Database Schema.
​
I also acted as a Team Leader for the website’s development, making sure everyone is making progress in their tasks and we delivered the project on time.
​
Software Tools & Languages: Visual Studio Code, Figma, Microsoft Teams, Draw.io, MongoDB, Node.js, REACT.
​
Project Duration: 12 Weeks
Methodology used
As a team, we chose to use Agile project management to manage the development of the web and mobile app. Agile is a project management methodology designed for software developers to adapt to unpredictability contingencies through sprint iterations. We worked in 1 week sprints to build the software.
Agile is normally used by smaller teams working with stakeholders to develop prototypes, concept ideas and other ways to showcase how to solve a problem.
Common Agile principles include embracing changing requirements, frequently create software in weeks than months and working software as progress increments, satisfied customers are top priority, self-organisation and face-to-face communications.
Planning & Requirements
For the assignment, each group has to submit a proposal briefly explains the app’s target audience, marketability, functionality, and a project plan, and a document on the app’s requirements (both functional and non-functional).
Additionally, we had to submit a report to document the application's development processes and accessibility. After discussing a few ideas, my group and I decided to make an online GP app that can let users book a doctor’s appointment with a video chat functionality similar to Skype or Facetime. This was decided because people may not have a hold of their own GPs and/or are worried about having symptoms of Covid-19 or other diseases.
​
Our target audience would be for all patients, whether they’re new, need to change and contact GPs in emergencies, can’t contact their own GPs due to relocating elsewhere, and where GPs can’t see many people throughout the quarantine.
​
(C) The Guardian (2020)
(C) Independent.ie (2020)
Target Audience
Our target audience would be for all patients, whether they’re new, need to change and contact GPs in emergencies, can’t contact their own GPs due to relocating elsewhere and where GPs can’t see many people throughout the quarantine.
Research
According to our research, given the impact of Covid-19, web and mobile app with a patient database, appointment booking system and a video chat system are becoming critical for the delivery of GP services. Thus, our application must be easy to access and user-friendly for all users of the site (which we called GP Online).
Design (UX/UI)
The GP Online website had to be made in a way that’s safe and easy to use for people who needed to contact doctors by booking appointments and confirming accurate patient diagnosis through video chats.
Vitalie and I both worked on designing the wireframes for the website’s layout and design. We did this using the design tool Figma. Similar to Adobe XD, it allowed us to figure the site’s colour scheme, layout of the pages, positioning of certain elements (navigation bar, footer, page links, etc.) and also the structures on both a website and smartphone standpoint and its navigational format.
The app will have 4 pages; one for the home page, one for contact details, one for provided services and one for the about page. Additionally, there’s a registration form for requesting appointments.
Using Visual Studio Code, we had to make sure that all of the elements had to fit the size of the browser window so that no part felt out of alignment. Once the front-end of the site was finished, we also added an i-frame linked to Google Maps so that in hindsight, users can find out GP clinics near their current location.
Develop
Mariusz and Vitalie were in charge of creating the back-ends for both the main and video chat apps as well as connecting the site itself to a MongoDB Database. This will let the server accept requests from clients and contains logic to send the right data back to the clientele.
One other aspect for GP Online was how to develop the video-chat system. We also used REACT, a JavaScript technology created for making custom UI for single-page apps. This allows for larger web apps to change data without having to reload web pages.
The back-end for the video chat application which initiates the program.
Another was how users can make an account for GP Online. Here, it’ll allow user registrations for those who want to sign up, not to mention it allows available services to be used by users via filling in their personal data.
The Mongoose library handles data relationships, offers schema validation and transforms objects in code.
Not only does it give us a simple schema answer to model the app’s data, but it also helps us save user details to the MongoDB database.
Code for allowing user signups.
A schema-based answer for appointment criteria requirements.
Then when they log in later, they’ll only need to enter their email address and password without any hassle.
Testing Phase
Initially, our app was made on Amazon Web Services, but later on, we chose to use Visual Studio Code for later code writing, since the former restricted the amount of website code that can be shared across. This was because VSC was more familiar to us in the vein of Notepad, another code writing program that we used in the past.
On the services page, clicking on either one of the displayed boxes will bring you to wherever that specific service was detailed. This is known as a page jump, which it’s even used in all other sites like Wikipedia.
Here's how a page jump would look when performed.
For the appointment request button, you have to specify your symptoms, a suitable date and time for an appointment and to decide on a video call in a form for submission. When the video call request button is clicked, users will be taken to a separate page which turns on your desktop camera for the call.
The GUI for the video chat application
You’re then asked to type your name and clicking the button below it will create a randomly generated call ID that can be pasted into the text field. Once all of the pre-requisites are met, a call box will be made to activate the video call. The call itself will last for the duration of your appointment and once it’s finished, you can hang up with the aforementioned button.
Deploy and Launch
We decided to use GitHub for convenient code collaborations, and it even works great as a collaborative code development platform. We also used the cloud platforms Netlify and Heroku to store the code modules (Both for the main and chat applications).
They can be found here: https://www.heroku.com and here: https://www.netlify.com.
We also had a support session in order to brush on any code errors we had in the app’s development stage.
Finally, with all of the code finished we released the finalised version of GP Online to the Internet.
It can be accessed at this link: Home | GPonline (gponline-app.herokuapp.com)
Maintenance
In the testing phase, we asked many people to try out our app on various devices and to give us feedback. In our report, the feedback has been extremely positive with particular praise going towards the site’s organised and accessible nature. They also noted the video chat as being simple and clear to the users and useful for easily contacting doctors for booking appointments.
I, Mariusz and Vitalie all agreed that the project will be used more often in the future since people will prefer video calls with a doctor unless they need to go to a medical centre.
We decided that in the future, we can upgrade the login functionality so that users can log in through their Twitter, Facebook, or Google accounts. We could even let the user request to reset their password via the Captcha authentication and finally to create a video icon button if the user requests a video call and online payment methods.
Key Learnings
I gained a deeper understanding as to how MongoDB can be used to save countless patient accounts as well as how React can be used to effectively create a video chat feature.
A bigger obstacle for me and my group was making the video chat feature run effectively and also having to finish the project while having to sort out other projects from different modules this year.
Due to the project, I gained some experience in developing more complex website features compared to previous endeavours.
I learned to be able to look out for myself and members of my group. I also learned to not to doubt myself too easily.
I learned to be able to work hard despite having to do all of my college work at home due to the Covid quarantine.
I was able to learn how newer technologies like MongoDB and React worked.