Как подготовиться к собеседованию в YCombinator

Anima была частью когорты YC18 и в рамках подготовки разработала приложение с вопросами для предстоящих собеседований. Приложение создало тренировочную среду, имитирующую 10-минутное интервью YCombinator, в которой мы готовились к реальному процессу собеседования.

Попробуйте живую демонстрацию

Учитывая формат вопросов и ответов, приложение также оказалось полезным ресурсом для встреч с инвесторами. А после того, как поступило несколько запросов от компаний, желающих использовать функциональность приложения, мы переработали его так, чтобы его можно было распространять как приложение с открытым исходным кодом.

Если вам интересен путь Амины в YCombinator, ознакомьтесь с нашей статьей «Как пройти собеседование в YC».

Как было создано приложение для подготовки

Генеральный директор Anima, Авишай Коэн, показывает пошаговый процесс создания приложения, который включал в себя преобразование дизайна Figma в живое приложение React перед его развертыванием на Netlify.

Редизайн был выполнен в Figma, что означало, что большая часть кода могла быть написана автоматически. Плагин Anima для Figma преобразовал дизайн в код, а именно Figma в React.

Но для поддержки этого была проделана дополнительная работа, о которой вы можете более подробно прочитать на странице Anima на GitHub.

Как создать собственный инструмент подготовки к YCombinator с помощью Anima + Figma + React + Netlify

Начните с файла дизайна.

Пример файла Figma доступен для дублирования здесь.

Шаг 1: Синхронизация с Anima

  • Зарегистрируйтесь на сайте AnimaApp.com
  • Установите плагин для Figma, Adobe XD или Sketch
  • Нажмите кнопку Preview, затем Sync

Шаг 2: Экспортируйте код React

В Anima экспортируйте код для всего проекта.

Шаг 3: Запуск локально

  • Откройте терминал в папке с кодом Anima и запустите:
npm install
npm start

Войти в полноэкранный режим Выйти из полноэкранного режима
  • Откройте http://localhost:1234/.

  • Добавление логики

В этом простом приложении большая часть логики заключается в загрузке вопросов и их случайном выполнении.

Добавление ссылок

  • Код Animas поставляется с react router из коробки.
  • Хук History — это классический способ добавления ссылок на onClick.

Загрузка вопросов

  • Хук State используется для хранения массива вопросов и текущего вопроса.
  • Метод Fetch позволяет нам получать вопросы с помощью getData(),
    • Я добавил файл questions.json в папку static files.
  • Хук Effect используется для запуска функции
  • Я добавил простую функцию next() для случайного выбора вопроса из массива.
  • В функции render я добавил значение текущего вопроса.

Весь окончательный код доступен на GitHub

Шаг 5: Публикация в Netlify

Netlify — это отличное облако для размещения приложений React.

Если у вас нет netlify, установите его с помощью npm, выполнив следующую команду:

npm install netlify-cli -g

Войдите в полноэкранный режим Выйти из полноэкранного режима

Если у вас есть netlify, используйте следующие команды:

npm run build
netlify deploy

Войти в полноэкранный режим Выйти из полноэкранного режима

Выберите папку dist, когда вас спросят, и вы получите ссылку на Netlify на ваше приложение React.

Используйте netlify deploy prod, когда у вас будет окончательный результат, и получите ссылку для совместного использования.

Предварительный просмотр живого приложения:

Дополнительные ресурсы:

  • Файл Figma
  • Код на GitHub
  • Живое приложение на Netlify
  • Создайте учетную запись Anima
  • Загрузите плагин Anima для Figma
  • Как преобразовать Figma в React Запись в блоге
  • Как пройти собеседование в YC

Оцените статью
devanswers.ru
Добавить комментарий