[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