Как я свой первый учебный Fullstack-проект писал⁠⁠

Я вас категорически приветствую. Сегодня я вам расскажу о том, как мне удалось написать наиуникальнейший домашний проект без пап, мам, кредитов, а также без различного рода курсов (юзал только официальные доки, Stackoverflow, Quora, Reddit и мёртвые форумы 2007 года) - Список Дел (он же ToDo List). Казалось бы, что может быть более банальным? С одной стороны, читатель, ты абсолютно прав, но с другой - не всё так однозначно. Но обо всём по порядку...


О себе
Мальчик, 34 годика. В 2010 году окончил ДВАГС по специальности менеджмент, после ВУЗа относительно непродолжительное время работал торговым представителем, чуть позже, в 2011 я решил попробовать себя в веб-разработке, и меня позвали на работу в маленькую, но очень гордую дальневосточную IT-контору, которая как раз и специализировалась на Web (jQuery, Backbone, ExtJS, C#, MSSQL). Для меня на тот момент доступна была лишь базовая вёрстка, ибо знаний и опыта в этой области в те времена у меня особо не было, однако за пару лет я кое-чего поднабрался, хоть в программировании и не преуспел, - отсутствие технического бэкграунда и жизненного опыта мне тогда недоставало, но писать "лапшу" на jQuery, приправленную небольшим количеством логики, мне-таки удавалось (с переменным успехом). Дальшейшее отсутствие, прежде всего, денежных перспектив, а также карьерного роста с учётом моей врождённой тупизны вкупе породили мысль покинуть несостоявшегося IT-гиганта (который, как мне позже стало известно, в скором времени распался) и привели меня на госслужбу - в министерство информационных технологий и связи Х. края в отдел развития систем электронного документооборота, где я работал следующие пару лет, устанавливая ЭЦП и помогая тётенькам исправить то, что "само" ломалось. В то же время со мной случилась секта, йога, ретриты, путешествия... Короче, я уволилися с госслужбы и переехал вместе с родителями на юг нашей необъятной. Потом опять были путешествия, автостоп по забугорью, попутно попадались мелкие проекты по вёрстке на удалёнке. Менялись города, страны, а мозгов так и не прибавилось. Затем по до сих пор мне самому непонятной причине я захотел пойти в море матросом. Сказано - сделано. Учёба на морских курсах, практика и первая жуткая работа на местном флоте за 500 долларов, где вокруг вода, чайки и беспробудные алкаши - влажные мечты весьма значительно расходились с отягощающей реальностью. Чуть позже я переквалифицировался в буфетчики (помощник повара), о чём я уже писал на Пикабу, и пошёл в "большие моря" и на "большие пароходы", денег стало тоже чуть больше. Кстати говоря, работа в море мне нравится до сих пор, но в ней есть одно "НО": если ты стал моряком, то другой жизни у тебя больше не будет, как ни старайся, ну, кроме разве что, если ты капитан (да и то, не всё там так радужно), но это не мой случай, и, как выяснилось, это мне не совсем подходит. Последний контракт я пробыл в море 8 месяцев, совершил, практически кругосветное путешествие (Владивосток, Китай, Корея, Новая Зеландия, Австралия, Таити, Новая Каледония, Ямайка, Панама, США, Англия, Франция, Нидерланды), но выйти на берег мне так ни разу и не удалось из-за запрета портовых властей в связи с пандемией, т.е., я побывал везде и одновременно нигде - какая ирония... Зато я видел все оттенки воды. Ха-ха.
На сегодняшний день на берегу я нахожусь уже год, живу в Калиниграде с девушкой, занимаюсь всякими мелочами и одновременно постигаю ремесло web-разработчика, и для себя я твёрдо решил, что море обойдётся без меня (хотя мне до сих пор звонят с предложениями о работе время от времени), и что я-таки хочу жить и работать на берегу и найти удалённую работу, очень желательно в IT в связи с тем, что айтишка - это хорошо, интересно, при основательном подходе вполне денежно, да и какое-никакое представление об этом у меня уже имеется, хоть актуальных знаний мне сейчас явно недостаёт, но это не проблема - терпение и труд, как говорится... А путешествий и относительно острых ощущений мне уже хватило, и пора бы уже подумать о семье, карьере и других "земных" вещах. Лирики, пожалуй, достаточно, перейдём к делу.


Суть проекта
Проект - список дел, имеющий различный функционал для гостя и зарегистрированного пользователя.

Гостю доступен только один список, который хранится локально в браузере (в Local Storage) и, соотвественно, недоступен на других устройствах. Возможности в этом случае ограничены добавлением, редактированием, ранжированием (перемещением) и удалением пунктов списка.

Зарегистрированному пользователю доступно создание неограниченного количества списков, включая сохранение списка гостя, если таковой имелся, а также сохранение всех иных данных в БД. Для каждого списка в данном случае доступен всё тот же функционал (создание, редактирование, ранжирование и удаление пунктов списка), однако есть супер-пупер-друпер-мега-киллер-фича - это шаринг списков между пользователями и возможность одновременного их редактирования в режиме реального времени (посредством WebSocket). "Зачем это нужно?" - спросите вы. А я вам отвечу словами бессмертного лидера культовой группы Bredor Эскобара: "Ну да хер его знает." Хотел поработать с веб-сокетами в рамках учебного проекта и всего делов. Также добавлен стандартный административный раздел, чтобы не править данные напрямую ручками в базе.


Код и демо
Frontend: todo-client
Backend: todo-server
За код сильно прошу не пинать - я не профи. И да, я знаю, что есть кое-какой технический долг, но до этого руки пока не дошли (и никогда не дойдут, естественно).

Demo: https://infseeker-todo.(tk) - надобно скобки убрать. Т.к., к сожалению, Пикабу запрещает публикацию адресов с доменом tk (Tokelau), но я взял этот домен, т.к. он бесплатный и для публикации домашнего проекта вполне подходит.

Тестовые пользователи для тех, кто не хочется регистрироваться:
Пользователь 1:
Имя: TestUserOne
Пароль: TestUserOne123

Пользователь 2:
Имя: TestUserTwo
Пароль: TestUserTwo123


Технологический стек
Backend:
Web-Фреймворк (API): Flask (Python)
База данных: PostgreSQL
Веб-сервер: Gunicort + Nginx
ORM: Flask SQLAlchemy + Flask Marshmallow
Аутентификация: Flask Login
Авторизация: Flask Principal
SMTP-интерфейс: Flask Mail
Планировщик заданий: Flask APScheduler
Защита от ботов: Google reCaptcha v3
Админка: Flask Admin
WebSocket: Flask SocketIO

Frontend:
JS-Фреймворк: Vue 3
Сборщик проекта: Vite
Роутинг: Vue Router
Защита от ботов: Google reCaptcha v3
Валидация форм: Vuelidate
Локализация интерфейса: Vue i18n
Всплывающие уведомления: Vue Toastification
Drag'n'Drop: Vue Draggable Next
Редактор изображений: Vue Advanced Cropper
CSS-фреймворк: Bootstrap 5
CSS-тема: Sneat
WebSocket: SocketIO

Demo VDS:
Дата-центр: Россия, Королёв (Rucloud)
ОС: Ubuntu 18.04
Процессор: 1x2.2ГГц
Память: 0.5Гб
HDD: 10Gb


Процесс разработки
Постараюсь кратенько обозначить основные моменты в процессе планирования, разработки и тестирования проекта.
Общий срок, начиная от идеи составил 3,5 календарных месяца (с середины мая 2022 до начала сентября 2022), однако реальный срок непосредственной разработки составил чуть больше 2-х месяцев.

Общий процесс разработки проекта строился примерно следующим образом:
- Первичное планирование - наброски идеи проекта (Confluence)
- Прототипирование (основные экраны и элементы интерфейса) (Figma)
- Разработка пользовательских сценариев (User Stories) (Confluence)
- Текстовое описание базового функционала (Confluence)
- Постановка и выполнение задач по разработке, тестирование (Jira)

Методологией разработки был выбран недо-Scrum (1-недельные спринты, в спринт задачи в основном попадали напрямую из головы, а не из беклога, оценка сроков выполнения задач была номинальной, а тестирование происходило обычно сразу в продакшене), т.е., по сути, это был обыкновенный Waterfall, приправленный самообманом.
Однако, несмотря на все недочёты, разработка была спланирована, начата, закончена, и проект запущен в условный продакшн на демо-сервере. В планах было уложиться в 2 месяца, но, как это обычно бывает, согласно первому закону Паркинсона, сроки были чуть расширены.

Стоит отметить, что планированием тестовых мероприятий, ведением тестовой документации (Jira Xray) и непосредственным тестированием (полуавтоматизированное тестирование API в Postman, ручное тестирование интерфейса) занималась моя девушка, которая в относительно ближайшее время планирует также внедриться в IT, но, насколько мы адекватно можем оценивать сегодняшний рынок и её возможности, то вкатиться ручным тестировщиком вариантов практически нет ввиду пресыщенности рынка и отстуствия у неё опыта работы в реальных командах на реальных проектах. Поэтому, скорее всего, первоначально она пойдёт в техподдержку или что-то похожее, а там, быть может, и до разработки доберёмся, благо, девочка она умная и относительно быстро схватывает основы веб-разработки. Но время, как говорится, покажет.

Хотелось было отметить ещё множество различных интересных аспектов разработки проекта, однако, дабы не превращать пост в нечитаемую портянку, делать я этого не буду (на самом деле, мне просто лень). Кому интересно, то зайдёт на Демо-сервер и заглянет ко мне на уютненький Github.


Что я вспомнил и чему научился
Frontend:
- HTML 5 (структура, семантика)
- CSS 3 (Flex, Grid, Animation и пр.) + Bootstrap 5
- Основы JS, включая фичи ES6+
- Основы Vue 3, построения SPA-приложений, компонентный подход
- Работа с роутами (Vue Router)
- Работа с Local Storage
- Работа с асинхронными запросами и данными
- Реализация взаимодействия клиентов в реальном времени посредством WebSocket (SocketIO)

Backend:
- Основы Python 3
- Flask (REST API + Admin)
- Регистрация пользователей и работа с правами доступа (Flask Login)
- Работа с данными и ORM (Flask SQLAlchemy + Flask Marshmallow)
- Основы SQL, PostgreSQL
- Работа с WebSocket (Flask SocketIO)

Другое:
- Работа с Git, Github, Github Actions (автоматический деплой в продакшн по SSH на пуш)
- Конфигурирование Nginx и Gunicorn (настройка служб, воркеров, редиректа, HTTPS и пр.)
- Работа с Linux, командной строкой
- Работа с инструментами разработки (VSCode + плагины, pgAdmin, Postman, Chrome DevTools)


Что дальше?
Если вопрос касается данного проекта, то его разработка завершена окончательно и бесповоротно, т.е., всё, что я планировал сделать, я сделал. Теперь остаётся подтянуть и собрать воедино все накопленные знания и усиленно искать работу. Понятно, что в наше время это непросто, плюс возраст, плюс отсутствие соответствующего образования делают из меня не самого желанного кандидата даже на позицию джуниора, но, я думаю, как-нибудь прорвёмся, да и проект мой, я считаю, вполне себе годная демка моих знаний и скиллов, пускай это слишком сильно сказано, но, тем не менее. Будем верить в лучшее и двигаться вперёд. Мир!

Благодарю за внимание.