How I executed Goa Government's ambitious plan to take the Degree and Diploma Admissions online.
By: Salil Naik
Tags: Goa, Web Development, Web App Development, Computer Science, Engineering

The centre selection page is actually where my JS and CSS skills got tested, or at least that’s what I thought (wait for phase-2 😉). To answer GCET, students have to select an examination centre.

❓ Challenge

There are limited seats in each centre, so this had to be synced with the database in real-time. I had to disable the centres when the capacity of the centre would max out.

💡 Tech Solution

Instead of calling the API periodically, I changed the design and made a drop-down with all the centres. The idea was to call the API only when clicked on the drop-down and disable the centres that are full. So this would NOT make unnecessary API calls and also serve the purpose well.

❓ Challenge

Soon after, I was posed with another challenge of showing the centre drop-down on mobile and smaller screens effectively. Though we integrated no analytics on the website, I presumed most of the users would be on mobile. Since I was building for the students this time, I had to make sure the mobile version works as smooth as the desktop one.

💡 Design and Tech Solution

I used CSS Grid for the drop-down lists as it would give me greater control over the inner elements. At the time of coding, it had good browser support.

Center options on a mobile device

This entire section worked perfectly fine and I can gladly say that we did not receive a single complaint or issue with centre selection.

🚀 Launching Phase 1

This would be the 1st of the 4 projects to be launched. Since Goa Government was about to take online applications for the first time, we expected the students to have technical issues. Hence the backend developer and I provided the technical support.

In those 10 days of technical support, I answered 100s of calls and emails.

💡 Insights and solutions to the problems faced after launching the GCET portal

I’m very grateful that I got to learn a lot after launching the phase1 project.

The autofill issue — many students were using their parent's smartphones/laptops to fill the form. They would fill in their name and other basic details and click on the auto-fill option in the browser to fill in the number, address, etc. But, with the autofill feature, even if one option is selected, it injects relevant data into all the input fields, including basic details like name, email, etc. And, a few students who selected the options that were suggested to them by the browsers ended up submitting the form with their parent's names.

💡 When I realized this issue on the first day, I pushed a quick fix by disabling the autofill for all the input elements. Preview and edit — Though the quick fix solved the autofill issue, it wouldn’t arise at all if we had a preview and edit option. Implementing this after launching the website would be very difficult, as the application acceptance period was only for 10 days. So we skipped it but had both ‘preview’ and ‘edit’ options in the next 3 phases. The Apple problem — There are many things that Safari browser renders and does differently, which I was not aware of as I do not own any Apple gadgets. Some issues we noticed were: 1. The date input element was not accepting the user response in the same format as other browsers. Thus, some users received few errors from the backend. 2. The file upload input element was bypassing both frontend and backend validations. Though this happened with very few users, I still don’t know why it happened.

This is the only problem I could not fix because I didn’t have any Apple devices to debug it and I had limited time.

If anybody has better solutions to any of the issues/challenges that I have mentioned in the blog, then kindly convey them to me.

Phase 2–4 — Degree and Diploma Admission Forms

After the success of the GCET portal, we moved to phase 2 with the experiences and lessons from the previous launch. Here we divided the entire flow into 5 steps as there were too many things in the application.

This time, the form was editable and there was a preview page as well. But the features that stood out, or should I say the features that challenged me as a developer, were the category selection and file upload page.

The category selection section

If I’m not mistaken, Goa is the only state to have 15 different reserved categories. This includes those based on caste and physical health and others like Gulf, NRI and Foreign National categories. Wondering why people living outside the nation would choose Goan colleges? Yeah, me too.

❓ Challenge

Coming back to the project, in the category section, the user had to select the reservation categories from the 15 options provided and upload the relevant documents. During the offline process, the authorities would explain to every student about the category combination and reserved seats associated with each reserved category. But taking the same process online posed a significant challenge for me, as I had to convey to the students which combinations are possible and which are not while they were checking the checkboxes.

💡 Solution

To overcome this challenge, I made this section interactive. The aim was to make it as smooth as offline registration. Whenever the user selected any category, all the mutually exclusive categories would get disabled so that the user doesn’t end up selecting those categories and, in case the user clicks on any category that is mutually exclusive with the one that is already selected, a modal would pop up with a message.

Category Selection Demonstration

This helped the users make the right decisions and choose the correct categories and this solution worked as expected.

The file upload section

Undoubtedly the most thought out section in the project. A lot of files needed to be uploaded. Every category would require a different document, and we would show the upload fields depending on the category/categories selected.

Initially, I focussed on the 3 things, file upload, file delete and file preview UI. Since the end-users were mainly students, I made big upload fields with proper labelling for each one of them and also added the size and type validation.

File upload section

❓ Challenge

While testing the file upload section, I always selected 1 or 2 docs and everything seemed to work fine. But this was a mistake. During the project demonstrations, I selected all the documents, something that the user would do. Since the files were heavy, it took a lot of time to upload the documents to the server and we started getting the timeout error.

