FlashcardsLoop — или как я делал свой Quizlet

Я изучаю C#, .NET, ASP.NET и ищу работу Backend-разработчика. Сейчас дело дошло до собесодований и фундаментальных вещей (синтаксис, паттерны проектирования, принципы SOLID), я понял, что информации море и она вываливается из головы.

Вспомнил про метод карточек (Flashcards), который обычно используют для иностранных языков. Пошел на популярные ресурсы: Quizlet, RemNote и прочие. Зарегистрировался, начал создавать колоды, мне понравилось, вошел во вкус и каково было мое разочарование когда я везде натыкался на платные подписки. Где-то ограниченное количество карточек, где-то постоянная реклама, где-то очень замудренный интерфейс сделанный вообще не понятно для кого (привет Anki).Хочешь больше функций? Плати. — Хочешь учить без рекламы? Плати. — Хочешь добавить картинку? Ну, ты понял...

Я смотрел на эти интерфейсы и во мне кипела злость: «Ну это же обычное CRUD-приложение! Две таблицы в базе, простейший API. Что тут сложного? Я сам могу такое сделать!»

Так родилась идея: написать свой сервис. Бесплатный. Без ограничений. Для себя. Это и проблема решится, и пет-проект для резюме будет.

Для тех кому лень читать вот тут на ютубе видео:

Еще одна проблема была в том что я понятия не имею за фронтенд. Я могу прочесть и понять чужой код на js(ts), но сам что-то спроектировать и как это все работает не знаю. Все мои познания исключительно поверхностные, на уровне фундаментальных вещей в програмировании. Я умею в C#, могу спроектировать базу в PostgreSQL, написать API. Но фронтенд для меня — это темный лес. Я могу прочитать чужой JS-код и примерно понять, что он делает, но написать с нуля что-то сложнее alert('Hello World') — нет.

Несколько дней я сомневался. Стоит ли ввязываться? Но каждый раз, натыкаясь на очередное ограничение у конкурентов, я убеждался: надо пробовать.

Решил так: Начну писать бэкенд, а там как пойдет. Архитектуру выбрал такую: ASP.NET Web API, PostgreSQL + Entity Framework. Как-то до этого применял Identity для аутентификации и авторизации, решил и его закрепить тут (на самом деле я не знаю альтернативы).

А вот с фронтом решил схитрить. Подумал: «Я же .NET разработчик, возьму Blazor! Буду писать на C# прямо в браузере, зачем мне этот ваш JavaScript?»

С бэком проблем вообще небыло. Я сел, написал. Запустил.

А вот фронт мне даже стыдно показывать (но я покажу)

Главная страницаСтраница просмотра карточекСтраница изучения

И тут я понял что это провал. Мне даже самому не хотелось тут что-то делать :D

Это был позор. Компоненты работали криво, стили разъезжались, приложение весило как чугунный мост из-за WebAssembly. Я понял, что Blazor крутая технология, но если ты не понимаешь, как работает веб (DOM, CSS, события), магии не случится.

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

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

Так я нашел Айбека (https://github.com/AiserKz). Мы договорились: я держу бэк, он помогает переписать фронт на человеческий стек. Айбек искренне проработал со мной две недели.

За это время мы: Ушли от Blazor и переписали всё на React + Vite. Ну как переписали (он переписал).

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

Потом Айбек ушел по своим делам (спасибо ему огромное!), но проект уже обрел приемлимое лицо.

Бросать было нельзя. Пришлось мне, стиснув зубы, самому ковырять React, разбираться в стейт-менеджменте, и по ходу работы мне постоянно хотелось что-то добавить или улучшить. Разумеется будет полным враньем если я скажу что сам написал все что ниже. Во всем остальном мне помогал Claude. Но я уже хотя бы понимал что и какой компонент что делает и за что отвечает. Мог отследить и подправить логику (в силу своего понимания).

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

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

Так и появился следующий функционал расшаривания своих карточек для всех пользователей.

Теперь любой пользователь может даже не делать свои карточки, а искать и выбирать то что ему понраву.

Раз уж появился такой функционал, нужно дорабатывать геймификацию. Теперь у меня есть лидерборд пользователей. Самые лучшие авторы колод, будут повышаться в рейтинге за каждую подписку на его колоду. А заодно тут впервые изучил библиотеку SignalR (сразу скажу очень крутая штука оказалась).

Потом разумеется хотелось где-то видеть всю эту красоту и статистику про себя, так появилась страница пользователя

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

Возможно для кого-то это покажется простым, но я для себя неимоверно рад этой работе. Показывать всякие UI/UX элементики можно еще долго, но суть статьи не в этом. Хочу поделиться полным ходом мыслей и размышлений, как от прототипа я пришел к MVP релизу.

PS: Забыл про мобильную адаптацию UI рассказать, но базово она есть если что.

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

Немного почитав про все это, я понял что любой даже самый дешевый VPS, всегда будет лучше бесплатных вариантов. Пошел в интернет, нашел самый дешманский хостинг который был. Купил 1 ядро и 2 Гб оперативки.

Просто чтобы разобраться в вопросе, как размещать что делать и т.д.

И тут мне пришлось знакомиться с Docker. Очень часто вижу это требование в вакансиях и тут такая прекрасная возможность. Что меня очень удивило, это то что для базового понимания Docker много и не нужно. Там по сути пару файлов настроек и все, вы можете базово разместиться где угодно со своим контейнером.

Для того чтобы снизить нагрузку на и так полумертвый сервер, я решил что фронтенд буду размещать на Cloudflare. Купил там домен FlashcardsLoop.org и на этом все. Получил SSL из коробки. Больше никаких действий делать не пришлось.

Зачем я это пишу?

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

Я выложил проект в Open Source вот сам сайт и вот тут открытый репозиторий github.

Я буду рад любой помощи:

Для меня это был огромный опыт выхода из зоны комфорта. Я перестал бояться фронтенда и понял, что лучший способ выучить технологию — это сделать продукт, который решает твою собственную проблему.

Пользуйтесь на здоровье!

#dotnet #csharp #react #opensource #petproject #обучение