В этой статье подробно рассказывается о моем пути от инженера полного цикла до основателя стартапа за 10 месяцев. В этой статье я объясню, почему я выбрал каждую часть моего стека, и как это закончилось.

Так что пристегнитесь, это будет длинная, но интересная статья!

Итак, о чем мой Стартап?

Что ж, потребовалась пара недель, чтобы подготовить чистую подачу, так что я возглавлю ее.

SkillShack(⚡); — это сообщество профессионалов в области программного обеспечения, желающих поделиться проектами, над которыми они работают, и получить отзывы. От побочных проектов до стартапов!

С помощью skillShack(⚡); я хотел создать платформу, на которой разработчики могли бы делиться проектами, над которыми они работают, а для тех, кто застрял в аду туториалов, предоставить кураторский список задач, которые могут быть встроены в проекты, чтобы применить свои навыки. использовать.

С самого начала я был твердо убежден, что вы можете стать лучше в разработке программного обеспечения только путем фактической РАЗРАБОТКИ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ (очевидно, верно?), и все же большинство людей проводят бесконечные спринты, просматривая учебник за учебником, чтобы добавить новые модные слова в свои резюме. Большинство онлайн-платформ, ориентированных на кодирование, обслуживают аспекты программирования, связанные с решением проблем, которые, хотя и дают вам хорошее понимание основ языка и задействуют ваш интеллект, через некоторое время дают убывающую отдачу.

Поэтому я решил создать эту платформу в надежде предоставить разработчикам безопасное пространство для обмена своими проектами, получения отзывов от сообщества и обучения друг у друга.

Выбор стека

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

  • Простота масштабирования и развертывания
  • Хорошая ORM с мощным API и поддержкой форматированного вывода в необработанных запросах.
  • Реагируйте на внешний интерфейс (к тому времени, когда вы это читаете, уже 2021 или 2022 год)
  • Отличная SEO-поддержка
  • Поддержка PWA
  • Инструменты администратора, которые обслуживались отдельно от основного сайта
  • Социальная аутентификация
  • Интеграция с GitHub, чтобы пользователи могли связывать свои репозитории.

Для каждого требования я составил список возможных технологий/фреймворков.

Стек

  • Фронтенд: Next.js
  • Бэкенд: Express.js
  • База данных: PostgreSQL с Sequelize ORM
  • Инструменты администратора: реагировать-админ
  • DevOps: действия GitHub, интерфейс командной строки Vercel и Docker
  • Хостинг:
  • AWS EC2 (серверная часть)
  • Vercel (оба интерфейса)

Почему Next.js?

Как указывалось ранее, SEO имело решающее значение для меня, и с приложением create-react-app вы подписываетесь на рендеринг на стороне клиента, который не будет хорошо работать с веб-сканерами поисковых систем (они не выполняют JS).

Next.js поддерживает SSR (рендеринг на стороне сервера), SSG (генерация статического сайта) и ISR (инкрементная статическая регенерация). Я резюмирую каждый в простых терминах ниже:

  • SSR: по существу обслуживает документы со всеми компонентами, отображаемыми и заполняемыми необходимыми данными (из API). Таким образом, бот может видеть всю информацию без необходимости выполнения JavaScript. Это упрощает обслуживание страниц без обновлений в реальном времени, таких как блоги, данные профиля и т. д., и обеспечивает хорошее SEO.
  • SSG: Он обслуживает исключительно статические страницы (без данных API) и в то же время предлагает хорошее SEO. Полезно для таких вещей, как документация.
  • ISR: похоже на SSR, но периодически обновляет статические страницы новыми данными API. Полезно для таких вещей, как блоги и профили, где обновления могут быть нечастыми, но случаются и должны быть отражены.

Бонус: у Next.js и Vercel идеальная экосистема.

Аутентификация: следующая аутентификация

Он отлично сочетается с Next.js, он используется как бессерверная функция через Next.js, который полностью их поддерживает, и Vercel делает то же самое в производственной среде, поэтому никаких дополнительных конфигураций. Вы даже можете удаленно контролировать функцию и проверять наличие ошибок через Vercel. Он прекрасен во всех отношениях, стоит только заглянуть на их сайт, чтобы узнать больше.

Документы были простыми, и я смог настроить аутентификацию Google и GitHub менее чем за час (пришлось ждать, пока Google синхронизирует URL-адреса обратного вызова).

Библиотека компонентов: материал-интерфейс

Я начал проект до того, как хайп-поезд Tailwind достиг своего пика. И в конце концов я попробовал это в другом проекте, но это не мое. Я уже очень хорошо разбираюсь в чистом CSS, поэтому я выбрал material-ui, он поставляется с хорошим набором компонентов из коробки и еще несколькими из других пакетов, созданных сообществом, таких как казначейство, сборщики и т. д.

Инструменты администратора: реагировать-админ

Он поставляется с хорошим набором инструментов из коробки, он использует материальный интерфейс (что упрощает настройку и совместное использование компонентов). Кроме того, вы можете легко назначать роли и предоставлять ограниченный доступ к различным аспектам приложения.

Серверная часть: Express.js

Экспресс существует с незапамятных времен, и это в значительной степени подходит для большинства людей. Я добавил несколько пакетов, таких как express-sequelize-crud, чтобы мои инструменты администратора могли легко запрашивать его без необходимости в дополнительных конечных точках. Защитил все конечные точки с помощью JWT-аутентификации и настроил разрешения на основе ролей.

База данных: PostgreSQL

В этом проекте должно было быть много взаимосвязанных таблиц, поэтому No SQL не собирался его сокращать. Мне также нужна была поддержка документов JSON для хранения определенных вложенных данных (резюме). PostgreSQL также поддерживает полнотекстовый поиск (FTS) из коробки, что упрощает создание многофункционального варианта поиска.

Sequelize был хорош, он поддерживал TS_Vectors из коробки, что было необходимо мне для создания документов, поддерживаемых FTS. А поддержка форматированных необработанных запросов упростила написание объединений (довольно хлопотно делать это через собственный API ORM).

Развертывание

Итак, мой рабочий процесс развертывания выглядит следующим образом:

  • Объедините запрос на извлечение с основным, который запускает действия GitHub.
  • Создавайте предварительные развертывания для администратора и основного веб-сайта на Vercel.
  • Как только сборка Preview будет успешно построена, продвигайте ее в рабочую среду. (Я получаю уведомления о каждом шаге в Slack благодаря приятной интеграции со Slack).
  • Параллельно создается образ докера с содержимым внутреннего кода и передается в мой экземпляр EC2, где он запускается с помощью pm2. Затем сценарий выполняет необходимую миграцию базы данных с помощью sequenceize-cli.

Заключительные мысли

Это было отличное путешествие по созданию всего проекта в одиночку, я многому научился на этом пути, включая Canva и Figma. Потратил много времени на просмотр видеороликов YC Startup School, чтобы понять мою презентацию и содержание веб-сайта. Я также твитнул все свое путешествие в своем Твиттере (загляните и поздоровайтесь! Отвечать на медиуме было странно с незапамятных времен), и это было здорово, потому что я смог связаться со многими крутыми людьми.

Я рад завершить эту статью словами skillShack(⚡); на skillshack.dev!

Буду рад услышать ваше мнение в комментариях и увидеть вас на сайте!