💡 Solution

After consulting with the co-developer, I came up with an idea to have separate endpoints for each document (probably this is the correct way of uploading documents). Every time the user selected the document, I would directly upload it to the server, and this helped me solve the issue.

There were a few other issues that I encountered here. Since the entire form was editable, the user could log out any time, come back another day and continue filling the form and also edit it if required. So I had to fetch the application details from the database to show the previously added data.

❓ Challenge

Showing the documents, however, was a little tricky. To show the previously uploaded docs, I had to fetch them from the server, which was time-consuming. So till all the documents were being fetched, I disabled the upload section. Here, I made the mistake of testing this on high-speed internet 😅 (which is around 90–100 Mbps at my home). After the launch, I got a lot of complaints saying that the upload section was disabled.

I had committed 2 mistakes here.

1. Did not test how it would behave on slow internet.

2. Disabled the upload section.

Since the files were too many and too heavy, it would take a lot of time to fetch the documents and sometimes it would fail. Because of this, the upload section would remain disabled.

💡 Solution

First, I started testing the project on Slow 3G speed. Thanks to Chrome DevTools. Then, instead of disabling the entire section, I just showed a loading text to convey that the files are still being fetched. And this solved the users’ concerns.

I believe the upload section has a scope for improvement. One thing that I would like to change is the way the documents are being fetched. Currently, all the docs are fetched linearly, one after another. This takes up a lot of bandwidth unnecessarily and it is time-consuming. Instead, fetching the respective document when the user clicks on the preview button will work fine on low internet speed and will consume less bandwidth. But the users may have to wait a few seconds for the document to show up. Hmm, I’ll think more about this and come up with an optimal solution.

These were a few of the many challenges that I encountered. There were a lot of things that I learnt while building the project and I’m extremely lucky and humbled to be given this crucial responsibility.

At the time of writing the article, all these projects underwent major refactoring. I tried to modularise the code as much as possible and reduced the code lines by almost 40% for some components. How? I just got better at React, I guess. I’ll write a blog on that soon to share how I refactored and improved the efficiency of the project.

I’m immensely grateful to my friends Krishna, Ravi and Pranav for helping me build this project. I offer my heartfelt gratitude to the Chief Minister of Goa — Dr Pramod Sawant, Director of DTE Goa — Dr Vivek Kamat, Assistant Director — Dr Dipak Gaitonde and especially the former Principal of my college, Goa College of Engineering, Dr M S Krupashankar for trusting me with this important project.

Experience of working with the government.

During Phase 1, I learnt a lot about how the government works. I realized that our nation is run by bureaucrats and not the politicians we see on television. Of course, the head of the state holds the ultimate authority, but most of the work is achieved by highly educated and skilled individuals. By highly educated, I mean individuals with a PhD, IAS and IPS officers and experts in various fields.

The content that was supposed to be uploaded on the website was discussed, argued upon, and challenged by the authorities in the meeting room. Every decision was tested to reach the optimal conclusion that would result in the betterment of society.

I am throwing light on this matter because I often hear people criticizing the government. Believe me, during the first meeting I burst into laughter because of the strict atmosphere. Luckily, the principal covered up for me, saying that I’m not used to government procedures.

See what the Chief Minister of Goa has to say about our work.

Chief Minister of Goa, Dr Pramod Sawant praises my team’s work.

The day I presented the final demo of Phase 1, everyone present at DTE was elated. They were happy because this project was in the pipeline for many years as they were engaged with various companies in developing the solution. I was informed that no one could deliver a satisfactory solution.

They say, दाने दाने पे लिखा है खाने वाले का नाम. Maybe this project was meant for me. Having gone through the entire admission process myself, it was a little easier for me to transform the entire application process online.

The interesting thing is, while many students were protesting against the government, I was working with the government.

Just like any good thing, this too came at a cost. I guess with great responsibility comes tremendous pressure. The responsibility of the admissions of all the engineering, medical, pharmacy and diploma students was upon the website I was building. Though the backend developer was a senior to me, this was my project. I was the one who formed the team and was the primary point of contact with GEC, DTE and the CM (only on one occasion). I carried this pressure on my shoulders for almost 6–7 months, working almost every day, which also meant that I could not enjoy the holidays (lockdown). And spending time at home doing absolutely nothing remains a dream for me. A dream that probably won’t come true unless someone eats a bat again, I guess.

This also made me quite empathetic towards all our leaders. My responsibilities were very limited compared to the people I was working with. I could not even imagine what must be going through the lives of all the ones who kept the state and the nation running. I guess it’s very easy to point out the mistakes the government did during the pandemic, but we definitely do not thank them enough for sailing us through the most difficult periods and making sure the system does not collapse. When the entire world was at home fearing the new virus, our leaders were working every single day and so was I.