[iFAR - IAS For A Reason](https://ifarias.com) emerged as a mentorship platform with the principle "by the students, of the students and for the students" in minds. Founded in 2023, by my friend Akash Sharma, as a platform to help students overcome exam anxiety and fear with regular calls, iFAR has grown into a community of students, mentors and successful candidates.

With the rapidly changing pattern of the exam, the role of coaching institutes has become redundant in recent years. With a huge number of students wanting personalised attention and feedback, iFAR has been created to fill this gap.

## Challenge

To build a website that highlights the uniqueness of iFAR's approach of mentoring instead of the coaching that other institutes focus on. Akash's goal was not to create just another IAS coaching centre, quite the opposite, in fact. Akash insisted on building something that exudes class, and highlights the quality of mentorship offered by iFAR. Any student visiting the website should feel at home. They should be conveyed all the information that they may need to make an informed decision about joining the community, mentoring under Akash's leadership, or to even pursue the toughest exam in the world to crack.

## Approach

### Landing page

![Landing page screenshot](https://pancham-khaitan.s3.ap-south-1.amazonaws.com/portfolio/images/Screenshot+2023-07-30+at+11.46.52+PM.jpg)

Starting with the landing page, I wanted to keep the visitors' cognitive load to the minimum. An IAS student already has a lot of information to hold in their head, and having another website with a bunch of information thrown at their face is borderline stressful. The image below is a screenshot of another institute offering IAS coaching. I wanted to get away from the ultra-detailed landing experience, and offer something that comforts the visitor.

![A competitor's website](https://pancham-khaitan.s3.ap-south-1.amazonaws.com/portfolio/images/Screenshot+2023-07-30+at+11.35.43+PM.jpg)

With a simple headline, and a couple of statistics about iFAR's successes felt just enough information to build trust. As the visitor scrolled through the landing page, they would read the testimonials presented in the form of chat bubbles: a UI familiar to students since they primarily spend time in Telegram reading articles, thus reinstating the fact that iFAR aligns to the students' needs, and not the other way around.

Scrolling a bit more revealed iFAR's most popular YouTube videos. This was intentional as it suggested to the visitor that what they are visiting right now is not a bunch of fluff. There are real people learning with iFAR, and are actively looking to be a part of the community.

### About pages

Both the About pages (About Us, and About Civil Services) are designed to give as much information to the potential students as possible. It is to say, "Hey, we want you to succeed, and we want to be open to you." All the information about the Civil Services examination are up-to-date, and in-line with what the students would need to know about. It contains information about the kind of subjects they should choose, and how much weightage each subject has in the exam.

### Why Mentorship page

![Why mentorship page screenshot](https://pancham-khaitan.s3.ap-south-1.amazonaws.com/portfolio/images/Screenshot+2023-07-30+at+11.46.39+PM.jpg)

With mentorship being a relatively new concept when it came to preparing for such an exam, it is imperative that we highlight the kind of problems that are solved by it. I chose a layout that is easy to understand, and reduces cognitive load on the reader by colour-coding the problems and solutions.

### Mentorship programs

![Mentorship programs screenshot](https://pancham-khaitan.s3.ap-south-1.amazonaws.com/portfolio/images/Screenshot+2023-07-30+at+11.52.17+PM.jpg)

Possibly the most visited page of the website, it shows a detailed breakdown of each offering of iFAR, and helps the students make an informed decision about what to expect from iFAR. My idea was to simplify the layout in such a manner that choosing a program becomes like a cakewalk. You can see the step-by-step offering at the top, and a detailed comparison of each offering by expanding the "Compare mentorship offerings" accordion.

### Adding more value than asked for

![Light to dark mode and back](https://pancham-khaitan.s3.ap-south-1.amazonaws.com/portfolio/images/light-to-dark-ifar.gif)

Knowing how their students preferred different themes during the day and night, I made the whole website change its theme depending on your system's preferences. If you were viewing the website with dark mode on, the entire website's colour scheme will change to complement your theme. And it would turn to light mode, if your system was set as such.

## Tech stack

For the UI, I went with [NextJS 13](https://nextjs.org/blog/next-13) and [TailwindCSS](https://tailwindcss.com) and [TypeScript](https://www.typescriptlang.org) (of course).

For the database, I went with [Firestore](https://firebase.google.com/docs/firestore).

For the contact forms, I went with [WhatsApp APIs](https://faq.whatsapp.com/5913398998672934) and custom form implementation using [Tailwind Forms](https://v1.tailwindcss.com/components/forms).

## Fun fact

This website was built in less than 24 hours from start to finish. Yes, I designed, built and deployed the whole thing in less than 24 hours. Kinda proud of myself there. What do you think about it?

### Website link

[https://ifarias.com](https://ifarias.com)

Building a marketing website to reduce cognitive load

iFAR IAS -- IAS For a Reason

[Google for Startups](https://startup.google.com) is a programme managed by Google to train and mentor startups to meet the right people, help them scale their products and more. It is a worldwide programme involving almost all of the major regions including the US, Latin America, Africa, India, Indonesia, Europe, etc. This programme mentors more than 100 startups across the globe and is continuing to expand its wings across more cities.

## Challenge

Redeveloping the entire Google for Startups website from the ground up and making it functional across devices (mobiles, tablets, etc) in the span of fewer than 6 months. The website looks like a simple static website, but it contains a slew of information and a lot of permutation combinations of how the content appears on different pages. The major challenge was to develop the website to be modular so that we can rearrange blocks without any code.

Another challenge was to make the site look hand-made, meaning it should feel like a person is drawing stuff on screen. While this sounds fun and exciting, having a computer show the randomness takes a lot of precision, especially when you are targeting devices of every size imaginable.

## Approach

ETD: 6 months

We went through the requirement doc and Figma design almost every 5 minutes because the design team had done such a marvellous job of designing the website and we wanted to make sure that the website looked as close to the vision as possible.

It was not just about picking the exact hex code or setting just the right font size, it was about reaching as many people as we could. The design team did an excellent job imagining the playfulness and a custom experience for the website, but it was our job to make sure that playfulness is seen via code. This website was to be seen by thousands of aspiring and hard-working startup founders across the globe. It had to be special.

Another addition to the list of responsibilities was to not just make the website for desktop users, but tablet and mobile owners as well. If you take a closer look at the website, you will discover that almost everything changes its appearance as you switch from device to device. All of this was to be done keeping in mind the modularity of the website. Any block of content could be added or removed by people who did not know how to code. They simply had to select a box and the content magically appeared on the screen.

One big aspect of working for Google is the idea of inclusion and internationalisation. A visitor of this website could be an individual from India or Brazil, they could be one with sight or disability. We needed to make sure that none of the visitors feel left out when navigating the site. This meant that we developed the website keeping in mind all the littlest things imaginable. Our accessibility rating was off the charts! An automated tool called Lighthouse ranked almost all of our pages with a score of 98 out of 100. That was huge! This meant that our visitors can navigate the site freely without having to feel left out.

To make the website as close to the designer's dream as possible, we were constantly in touch with the design team and they pushed us to iterate and improve on our approach to make the website better.

## Results

If you have not already visited the website by now, I have attached a short video of the About page to show how amazingly well-designed and developed this website really is. I am hooting my own horn because I am extremely proud to have contributed to the development of this magnificent beauty.

<iframe width="560" height="315" src="https://www.youtube.com/embed/bwA2WQ2-6jo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Closing remarks

If you want to know on which specific parts did I work, here's a list:
- Story pages (Includes more than 40 stories with more to come in future)
- Accelerator pages (Includes more than 15 accelerators as of now)
- About page
- The parallax effect
- Carousels across the website


Building a platform for startups and founders across the globe

Google for Startups

### Problem

The gigantic export industry is responsible for almost all of the things that are transported across the world, but it still lacks a solid, secure and reliable documentation system to help them track their products, invoices, billings, etc efficiently. While some options do exist, they either cut corners in quality or features. These options do have one thing in common: Lack of security.

### Approach

Our goal was to create a system that not only gives the end user a fluid and easy-to-use system to track their accounts, it should also not compromise user data in any shape or form. While the idea sounds pretty straightforward, there goes a lot of hard work to make the system as reliable as we were aiming for.

Every possible endpoint towards user data needs to be sealed with a tight layer of security and validations. In case of failure, the user should be able to recover their data without losing a single bit of it. Not only that but the confidential information like bank details of our customers and their clients should also be encrypted in case the database is compromised.

As you can see, the system could easily grow to a very complex network of endpoints and checks. To make the process for the developers even simpler, I documented every update that I made to the API to make it easier for the front-end developers to know what to use in the front-end development.

### Results

While explaining the granular details is not in the scope of this document, I would like you to take a look at some part of the system yourself...

#### The design is simple and elegant, inviting the user to the platform to work

Our focus was not just a robust system, but also something that inspires us to be more productive. A welcome screen like this surely does the job.

!["Export Documentation Software login screen"](https://pancham-khaitan.s3.ap-south-1.amazonaws.com/portfolio/images/cd5a997d-446f-45ae-bab2-c0f72a3db5ee.png "Export Documentation Software login screen")

#### List of all business partners with search feature for faster results

Adding a new business partner and finding them is as easy and fast as thinking.

!["Export Documentation Software business partner list"](https://pancham-khaitan.s3.ap-south-1.amazonaws.com/portfolio/images/e349746c-5e31-4709-829b-7ae9c4392d6f.png "Export Documentation Software business partner list")

#### Important invoices such as Pro Forma, Pre-Shipment, Packing Lists are all segregated and deep-linked

All invoices are deep-linked, meaning that analysing which invoices are delivered and which are pending is already taken care of.

!["Export Documentation Software pro forma invoice list"](https://pancham-khaitan.s3.ap-south-1.amazonaws.com/portfolio/images/938ec000-e8f8-4a94-a2ec-ac73d8438d04.png "Export Documentation Software pro forma invoice list")

#### Security is not an afterthought. It is how we built the system

The confidential data is so securely placed that even we can't understand what it says.

!["Simulation of bank details"](https://pancham-khaitan.s3.ap-south-1.amazonaws.com/portfolio/images/6778d347-4a5e-4931-b511-9309525fdd06.png "Simulation of bank details")

#### Easing the pain of front-end development

Since this system is so complex and mature, it becomes hard to give the front-end development team guidelines on how to use the API. So, I created a website dedicated to just documenting the API and thus expediting the front-end process.

!["API documentation screenshot"](https://pancham-khaitan.s3.ap-south-1.amazonaws.com/portfolio/images/1d4c0964-d038-441e-9aa2-6369a81cb01e.png "API documentation")

If you are curious to see the system for yourself, please [click here](https://export-docs.netlify.app). If you want to check out the documentation, you can [send me an email](mailto:hello@panchamkhaitan.com) requesting access to you. While I cannot guarantee it, I will try to give you access to it.

Creating the backend for a complex documentation system from scratch

Export Documentation Software

Beauties of Eden is an initiative to empower women that are brokenhearted, less fortunate, affluent, successful, and career-driven back to the Eden, “The Presence of God,” by organising workshops, conferences, retreats, mentoring and coaching to achieve this mission.

### Challenge

Creating an online presence for this lovely institute to help them reach to a wider audience. The message was clear: Make the website easy to navigate for people who were not too fond of reading. This meant that the content was image-driven. The text was concise and the images did most of the talking.

### Results

Built in the span of just a month, while a simple website at first glance, BoE packs quite a bit of backend where the visitor could share their story of how they found their way by being a part of this organisation. They could also send a query to the church if they ever wanted to host an event or collaborate in general. It also needed to have a way for the followers of the church to donate to the cause and help the institute function smoothly.

The website also contains a blog section where the admins of the institute could write their post directly from the website by entering their credentials, and the post will be made live instantaneously. Here's a quick walkthrough of the website...

<iframe width="560" height="315" src="https://www.youtube.com/embed/5jsR7TyECRI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

### How we built this thing

Since the website was supposed to be snappy and quick, we resorted to using [React](https://reactjs.org) and [Bootstrap](https://getbootstrap.com) as the killer combo for the UI. The routes were to be loaded quickly, so we used the highly recommended [React Router](https://reactrouter.com), and we used [Redux](https://react-redux.js.org) for state management.

The blog editing UI was built using [React Quill](https://www.npmjs.com/package/react-quill) and the blog data was stored in [Firebase](https://firebase.google.com). The admin login was created using [OAuth2](https://oauth.net/2/).

Here's a [link to the website](https://www.beautiesofeden.org) we built. Take a look and let me know what you think about it.


Creating a platform for an institute that encourages women to support each other

Beauties of Eden

*Note: Since a lot of what I do is bound by a non-disclosure agreement, I am barred from sharing confidential information*

### Background

[Brand Studio](https://www.thinkwithgoogle.com/future-of-marketing/management-and-culture/google-marketing-brand-studio/) is Google’s internal think tank that uses creativity, media, and technology to create experiences that connect Google products to the people who use them. My work, as a vendor, is to maintain and provide support, and introduce new features for the internal JavaScript library that provides the foundation to build websites for Google at scale.

### Work

While working on a JavaScript library that is being used by hundreds of developers to create thousands of Google-branded websites is super fun in and of itself, keeping it relevant for the masses is a tough nut to crack.

My tasks involve, but not are limited to,
- Updating the code to match requirements
    - Creating new components
    - Optimising and splitting code in a modular structure to be reused by other components
    - Building and testing code
    - Maintaining and fixing bugs in the existing code and follow a release cycle
- Writing documentation for the developers who use the library
- Interacting with the design team to enhance the experience, both in terms of developer experience and the end-user experience
- Creating an inclusive environment for the differently-abled people by focusing extensively on making the code accessible for all

Other than this, I get the opportunity to interact with developers who use the library to develop websites for Google and help them resolve their issues in order to make a wonderful product.

Technologies used:
- TypeScript, SCSS, HTML5, EJS, Markdown
- Jasmine, Karma
- Google Cloud Platform

### Results

The following websites are just some of the thousand more websites that utilise the power of the library that i am fortunate to be a part of. 

#### About Google

[!["About Google homepage screenshot"](https://pancham-khaitan.s3.ap-south-1.amazonaws.com/portfolio/images/cd492c5f-6ed6-4221-b36a-2dbd85f52608.png "About Google homepage")](https://about.google)

#### Google SRE

[!["Google SRE homepage screenshot"](https://pancham-khaitan.s3.ap-south-1.amazonaws.com/portfolio/images/1271cc0f-3d81-4353-89cb-327c3cc88353.jpg "Google SRE homepage")](https://sre.google)

#### Google COVID Response

[!["Google COVID-19 homepage screenshot"](https://pancham-khaitan.s3.ap-south-1.amazonaws.com/portfolio/images/3d71d22d-7730-4186-bbd4-388d51f2c160.jpg "Google COVID-19 homepage")](https://google.com/covid19)

#### Google Ads (Hotels)

[!["Google Hotel Ads homepage screenshot"](https://pancham-khaitan.s3.ap-south-1.amazonaws.com/portfolio/images/69a1a587-3258-449d-b6a9-9f4cfd8c57b4.jpg "Google Hotel Ads homepage")](https://ads.google.com/hotels)


Contributing to building the foundation for Google's marketing websites

Google at Cybage

Indian Institute of Technology Bombay is one of the most respected institutions in the world, and I feel extremely grateful to have gotten an opportunity to work at a place of which only a few dream of ever seeing the entrance gate.

### Background

Statistical Machine Learning is a framework of machine learning that draws data from statistics and functional learning. Unlike machine learning where the primary goal is to make accurate predictions, the goal of statistical machine learning is drawing inferences about the relationship between variables. This technique is therefore a preferred mode of training computer models for language processing and speech recognition where the majority of the data is connected to other parts of data.

### Work

The project that I was a part of was involved in translating a corpus written in English language into Hindi. We split the entire corpus into chunks of sensible information and translated individual chunks into Hindi while maintaining the tone of the passage. An example could be given as, "Mr Kennedy was the President of America. He was 6 feet tall." The statement given before would be translated as, "केनेडी जी अमरीका के राष्ट्रपति थे। वे ६ फ़ीट लम्बे थे।"

!["A simulation of the system"](https://pancham-khaitan.s3.ap-south-1.amazonaws.com/portfolio/images/4a0d8087-1482-4f92-ad87-708c29884597.png "A simulation of the system")

In the simulation example shown above, the system automatically understands that the reference to Mr Kennedy is repeated and the noun can be replaced with a pronoun. While this task laid the foundation of how the system should function, it lacked a few things to make it usable:
- The chunks were not properly cut into sensible pieces
- The translation was a bit wonky at times
- The UI was not that user-friendly

This is where my role came in. I was involved in optimising the entire system by properly separating the corpus into sensible chunks and improving the UI. A majority of my time was spent trying to understand the flow of code and tweaking the logic to improve the chunking methods.

### Closing remarks

While working at IIT Bombay, I realised that the biggest systems in the world are built by sheer hard work and consistency, and the whole experience taught me a valuable lesson in handling pressure. I am forever grateful for that.

In case you are interested in learning more about the system, [here](https://www.cse.iitb.ac.in/~vishwajeet/kcap.html) is the explanation of how the system functions.


Contributing to building a vernacular language translation system at the prestigious IIT Bombay

IIT Bombay

Laksh Solar, a company specialising in the sales of solar panels and inverters to the masses and businesses wanted a little oomph in their appeal. They had an online presence, but it mostly backed by posting on Facebook.

### Challenge

Helping a company already known for delivering value to its customers and partners by building an online presence that is worthy of its name. Their website needed to appeal to a wider audience without being too clunky. The design had to be simple and elegant at the same time. A visitor should be able to tell what their company sold and what it stood for.

Not only websites, they also needed an online presence on social media. They wanted to make an ad video showcasing their brilliance in the span of a minute. The ad needed to feature the vast bandwidth of their network and still sounding like they had a long way to go, and, a cool fact about it is that this video was to be featured on a giant electronic billboard besides their company office.

### Approach

My team of 4 (including me) worked on various aspects of their branding and marketing. I was the one involved in the UI design and front-end development portion of it. I decided that the website should spark an interest in the mind of the visitor about buying solar panels for their homes. Instead of relying on boring statistical data and complicated UI, I chose to make it easy. I bifurcated the website into two portions: products and services. Since the company was good at both of these, each one of them got the attention that they deserved.

It had to be completely responsive. A visitor should feel no difference operating the website on a phone or on a computer. It should be fast and snappy.

### Results

Website: After having tried different variations of the design, tweaks, usual brain-wracking, Mr Patel and I came to a final decision of how the website should look like. Check out the video below to see how it looked.

<iframe width="560" height="315" src="https://www.youtube.com/embed/v7dMTNHJ_PM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Ad: Editing a video is like finding a needle in a haystack. After sorting through hours of footage, I edited this short clip in the span of 4 days that, I think, showcases their brand flawlessly. Take a look...

<iframe width="560" height="315" src="https://www.youtube.com/embed/KPDgxe9mtO8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

### This is how we built the website

Since I was a second year student, I was not very much aware about the latest and the greatest tools that were available in the market, so I used a pen and paper to design the UI and [Bootstrap](https://getbootstrap.com) to power up the UI with code and help me make it responsive. The smooth scrolling that you saw in the video was done using JavaScript, and the form for contacting Laksh's team was calling a [NodeJS](https://nodejs.org/en/).

Fun fact: This was my first-ever project as a UI designer and a web developer. What do you think about the website? [Let me know](/contact).

---

The website has since been updated. You can check it out [here](https://lakshsolar.in).  
**Please note** that I was not involved in the redesign of the website.

Overhauling a large corporation's identity as my first project