How I executed Goa Government's ambitious plan to take the Degree and Diploma Admissions online.
Sharing the experience of building my biggest project to date by working with the Goa Government.
The very first day of “unlock 1.0”!
My friends and I were sitting in the Chief Minister’s residence waiting for our turn to meet him. We were told that the lady who went before us had the solution to the Governmental needs as she was representing an established IT firm from Pune. It was two hours since she entered the office, then the Director of DTE (Directorate of Technical Education) Shri Vivek Kamat called the four of us inside.
They made me sit right in front of the Chief Minister, Dr Pramod Sawant, the Principal of my college was sitting behind me and the director to my left. I presented my solution to the CM and within 5 minutes, I walked through the entire flow of the website with a live payment demo.
The CM took the contact details of each of us and dismissed us from the office. Meanwhile, the government was in discussion with the DTE. After 10–15 minutes, all of them came out and the director gestured with a thumbs-up. That was it. A 21-year-old kid was entrusted with the responsibility of working on 4 major projects. These projects were going to change the way students apply for admissions in the engineering, medical and diploma colleges across Goa, forever! Through this project, I also saved the government a whopping 70 lacs rupees.
That is how I bagged the biggest and most complex project of my life. Biggest, as it required over 100 thousand lines of code in the front end itself.
Here is how it all began…
Let me take you back in time to 16th March 2020. It was a day after the Government declared a 2 week holiday for all the schools and colleges across Goa. I was sitting alone in the hostel, working on the new version of “CoronaTracker.in”. It was another project where I was leading the development team till Dec 2020.
That same day I had got a call from the Principal of my college, Goa College of Engineering. He had said that he wanted to meet me as soon as possible. Earlier I used to meet him at a less crowded time, between 7 pm — 9 pm (our principal used to be in the college till 11 pm at times). So I met him in the evening and heard about the Government’s plan to take the GCET (Goa Common Entrance Test) application forms online.
This was a great opportunity to refuse, so I formed the team within a day and we were in the DTE Director’s cabin the very next day.
After the first meeting, I was told to do the basic screens and explain the process to them and this is what I had designed. 😆
I don’t know WHY, but my first screens always look unpolished. I wasn’t satisfied with it. So, I started from scratch and came up with a new flow for the first phase of the project.
Phase 1 — GCET Application Form (Goa Common Entrance Test)
Phase 1 was the easiest, but there was a huge hurdle waiting towards the end. I had to show a big dynamically generated table on a mobile screen with live updates of the vacant seats in every college.
The initial days working at the DTE were very exciting and intimidating. I remember my first meeting with the Director. He had asked me to explain the project, and I was super nervous. I don’t think I had ever been so nervous before.
At the beginning of the project, I focused on something that the government never pays heed to. A good UI and a better UX. 😅 If my name was going to be associated with this project, then the design had to be good.
❓ Challenge
The design phase was as difficult as the development phase, especially for the complex components. I always found it difficult to design a header with 2 logos. It’s uncommon and unconventional for a website to have 2 logos, so things get tricky. This reminded me of a website designed by Hampus Olsson for the Government of India. Taking a pinch of inspiration from that website, I came up with a beautiful header. It looked much better than typical government websites. 😉
💡 Design Solution
Since the aim of the website was to accept the application forms from the students, I had to get the form elements right. Building the form is one of the most difficult parts in the front end. Even experienced folks can go wrong here.
In the first phase, we divided the form into 2 parts, basic details and centre-selection. Though basic details consisted only of the input elements, it was challenging to build an interactive input element to guide the students in case they go wrong. I was a beginner in React, so that was also an obstacle in my path.
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.
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.
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.
❓ 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.
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.
