Всем привет! Эта публикация продолжит цикл статей посвященных pet-проектам для frontend-разработчика. Выполнение тестовых проектов поможет вам изучить новые технологии и закрепить уже имеющиеся знания. Проекты, которые представлены в этой статье дают в качестве тестового задания на позицию Middle/Junior fronted-разработчик.
Меня зовут Антон. Я занимаюсь front-end разработкой и сейчас я расскажу вам об идеях для ваших pet-проектов.
Форма покупки товара
В этом проекте вам предлагается создать front-end приложение для оформления покупки в интернет-магазине. Обратите внимание, что предполагается функция автоопределения адреса доставки по геоданным. Формы должны иметь валидацию, а некоторые поля предполагают автоподстановку. Также на этапе после оформления заказа есть функция вывода текущей страницы на печать. Печатная версия должна быть адаптирована под черно-белую печать.
Основные требования для проекта:
- Семантичная адаптивная верстка
- Использование Pre/Post процессоров (SCSS/SASS, Stylus, LESS, PostCSS)
● Использование соглашений/архитектур написания стилей MVCSS/Bem и т.п
- Можно использовать ui-фреймворки (Bootstrap/Foundation/Semantic UI и т.п.), либо просто сетки.
- Данная форма может быть реализована как на нативном javascript (es5/es6) или же с использованием одного из популярных фреймворков
- Плюсом будет наличие автоматизированных тестов.
SWAPI
Галактической республике необходима твоя помощь. Нужно создать интерфейс для взаимодействия с галактической базой. Всего необходимо реализовать 2 страницы: список космических кораблей и страницу корабля. Реализовать роутинг можно как нативно, так и с помощью React-Router
Страница со списком кораблей:
● На странице будет список всех кораблей
● Добавить текстовое поле для поиска по названию корабля. Учесть возможность передачи результатов поиска по ссылке.
● Реализовать пагинацию в формате next - prev
● При клике по элементу списка, пользователь переходит на страницу с информацией по конкретному кораблю.
Страница корабля:
● Необходимо вывести всю информацию о корабле
API для получения информации о кораблях
Emoji picker
Представим, что вы работаете в команде, которая занимается разработкой чата. Проект написан на React + TS, поэтому тестовое задание приближено к ежедневным задачам. Перед тобой упрощенный макет нашего emoji picker'a. Тебе необходимо реализовать страницу в которой будет поле ввода и аналогичный emoji picker (в соответствии с макетом), который будет работать с полем ввода.
Основные задачи:
● Используй React
● Используй TS
● Работоспособность в актуальной версиях Google Chrome/Safari/Edge
● Реализация поиска - опциональная задача
Остальное на твоё усмотрение
Макет необходимый для реализации проекта
#proweb #it #code #web #pet-проект #программирование #frontend