Как студент, изучающий информатику, я всегда ищу еще один крутой побочный проект, чтобы занять себя. Эти идеи для сторонних проектов могут прийти откуда угодно; иногда из мест, которых вы меньше всего ожидаете.
На днях пролистывал TikTok и наткнулся на это видео. По сути, это о том, что в этом мире есть люди, родившиеся в один день и находящиеся в той же больнице, что и вы. Аккуратно, правда? Затем я просмотрел комментарии, и несколько пользователей говорили, что для этого должен быть веб-сайт. Я сразу понял, что мне нужно делать. В этом посте я расскажу о том, как мне удалось создать и развернуть этот сайт всего за несколько часов совершенно бесплатно, используя различные популярные технологии кодирования.
Идея
Прежде чем говорить о технологии, я хочу быстро обсудить, что я пытаюсь построить. По сути, это веб-сайт, на котором пользователи могут создать учетную запись и ввести свою информацию, такую как свое имя, день рождения, название больницы и имя пользователя Snapchat (для способа связи). После того, как они это сделают, они смогут увидеть таблицу всех остальных пользователей, которые ввели свою информацию. Тогда они смогут (надеюсь) найти других с таким же днем рождения и в больнице!
Со временем я планирую добавить новые функции (потому что сейчас это, по сути, клон электронной таблицы Excel), но на данный момент это идея.
Технология
Теперь самое интересное. Давайте посмотрим на технологию, которую я использовал для создания этого.
Next.js
Я сразу понял, что собираюсь встроить это в Next.js. Я только что закончил загружать серию руководств на YouTube об этом и создал свой личный веб-сайт, используя его, поэтому был уверен, что смогу быстро и легко запустить этот сайт с помощью Next.js.
Next.js обеспечивает лучший опыт разработчика со всеми функциями, необходимыми для производства: гибридный статический и серверный рендеринг, поддержка TypeScript, интеллектуальное связывание, предварительная выборка маршрута и многое другое. Конфигурация не требуется.
Firebase
Следующей моей задачей было решить, как и где хранить данные. Для этого я обратился к Google Firebase. Я раньше работал с Firebase в различных формах, в том числе с Flutter и Vanilla JavaScript, но еще не работал с Next.js. Нет проблем, потому что Next.js имеет отличную документацию и примеры проектов. Я смог клонировать репозиторий авторизации firebase и продолжить свой путь. Судя по названию репо, Firebase помогла и другим способом; предоставление средств аутентификации.
Firebase помогает командам мобильных и веб-приложений добиться успеха
Bootstrap + реакция-бутстрап-таблица-следующий + HTML / CSS
Чтобы быстро создать UI для этого сайта, я обратился к Bootstrap, конкретно реагирующему на бутстрап. Используя его, я смог быстро закодировать панель навигации и модальные окна. Затем я использовал пакет npm response-bootstrap-table-next, чтобы построить таблицу для данных. Это позволило динамически генерировать данные и легко добавлять панель поиска (см. Код ниже). Обе эти технологии составляли 99% моего пользовательского интерфейса.
Я также использовал HTML и CSS для некоторой базовой разметки, потому что, давайте посмотрим правде в глаза, без них невозможно создать веб-сайт.
Гугл Аналитика
Последним шагом было добавление Google Analytics, как вы уже догадались, для отслеживания моей аналитики. Добавить Google Analytics в Next.js сложнее, чем вы думаете. К счастью для меня, я добавил его на свой личный веб-сайт пару месяцев назад, поэтому я смог скопировать и вставить этот код. Я бы порекомендовал проверить свое репозиторий личного сайта, чтобы увидеть, как это делается, и скопировать код, если вы планируете интегрировать Google Analytics с вашим проектом Next.js.
Google Analytics - это служба веб-аналитики, предлагаемая Google, которая отслеживает и сообщает о посещаемости веб-сайтов, в настоящее время как платформа внутри бренда Google Marketing Platform.
GitHub + Vercel + Namecheap
После того, как сайт был построен, все, что мне нужно было сделать, это развернуть. Для этого обратился к 3 технологиям. Сначала я поместил весь свой код в репозиторий GitHub. Затем я подключил репо к Vercel, где бесплатно развернул приложение. Vercel великолепен, потому что он позволяет вам просто отправлять изменения в GitHub, и ваш веб-сайт будет автоматически перестроен и развернут за считанные минуты. Наконец, я использовал Namecheap, чтобы купить и подключить собственный домен для приложения (единственная дополнительная плата для этого проекта). Пользовательское доменное имя придает ему более профессиональный вид и делает его легко доступным для ваших пользователей. Вы можете получить доступ к сайту по адресу: https://findyourbabybuddies.com/. Не забудьте зарегистрироваться и обновить свой профиль, пока вы там!
Заключение
Вот все технологии, которые я использовал, вкратце:
- Next.js
- Firebase
- Бутстрап
- Гугл Аналитика
- Namecheap
- GitHub
- Vercel
Запустите, прежде чем вы будете готовы
Я многому научился из этого проекта, но самый важный урок, который я усвоил, был запущен до того, как (вы думаете) вы будете готовы. Это может быть рискованный совет, но позвольте мне объяснить. Вот цитата Рида Хоффмана, по которой я вырос. Он говорит: «Если вас не смущает первая версия продукта, значит, вы запустили слишком поздно». Когда я впервые запустил этот сайт, у меня все еще оставались функции, которые я хотел добавить, и некоторые мелкие ошибки, которые нужно было исправить. Однако, если бы я продолжал добавлять каждую новую функцию, о которой думал, я бы никогда не запустил! Сайт работал и был готов, так что я запустил его в жизнь. Знал ли я, что сайт может быть лучше? Конечно. Но, запустив сайт, я смог получить некоторые отзывы и внести изменения / добавить новые функции на основе этих отзывов. Фактически, я совершил 5 коммитов на GitHub за первые 3 часа после запуска и до сих пор делаю несколько коммитов в день!
Если вас не смущает первая версия продукта, значит, вы запустили слишком поздно. - Рид Хоффман
Это все для этой статьи. Надеюсь, вам понравилось, и обязательно ознакомьтесь с некоторыми из моих других статей и подпишитесь на меня на YouTube, чтобы узнать обо всем, что связано с информатикой!
