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

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

1. Калькулятор

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

Чему вы научитесь

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

Стек технологий

• Vue JS

• Tailwind CSS

Функции приложения

• Красивый интерфейс

• Темный/Светлый режим

• Отзывчивость

2. Платформа для блогов

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

Чему вы научитесь

После создания блога с нуля вы узнаете о styled-components, маршрутизации в Next JS, реализации MDX и использовании динамической маршрутизации.

Стек технологий

• Next.js

• React.js

• Styled Components

• MDX

Функции приложения

• Темный/Светлый режим

• Отзывчивость

3. Приложение «Погода»

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

Чему вы научитесь

После создания приложения погоды вы узнаете об извлечении данных из API, отправке данных в API, отображении данных и создании динамических страниц.

Стек технологий

• React.js

• Tailwind CSS

• Axios

Функции приложения

• Красивый интерфейс

• Прогноз на 4 дня

• Отзывчивость

Примечание от @sahsAGU: пример проекта подобного приложения на GitHub.

4. Spotify 2.0

Вы можете создать Spotify 2.0, свою собственную версию Spotify. Вы можете добавить столько функций, сколько сможете, и после завершения развертывать его онлайн.

Чему вы научитесь

Создание собственной версии Spotify поможет вам узнать, как получать данные из API, как работать с динамической маршрутизацией, как обрабатывать аутентификацию и т.д.

Стек технологий

• Next JS

• Tailwind CSS

• Axios

• Auth0

Функции приложения

• Красивый интерфейс

• Темный/Светлый режим

• Отзывчивость

• Аутентификация

• Профиль пользователя

• Показ текстов песен

Примечание от @sahsAGU: нечто напоминающее то, что имел ввиду автор, на GitHub.

5. Приложение «Фильмы»

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

Чему вы научитесь

Создание movie-app поможет вам узнать, как создавать переиспользуемые компоненты, как получать данные из api, как создавать динамические страницы.

Стек технологий

• Vue JS

• Styled Component

• Axios

• TMDB API

Функции приложения

• Красивый интерфейс

• Темный/Светлый режим

• Отзывчивость

• Сортировка фильмов по рейтингу

• Показ трейлеров

• Сортировка по жанрам

Примечание от @sahsAGU: пример проекта подобного приложения на GitHub.

6. Клон YouTube

Если вы хотите узнать о сетках, модулях макетов гибких контейнеров (flexbox) и управлении состояниями, будет полезно клонировать пользовательский интерфейс YouTube. Вам не нужно на 100% делать то же самое, что и YouTube, вы можете изменить дизайн и создать свою собственную версию YouTube.

Чему вы научитесь

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

Стек технологий

• Svelte

• SMUI (Svelte Material UI)

Функции приложения

• Красивый интерфейс

• Отзывчивость

Примечание от @sahsAGU: нечто напоминающее то, что имел ввиду автор, на GitHub.

7. Чат-приложение

Если вы хотите узнать о Firebase, Firestore, базе данных реального времени и т.д., то этот проект для вас. Наличие такого проекта в вашем портфолио существенно его усилит.

Чему вы научитесь

Создание чат-приложения поможет вам узнать о firebase, аутентификации, real-time DB и т.д.

Стек технологий

• React.js

• Firebase

• Material UI

Функции приложения

• Функция лайв-чата

• Темный/Светлый режим

• Отзывчивость

Примечание от @sahsAGU: пример проекта подобного приложения на GitHub.

8. SaaS-лендинг

Создание лендинга может очень помочь вам в улучшении ваших навыков работы с веб-интерфейсом.

Чему вы научитесь

Разработка лендинга для Saas поможет вам улучшить свои навыки работы с сетками, гибкими боксами и отзывчивостью.

Стек технологий

• Vue

• Styled Component

Функции приложения

• Красивый интерфейс

• Отзывчивость

Примечание от @sahsAGU: пример проекта подобного приложения на GitHub.

9. Планировщик задач

Этот проект может занять некоторое время, но оно того стоит. Вы можете создать веб-сайт для управления задачами, содержащий сами задачи, календарь и некоторые документы.

Чему вы научитесь

Создание приложения для управления задачами может помочь вам узнать о состояниях, markdown, локальном хранилище и аутентификации.

Стек технологий

• Next.js

• Tailwind CSS

• Auth0

• Markdown

Функции приложения

• Создание задач

• Создание вики-страниц (markdown)

• Отзывчивость

Примечание от @sahsAGU: пример проекта подобного приложения на GitHub.

10. eCommerce-сайт

Еще один интересный проект, который вы можете сделать, чтобы улучшить свои навыки фронтенд-разработки, - это создание пользовательского интерфейса веб-сайта электронной коммерции.

Чему вы научитесь

После разработки пользовательского интерфейса веб-сайта электронной коммерции вы узнаете о переиспользуемых компонентах, состояниях и использовании свойств props.

Стек технологий

• Svelte

• Sveltestrap

Функции приложения

• Красивый интерфейс

• Отзывчивость

11. Панель администратора

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

Чему вы научитесь

После разработки панели администратора вы узнаете, как создавать многие типы компонентов, повторно использовать их в нужном месте и делать страницу адаптивной.

Стек технологий

• React.js

• SCSS

• React Bootstrap

Функции приложения

• Красивый интерфейс

• Темный/Светлый режим

• Отзывчивость

Примечание от @sahsAGU: пример проекта подобного приложения на GitHub.