«Мастер совершает больше ошибок, чем новичок — попыток»
Предлагаем 8 вариантов проектов, которые можно сделать «по фану», дабы получить реальный опыт разработки.
![image](https://habrastorage.org/getpro/habr/post_images/881/d34/15a/881d3415a3f5f3c5a574d121815a5ff3.gif)
Клон Trello от Indrek Lasn .
Что вы освоите:
Тут пример репозитория, сделанного на React+Redux.
![image](https://habrastorage.org/getpro/habr/post_images/d56/543/0b0/d565430b0d71d67aaba67becbd69c763.gif)
Github Repository.
Простенькое CRUD приложение, идеально подходит для изучения основ. Научимся:
![image](https://habrastorage.org/getpro/habr/post_images/536/1ef/8fa/5361ef8fa335330d35d16b3f92ee55ad.gif)
Github repository.
На чем угодно: Swift, Objective-C, React Native, Java, Kotlin.
Изучим:
Попробуйте вот это API. Найдете лучше — напишите в комментах.
Если интересно, вот тут туториал.
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/f54/b50/3a8/f54b503a8db3d2204b1275055107f7b2.png)
Технически, это не приложение, но очень полезная задача, чтобы понять как работает webpack изнутри. Теперь это будет не «черный ящик», а понятный инструмент.
Требования:
Тут потрясный ресурс для полных новичков.
![image](https://habrastorage.org/getpro/habr/post_images/671/075/0e3/6710750e387f60551b4e9a63ede7ae29.gif)
Каждый джедай обязан сделать свой собственный Hackernews.
Что вы освоите по дороге:
![image](https://habrastorage.org/getpro/habr/post_images/58a/aec/2e6/58aaec2e6a24b20fec3a2c96caeb0b5c.gif)
TodoMVC.
Серьезно? Тудушка? Их же тысячи. Но поверьте, есть причина такой популярности.
Туду-приложение — это отличный способ удостовериться, что понимаешь основы. Попробуйте написать одно приложение на ванильном Javascript и одно на своем любимом фрэймворке.
Научитесь:
![image](https://habrastorage.org/getpro/habr/post_images/178/271/d2b/178271d2bb7de97399241e4f3f353cf9.gif)
Github repository.
Очень полезно, чтобы понять drag and drop api.
Научимся:
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/431/9b2/9d8/4319b29d8b6d54be779e635b313eb748.png)
Вы будете понимать как работают и веб приложения и нативные приложения, что выделит вас из серой массы.
Что изучим:
Этого вам хватит на месяц-другой.
Перевод выполнен при поддержке компании EDISON Software, которая профессионально занимается разработкой приложений и сайтов на PHP для крупных заказчиков, а так же разработкой облачных сервисов и мобильных приложений на Java.
Предлагаем 8 вариантов проектов, которые можно сделать «по фану», дабы получить реальный опыт разработки.
Проект 1. Клон Trello
![image](https://habrastorage.org/getpro/habr/post_images/881/d34/15a/881d3415a3f5f3c5a574d121815a5ff3.gif)
Клон Trello от Indrek Lasn .
Что вы освоите:
- Организация маршрутов обработки запросов (Routing).
- Drag and drop.
- Как создавать новые объекты (доски, списки, карточки).
- Обработка и проверка входных данных.
- Со стороны клиента: как использовать локальное хранилище, как сохранять данные в локальном хранилище, как читать данные из локального хранилища.
- Со стороны сервера: как использовать базы данных, как сохранять данных в базе, как читать данные из базы.
Тут пример репозитория, сделанного на React+Redux.
Проект 2. Панель админа
![image](https://habrastorage.org/getpro/habr/post_images/d56/543/0b0/d565430b0d71d67aaba67becbd69c763.gif)
Github Repository.
Простенькое CRUD приложение, идеально подходит для изучения основ. Научимся:
- Создать пользователей, управлять пользователями.
- Взаимодействовать с базой данных — создавать, читать, редактировать, удалять пользователей.
- Проверка ввода и работа с формами.
Проект 3. Трекер криптовалют (нативное мобильное приложение)
![image](https://habrastorage.org/getpro/habr/post_images/536/1ef/8fa/5361ef8fa335330d35d16b3f92ee55ad.gif)
Github repository.
На чем угодно: Swift, Objective-C, React Native, Java, Kotlin.
Изучим:
- Как работают нативные приложения.
- Как извлекать данные из API.
- Как работают нативные макеты страниц.
- Как работать с мобильными симуляторами.
Попробуйте вот это API. Найдете лучше — напишите в комментах.
Если интересно, вот тут туториал.
Проект 4. Настроить собственный конфиг webpack с нуля
![image](https://habrastorage.org/getpro/habr/post_images/f54/b50/3a8/f54b503a8db3d2204b1275055107f7b2.png)
Технически, это не приложение, но очень полезная задача, чтобы понять как работает webpack изнутри. Теперь это будет не «черный ящик», а понятный инструмент.
Требования:
- Компилировать es7 в es5 (основы).
- Компилировать jsx в js — или - .vue в .js (придется выучить загрузчики)
- Настроить webpack dev server и hot module reloading. (vue-cli and create-react-app use both)
- Использовать Heroku, now.sh или Github, научиться развертывать webpack проекты.
- Настроить свой любимый препроцессор, чтобы компилировать css — scss, less, stylus.
- Изучить как использовать изображения и svgs с webpack.
Тут потрясный ресурс для полных новичков.
Проект 5. Клон Hackernews
![image](https://habrastorage.org/getpro/habr/post_images/671/075/0e3/6710750e387f60551b4e9a63ede7ae29.gif)
Каждый джедай обязан сделать свой собственный Hackernews.
Что вы освоите по дороге:
- Как взаимодействовать с hackernews API.
- Как создать одностраничное приложение.
- Как реализовать такие фичи, как просмотр комментариев, отдельных комментариев, профилей.
- Организация маршрутов обработки запросов (Routing).
Проект 6. Тудушечка
![image](https://habrastorage.org/getpro/habr/post_images/58a/aec/2e6/58aaec2e6a24b20fec3a2c96caeb0b5c.gif)
TodoMVC.
Серьезно? Тудушка? Их же тысячи. Но поверьте, есть причина такой популярности.
Туду-приложение — это отличный способ удостовериться, что понимаешь основы. Попробуйте написать одно приложение на ванильном Javascript и одно на своем любимом фрэймворке.
Научитесь:
- Создавать новые задачи.
- Проверять заполнение полей.
- Фильтровать задачи (завершена, активна, все). Используйте
filter
иreduce
. - Понимать основы Javascript.
Проект 7. Сортируемый drag and drop список
![image](https://habrastorage.org/getpro/habr/post_images/178/271/d2b/178271d2bb7de97399241e4f3f353cf9.gif)
Github repository.
Очень полезно, чтобы понять drag and drop api.
Научимся:
- Drag and drop API
- Создавать rich UIs
Проект 8. Клон мессенджера (нативное приложение)
![image](https://habrastorage.org/getpro/habr/post_images/431/9b2/9d8/4319b29d8b6d54be779e635b313eb748.png)
Вы будете понимать как работают и веб приложения и нативные приложения, что выделит вас из серой массы.
Что изучим:
- Web sockets (мгновенные сообщения)
- Как работают нативные приложения.
- Как работают шаблоны в нативных приложениях.
- Организация маршрутов обработки запросов в нативных приложениях.
Этого вам хватит на месяц-другой.
Перевод выполнен при поддержке компании EDISON Software, которая профессионально занимается разработкой приложений и сайтов на PHP для крупных заказчиков, а так же разработкой облачных сервисов и мобильных приложений на Java.