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

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

Само приложение: mathbank.ru (исходный код на github).

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

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

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

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

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

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

Учу фронтенду как профессии

Обучаю веб-программированию с целью трудоустройства. Готовлю к позиции Junior Frontend Developer: изучаем верстку, Javascript и React, решаем тестовые с собеседований и пишем проект.