Выбор проекта для портфолио

Для портфолио можно сделать одно хорошее приложение, которое вы будете показывать на собеседовании. Ваш проект из онлайн-школы программистов не подходит. Да, даже если вы уже отдали им 40 тысяч рублей. Их цель — собственный бизнес, а не ваше трудоустройство.

Обычно у большинства учеников на гитхабе лежит множество тудушек, верстка макетов лендингов и интернет-магазинов из онлайн-школ. Только HTML Academy каждый месяц выпускает минимум 200 студентов, в их портфолио одинаковые проекты, которые даются ученикам больше пяти лет.

Что можно сделать? Реализовать какой-нибудь проект для себя. Нужно выбрать идею, которая поможет вам преодолевать трудности, связанные с обучением программированию, а не наоборот тормозить обучение. Такой выбор — очень личный. Поэтому я приведу в пример мой первый проект.

Мотивация создания

Я работал репетитором по математике и программированию. Одним из направлений являлась подготовка четвероклассников к поступлению в физ-мат школы. Для того, чтобы поступить в такую школу, необходимо решить на вступительной олимпиаде около 15 небольших задач повышенной сложности. С натяжкой часть из них можно назвать олимпиадными, но в основном все решается по алгоритмам. Другое дело, что алгоритмов много, они нестандартные и доступны не всем в 10 лет.

Соотвественно, процесс подготовки — прорешивание разных задач из разных разделов математики: условно 15 задач на уроке, 15 дома, и в итоге за учебный год выходит около 1000 задач. Еще одна специфика заданий: так как это массовая олимпиада, все задачи подразумевают ответ.

Когда у меня было два-три ученика, я справлялся копирование теста из одного tex-файла в другой. Но количество учеников, а также количество заданий и тем росло и это стало неудобным. Тогда я решил, что можно сделать базу задач, конкретно для моей деятельности. Такое приложение экономило бы мое время на занятии и при подготовке домашнего задания.

Описание функциональности

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

1. В самом примитивном виде приложение представляет из себя список категорий, в каждой из которых есть список задач. У каждой задачи есть условие, ответ и категория. Сразу рисуется в голове реляционная база даннных. Так что можно использовать PostgreSQL, но можно и обойтись и MongoDB, на этих объемах — до 10000 задач — это не важно. Бекенд примитивен: REST API на Node.js.

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

3. Данными в базе нужно управлять. Значит, пишем полноценный CRUD с правами доступа. Хотя бы авторизация для администратора, в идеале — регистрация для всех, сохранение попыток учеников.

4. Наконец, решаем исходную проблему: добавляем возможность для администратора создавать домашние задания для учеников из существующих задач. Модалки, драндроп, формы, генерация новых страниц. Сюда же работа с локалстораджем: для ученика без авторизации сохраняем его ответы, для администратора — данные из «корзины» (в процессе создания домашнего задания).

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

6. Самое интерсеное — задеплоить проект. Это та самая пресловутая работа с unix, о которой спрашивают работодатели. Купить домен, арендовать дроплет в диджиталоушене, настроить права и проч. Можно организовать CI прямо с гитхаба: после пуша в мастер код проходит тесты и линтеры, в случае успеха приложение обновляется на удаленном сервере.

7. Еще один полезный кейс — сервер-сайд рендеринг. В данном случае он очевидно полезен: задачи будут индексироваться в поисковых системах, родители в поисках решения будут заходить на сайт и видеть вашу рекламу как рептитора. Конверсия максимальна: пришли заинтересованные люди, а весь сайт — реклама только вас.

8. Продолжение темы регистрации: дать другим людям возможность добавлять новые задачи и указывать ответы к существующим.

9. Многие задачи решаются алгоритмически: нахождение последней цифры большой степени, перевод в лрцгую систему счисления, задачи на НОД и НОК и проч. Раз это можно алгоритмизировать, то почему бы не написать соответствующие тренажеры? Для пользователей (детей) это упрощениепроцесса обучения, а для вас решение классических задач из программирования. Например, перевод из одной системы счисления в другую проходят в разделе циклов при изучении любого языка программирования.

Ваш вариант проекта

Описанный мной пример — типичное CRUD-приложение с регистрацией, SSR на сервере и анимациями на клиенте. Это то, чем в среднем занимаются веб-программисты на работе.

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

Например, прямо сейчас я бы сделал калькулятор ипотеки. В интернете полно вариантов, но обычно это просто таблички, в которых не учитывается дополнительный платеж, рост вашей зарплаты, премии на работе, налоговые вычеты. Нет возможности сравнить разные предложения (с разными суммами и разными процентами), опять же нет возможности подгрузить проценты из разных банков. Ничего не сохраняется локально, потому что в большинстве своем подобные калькуляторы — просто html, который отдается сервером по данным из формы.

А вот после ипотеки я бы отправился в путешествия (например), тогда мне бы захотелось публиковать об этом рассказы. И вот вырисовывается приложение а-ля tema.ru/travel, только с современным дизайном и заточенное под вас. Тут тоже нужно написать сервер, сделать возможность хранить много фотографий. Разные темы: ночная/дневная, разные форматы отображение: рассказ (как у Лебедева) или слайдшоу (как в фотография в контакте, например).

Еще вариант? Сейчас я живу в Москве, сделал бы сайт с перспективным развитием московского метро, потому что планы известны на 5 лет вперед. Открывают не только метро, но и МЦД. Там 300-400 станций, с которыми что угодно можно делать. Можно поработать и данными (инфа про все станции, вывод по годам, вывод загруженности и т.д.) и с картой (отображение на яндекс.картах, например или отрисовка схемы на канвасе). Надо будет написать простенький бэкенд на ноде, где будет храниться инфа про все станции.

Очень важно, чтобы вы выбрали приложение, которое будет интересно делать лично вам. Я готов помочь с техничесткой состалвяющей, проконсультировать по технологиям и поучаствоать в реализации, но главнее всего, чтобы вы понимали, что и зачем вы делаете. Рассказ на собеседовании о таком проекте будет круче тудушек, онлайн-магазинов из «школ программирвования» и даже невнятного опенсорса. Вы сможете показать готовый проект и увлеченно его презентовать. Это покажет вашу инициативность, способность видеть задачу целиком и заканчивать проекты.