[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

*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