Code4Startup (coderealprojects)
Code4Startup - отличный ресурс, где авторы курсов пытаются создать разные известные проекты собственными руками, и показать нам что это не так сложно.
Создаем Product Hunt с помощью ReactJS и Firebase
Build Product Hunt with ReactJS and Firebase
★5 (всего оценок - 32)
Продолжительность
4 ч 47 мин
Категория
FirebaseКоличество уроков
43 Видео
Дата добавления
16 нояб. 2017 г., 12:45
Язык
Английский
Дата обновления
28 апр. 2026 г., 22:22
Хотите на практике освоить современный стек ReactJS + Firebase? В этом улучшенном обзоре курса вы узнаете, что именно вы получите на обучении, каким навыкам научитесь и почему создание клона Product Hunt — один из лучших способов перейти от теории к реальной разработке. Материал подходит как начинающим, так и разработчикам уровня junior+, стремящимся прокачать архитектуру и понимание фронтенд‑приложений.
О чем этот курс
Курс посвящен созданию полноценного веб‑приложения на основе ReactJS (ES6) и Firebase, моделируя функциональность популярной платформы Product Hunt. Вы пройдете весь путь — от настройки окружения до реализации рабочих фич и деплоя.
Почему модель Product Hunt — идеальный учебный проект
- Содержит реальные пользовательские сценарии — авторизация, публикация данных, лайки, комментарии.
- Позволяет отработать управление состоянием в сложных интерфейсах.
- Хорошо подходит для работы с базой данных и хранением медиа‑данных в облаке.
Что вы узнаете и освоите
Работа с ReactJS (ES6)
- Создание компонентной структуры и модульность интерфейсов.
- Использование современных возможностей JavaScript (ES6+).
- Организация данных и взаимодействие компонентов.
Использование Firebase в реальном приложении
- Работа с Firebase Authentication для регистрации и входа пользователей.
- Настройка облачной базы данных Firestore.
- Загрузка изображений и медиа в Firebase Storage.
Архитектура Flux и управление состоянием на Alt
Вы научитесь проектировать приложение по принципам Flux, используя библиотеку Alt для упрощенного управления состоянием. Такой подход помогает избавиться от запутанных связей, делает код предсказуемым и легко расширяемым.
Почему стоит выбрать этот курс
- Вы получите практический опыт, а не только теорию.
- Научитесь работать с одним из самых популярных стеков для веб‑разработки.
- Сможете добавить качественный проект в портфолио.
- Разберетесь, как современные компании создают масштабируемые интерфейсы, работающие с большими массивами данных.
Итог
После прохождения курса вы сможете уверенно использовать ReactJS и Firebase, строить архитектуру приложений по Flux‑подходу, а также самостоятельно разрабатывать современные веб‑проекты. Этот курс — отличный шаг к переходу на уровень полноценного фронтенд‑разработчика.
- Урок 1.00:01:44What's about this project
- Урок 2.00:01:48Tech stacks we're going to use
- Урок 3.00:01:12Firebase
- Урок 4.00:02:12NodeJS
- Урок 5.00:01:46Atom
- Урок 6.00:05:54Create project from empty folder
- Урок 7.00:09:37Our first React app
- Урок 8.00:07:24Create Home Page component
- Урок 9.00:04:59Add style to the home page
- Урок 10.00:10:50Update Home page component
- Урок 11.00:08:01Add Style
- Урок 12.00:05:03Create Product List component
- Урок 13.00:08:00Create Product Item component
- Урок 14.00:03:46Refactor Product Item component
- Урок 15.00:11:03Create Navbar component
- Урок 16.00:06:35Create Popup component
- Урок 17.00:06:43Refactor Popup component
- Урок 18.00:09:33Create Login Popup component
- Урок 19.00:05:12Create PostPopup component
- Урок 20.00:07:09Add PostPopup to Navbar
- Урок 21.00:06:22Add Style to PostPopup component
- Урок 22.00:08:17Create ProfieMenu component
- Урок 23.00:07:02Handle Profile Menu events
- Урок 24.00:05:27Create Product Popup component
- Урок 25.00:10:54Add Header to Product Popup
- Урок 26.00:06:40Add Comment box to Product Popup
- Урок 27.00:07:14Add Comments to Product Popup
- Урок 28.00:02:52Install and Setting up Firebase
- Урок 29.00:05:03Get Product List from server
- Урок 30.00:03:25Create Facebook app
- Урок 31.00:06:36Login with Facebook
- Урок 32.00:06:21Flux Struture
- Урок 33.00:13:15Get Started with Alt
- Урок 34.00:08:34Refactor Login process
- Урок 35.00:09:40Session and Logout
- Урок 36.00:07:54Refactor Product List
- Урок 37.00:07:55Post Product to database
- Урок 38.00:05:54Fixing Product List
- Урок 39.00:10:36Up vote
- Урок 40.00:06:50Fixing Up vote logic
- Урок 41.00:06:04Create Upvote component
- Урок 42.00:08:51Add Comments
- Урок 43.00:07:10Display Comments
Автор - Code4Startup (coderealprojects)
Комментарии