How to prep for your YCombinator interview
Tags: productivity, wevdev, devops, react
Published: 2022-08-31 08:50:21

---
title: How to prep for your YCombinator interview
published: true
date: 2022-08-29 07:23:56 UTC
tags: productivity, wevdev, devops, react
canonical_url: https://animaapp.hashnode.dev/how-to-prep-for-your-ycombinator-interview
---
![How to prep for your YCombinator interview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odq0o2ces1pwqka09dae.png)

Anima was a part the YC18 cohort and in preparation, developed a prep-questions app for the upcoming interviews. The app provided a training environment, simulating the 10 minute YCombinator interview format, as we geared up for the actual interview process.

Try the [live demo](http://yc-prep.netlify.app/)

Given the Q&A format, the app turned out to also be a useful resource investor meetings. And after a number of requests from companies wanting to use the app's functionality, we redeveloped it so it could be shared as an open source app.

> If you're interested in Amina's YCombinator journey, check out our [_How to nail your YC interview_](https://blog.animaapp.com/how-to-nail-your-yc-interview-e3a4d12871f3) post.

## How prep app was built

Anima CEO, Avishay Cohen, shows the step-by-step process for creating the app, which involved converting the Figma design into a live React app before deploying it on Netlify.

[https://www.youtube.com/watch?v=b45EvpxAF1I](https://www.youtube.com/watch?v=b45EvpxAF1I)

The redesign was done in Figma which meant that most of the code could be written automatically. The [Anima plugin for Figma](https://www.figma.com/community/plugin/857346721138427857) converted the design into code, specifically Figma to React.

But there was still some additional work done to support this, which you can read about in more detail on [Anima's GitHub page](https://github.com/AnimaApp/yc-prep).

## How to build your own YCombinator prep tool using Anima + Figma + React + Netlify

Start with your design file.

This Figma sample file is available to [duplicate here](https://www.figma.com/community/file/1109158837896457550).

### Step 1: Sync to Anima

- **Sign up** at [AnimaApp.com](https://www.animaapp.com/?utm_source=anima-blog&utm_campaign=yc-prep&utm_medium=anima-blog)
- **Install the plugin** for [Figma](https://www.figma.com/community/plugin/857346721138427857/Anima---Export-to-HTML%2C-React-%26-Vue-code), [Adobe XD](https://animaapp.s3.amazonaws.com/xd-plugin/beta/anima.xdx) or [Sketch](http://animaapp.com/plugins/anima/download)
- Click **Preview** , then **Sync**

![1_ycombinator-anima-app-tool.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660729193615/Hzxk51oaW.png)

### Step 2: Export React code

In Anima, **Export code** for the whole project

![2_ycombinator-anima-app-tool.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660729217684/MKS7HsVXX.png)

### Step 3: Running locally

- Open **terminal** on the Anima code folder, and run:

```
npm install
npm start

```

- Open `http://localhost:1234/`

- **Adding logic**

On this simple app, most of the logic is loading questions, and running them randomly.

**Adding links**

- Animas code comes with [react router](https://www.npmjs.com/package/react-router) out of the box.
- The [History hook](https://v5.reactrouter.com/web/api/Hooks) is the classic way to add links on onClick

**Loading the questions**

- The [State hook](https://reactjs.org/docs/hooks-state.html) is used to store the questions array and the current question.
- The [Fetch](https://reactjs.org/docs/faq-ajax.html) method allows us to pull the questions on getData(),
  - Ive added the questions.json file to the static files folder.
- The [Effect hook](https://reactjs.org/docs/hooks-effect.html) is used to trigger the 
- Ive added a simple function called next() to randomize a question from the array
- In the render function, Ive added the value of the current question

[All the final code is available on GitHub](https://github.com/AnimaApp/yc-prep)

![3_ycombinator-anima-app-tool.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660729262598/HlKxBwJKX.png)

### Step 5: Publishing to Netlify

[Netlify](https://www.netlify.com/) is a great cloud to host React apps.

**If you**  **dont have netlify** , install it with npm using the following command:

```
npm install netlify-cli -g

```

**If you**  **do**  **have netlify** use these commands:

```
npm run build
netlify deploy

```

Choose the dist folder when asked, and youll get a link on Netlify to your React app.

Use `netlify deploy prod` when you have the final result, and get a sharable link.

A preview of the live app: ![4_ycombinator-anima-app-tool.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1660729300100/QyVzjYeCV.gif)

**Additional resources:**

- [The Figma file](https://bit.ly/3MJEcVx) 
- [The code on GitHub](https://bit.ly/3yPhh7a)
- [The live app on Netlify](https://bit.ly/3NuYEJP)
- [Create an Anima account](https://bit.ly/3PyA5xz)
- Download the [Anima plugin for Figma](https://bit.ly/3Gg3Eje) 
- [How to convert Figma to React](https://bit.ly/3PBZ6b4) blog post 
- [How to nail your YC interview](https://blog.animaapp.com/how-to-nail-your-yc-interview-e3a4d12871f3) post