Недавно я закончил несколько курсов кодирования в Udacity (Веб-разработчик полного стека, Разработчик React и Специалист по мобильной сети в рамках программы стипендий Google), бросил свою работу и решил сосредоточиться на кодировании полный рабочий день. Уволившись с работы, я почувствовал некоторое давление, требующее как можно скорее устроиться на работу, чтобы снова иметь некоторый доход, поэтому я начал поиск работы.

Но я знал, что не хочу идти ни на какую работу, я работал веб-дизайнером около 10 лет назад, зарплата была хорошей, но, оглядываясь назад, я не чувствовал никакой полноценной связи с моими коллегами или всем остальным. мы делали. Особой поддержки для саморазвития не было, и мне казалось, что это просто остановка, чтобы зарабатывать на жизнь прилично, пока я не найду что-то получше. (После этого у меня закончилось небольшое недовольство офисной работой, и я проработал инструктором по сноуборду 4 года). Так что, будучи снова взволнованным программированием после стольких лет, я определенно не хотел, чтобы это было потрачено зря!

Мне удалось получить несколько интервью с компаниями, в которых, я думал, было бы интересно работать, но, к сожалению, у большинства был аналогичный ответ: «Нам нравится то, что вы делаете, так держать! Но, к сожалению, на данный момент нам нужен кто-то с большим опытом в реальной жизни. Свяжитесь с нами примерно через 4–6 месяцев, и мы посмотрим, найдется ли у нас для вас вакансия »

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

Это первая статья из серии, в которой я напишу о процессе создания моего первого веб-приложения: fear-setting.today (Ранняя работа в процессе!). Я надеюсь, что это поможет вдохновить других на реализацию собственных проектов. (и это помогает мне вспомнить процесс)

Я начал с того, что обрисовал идею того, что должно делать приложение. Мне это уже было совершенно ясно, так как я был вдохновлен выступлением Теда Ферриса на TED« Почему вы должны определять свои страхи, а не цели » и хотел превратить это мысленное упражнение в приложение. Важной особенностью будет то, что пользователи могут сохранять свои предыдущие сеансы, чтобы иметь возможность размышлять о них в будущем. Для меня было важно, чтобы это было чем-то, что я хотел бы использовать сам, чтобы оставаться мотивированным, чтобы превратить его в законченный проект.

Моделирование приложения

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

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

  • Это займет целую вечность, чтобы закончить это
  • Я застряну на техническом препятствии

Поэтому, чтобы этого не произошло, я решил, что мне нужно:

  • Сосредоточьтесь на создании MVP (минимально жизнеспособный продукт), чтобы иметь возможность увидеть отклик на него, прежде чем решите потратить на него больше времени.
  • По возможности передайте технические детали сторонним службам, чтобы иметь возможность сосредоточиться на создании презентабельного продукта, а не на его технической настройке.

Выбор инструментов

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

  • Front-end: React + Redux - простой выбор, у меня был опыт работы с ними обоими из курса Udacity, который я прошел, и я хотел расширить свои знания о них. Это также дает мне возможность повторно использовать большую часть кода, когда я хочу превратить его в мобильное приложение с помощью React-Native.
  • Клиентское хранилище: redux-persist - требуется много пользовательского ввода, и я ненавижу, когда вы теряете входные данные при сбое вашего браузера, поэтому я хочу использовать этот пакет для хранения данных, сохраненных в клиентском браузере.
  • Локализация: react-localize-redux - я хотел упростить перевод приложения в ближайшем будущем, поэтому я использовал этот пакет для разделения всего текстового контента и имел простую встроенную функцию для переключения языков. (Я наполовину голландец, наполовину японец, так что планирую перевести на оба эти языка, когда закончу с основными функциями)
  • CSS-Framework: Semantic-UI React. Использование CSS-фреймворка было несложным делом, потому что я могу сэкономить время, имея набор стилей по умолчанию, на которых можно строить. Semantic-UI имеет специальную библиотеку React, с которой у меня был хороший опыт, когда я использовал ее для одного из моих курсовых заданий Udacity.
  • Хостинг: Netlify - это потрясающая экономия времени: всякий раз, когда я отправляю изменения в репозиторий github, эта служба автоматически применяет их к действующему сайту (это называется непрерывным развертыванием).
  • Back-end: GraphCool - мне нужен был какой-то back-end для хранения данных и отправки пользователям уведомлений по электронной почте. Я выбрал эту услугу, чтобы не тратить время на настройку и обслуживание инфраструктуры, и они использовали GraphQL и бессерверную архитектуру, которая, кажется, новая горячая вещь, поэтому я подумал, что было бы здорово получить некоторый опыт в обоих. (Я изучил некоторые основы Graphql с помощью этого бесплатного курса)
  • Аутентификация пользователя: Auth0 - с помощью бесплатной опции я мог подключить 2 социальных сервиса OAuth (например, Google / Facebook) и до 7000 пользователей.
  • Платежная система: Stripe или Mollie - я отложил свое окончательное решение до реализации, у них обоих, похоже, были хорошие планы.

С этим стеком первоначальной стоимостью был только реестр доменов fear-setting.today, который я зарегистрировал в Google Domains за 19 евро.

Разработка приложения

Имея представление об основной концепции и инструментах, я был взволнован, чтобы наконец начать кодить! … Что было очень плохой идеей, после 1 дня беготни между созданием материала и решением, что он должен выглядеть / работать по-другому, я знал, что должен решить две вещи перед сборкой:

  • Черновой дизайн (которого я придерживался, пока у меня не было готово все необходимое, и подумал о том, чтобы сделать его позже)
  • Требования MVP (чтобы я мог продолжать работать над этим списком и не теряться в деталях, которые могут измениться со временем)

Сделал черновой дизайн страниц с помощью draw.io

Я решил использовать Trello, чтобы отслеживать требования MVP и над которыми я буду работать:

Начать кодирование!

Наконец-то пришло время писать код! Я построил основу внешнего интерфейса с помощью React и Redux примерно за 10 дней (около 4 часов в день) программирования. Я не буду вдаваться в подробности кода, но если вам интересно, вы можете просмотреть исходный код в репозитории github. Я опубликовал превью на сайте fear-setting.today. (Пока выглядит не очень красиво, в конце я хотел сделать укладку)

На этом все, я хотел бы услышать отзывы!