My Journey as Web Developer and Architect at Invictus Fest

Read about how we developed the website for Invictus, a pilot cultural fest organized by the students of IITM BS degree

6 mins read • Mon Sep 05 2022

It all started when Hariharan, President of SEC (then Secretary of Namdapha house) asked me “Do you know any React devs in your house who can work on both React and Firebase?” I don’t know whether there were devs in my house at that time because literally no one showed up when the House Council of Kaziranga recruited web devs to build house websites on google sites.

I didn’t know React at that time except for some theoretical concepts but that Firebase thing enlightened the developer in me since I know Firebase (too lazy to create own database and hence prefer these cloud services). I took that opportunity and he explained about the idea of Invictus even though I didn’t know ReactJS.

Invictus Landing page ideation - My Journey as Web Dev & Architect at Invictus Fest
Invictus Landing page ideation

The first requirement was a landing page with a counter and some elements depicting the partnership of the three houses Wayanad-Namdapha-Kaziranga. It all happened 8 days before the fest began.

The First prototype

I started making the layout of the counter. It went really well but couldn’t wrap it up because no logo or background or font was finalized. They took the whole day to finalize a logo. I still remember how he and Jigyasha (then Secretary of Kaziranga house, currently Student Activities Coordinator of SEC) stuck in between those conversations.

The first requirement was a landing page with a counter and some elements depicting the partnership of the three houses Wayanad-Namdapha-Kaziranga. It all happened 8 days before the fest began.

Initial functionalities:

Then arose the need for the functionalities. Cloud messaging and Authentication were the first on the list. Authentication is not a tough implementation. Even Cloud messaging is a child’s play but we even got problems in that at the receivers end. Hariharan was my test rat for testing notifications. Not him, but his devices. He got a cool setup of monitors besides a laptop and a macbook (yes I said monitors).

He knows that this setup is too overkill for the work he does - My Journey as Web Dev & Architect at Invictus Fest
He knows that this setup is too overkill for the work he does

It took us a long time to figure out what went wrong with the notifications. The authentication system was set up but not rolled out because we had no idea what should be done once the user is authenticated.

We came up with the idea of setting up the database with Cloud Firestore with the details of Student mail ID, House name, Group ID, Registered events and points (points were removed at a later point since the idea behind the points were not concrete) Hariharan helped me in setting up the database with the data I had. Then the plans and paths started changing…

Recruitment:

One of the main reasons we had that landing page is to attract people to work on the fest and to attract companies to help us financially. Luckily we got 60+ responses from the students with event proposals, volunteers among which I was interested in the 10 responses for helping out the tech team. We sent emails to those people for a kickoff briefing about what we needed.

Unluckily we had to push the date of the meet to 24th of August since that was the only time when everyone was supposed to be free.

One happy news was that the UI was designed by Nithyashree (21F1002146) and was approved by the organizers. I was really surprised by this quick approval from the organizer's side.

Home page UI - My Journey as Web Dev & Architect at Invictus Fest
Home page UI

Main site development:

On the 24th afternoon, we had that tech team meet. I was in shock to see only 5 participants in the meet (I didn’t know that there was another shock waiting for me). Hariharan explained about the UI and the functionalities needed for the site. After the meet, only 3 guys approached me to help me. That was my first team leader kind of responsibility so I had no idea on where to start. And that’s when this guy showed up, Saurish (21F1003102). He helped me in setting up the React environment (I have mentioned I hadn’t practiced React). He completed the navigation part and the required blank pages. Then it was easier to assign tasks from there.

It was 2 days before the launch of the fest. That’s when the most unexpected thing happened. Everyone except Saurish who came to help me with the website dropped off due to some reasons. We had nothing in place except navigation. I took this news to Hariharan and Saurish. Hariharan with great disappointment revealed the backup plan of creating a Google Site. I guessed he already knew that this would happen. To my surprise, Saurish didn’t say anything but handed me the basic functionalities of 2 pages, Event List and Event Passes. I was delighted to have that.

We dropped the idea of the Event Schedule page since Event List and Event Schedule were supposed to deliver the same thing in different ways. It was a day before the Opening Ceremony. I started learning ReactJS because I know the work was too much for a single person to do. With the template in hand, I learnt React components very quickly and started building the components, stylings of Event List and Event Passes. We used placeholders for development. Hari gave us some data of events to test with which I added to the database.

One day to go, everything was well materializing and that’s when I remembered about the main thing, the Home page. The UI design of the Home page was the complex one with the circular elements positioned at random places along with some beautifying elements like extra circles and shadows. And the Team page was also empty, we just added a vector “Coming Soon”. We didn’t know who were all working behind this (we were not the only ones screwing up our sleep cycle, there were other people for Creative, PR and everyone was working hard to get everything on track). Hari had different plans for Team page (which changed over time) and thus it remained “Coming Soon” for the entire period of the fest. He gave the idea of using images instead of creating everything in the Home page since our time of days was replaced by hours then. He even developed the pngs of the Home page for both desktop and mobile views using figma. We just simply added those images to the Home page (but it was developed later).

The Launch:

With a few hours left for the Opening Ceremony, I started making changes to the landing page so that it’ll have the “Sign In with Google” button instead of “Check back later” and take the user to the Opening Ceremony if he/she is a student. Those changes were published minutes before the launch of the fest and a mail was sent to everyone regarding the same.

The Opening Ceremony featured the speech of the representative from Stratlytics, the title sponsor for the fest. I don't know what happened since I didn’t attend that event. I was checking some errors in the final build since we had to publish the main site before the Opening Ceremony was completed. With some changes, the final build was published before the deadline.

Further Developments:

Over the course of the fest, we came across many bugs which we didn’t notice during the development. And that made our time during the fest. I took the tasks of updating the database with events, live event tags and sending cloud messages besides fixing some styles. Saurish looked after the bugs and incoming feature updates.

After the fest was over, I developed the Home page and Archives page removing the Live tag with the React I know. Home page has the elements that were supposed to be there according to the UI design provided. The Archives page is the new addition made by me which has the recordings from YouTube of all the events conducted as part of the Invictus. Added the members who were the part of the website

Home page final design - My Journey as Web Dev & Architect at Invictus Fest
Home page final design

Check out the website at https://invictus.fun

Be the first to know.

© 2024 All rights reserved | v3.0