Главная страницаКатегория svelteSvelte и Firebase: Полный курс (2023)

Svelte и Firebase: Полный курс (2023)

Name: Svelte и Firebase: Полный курс (2023)
Price: 13 USD
Rating: 5 (10 reviews)

Svelte and Firebase: The Full Course (2023)

udemy

★5 (всего оценок - 10)

Продолжительность

25 ч 26 мин

Категория

Svelte

Количество уроков

281 Видео

Дата добавления

18 июн. 2023 г., 02:01

Язык

Английский

Дата выхода

1 мая 2023 г., 01:00

Дата обновления

29 апр. 2026 г., 18:08

Хотите освоить современную фронтенд‑разработку и научиться создавать быстрые, масштабируемые веб‑приложения? Этот курс по Svelte и Firebase поможет вам уверенно пройти весь путь — от базовой логики компонентов до построения полноценного приложения с аутентификацией, базой данных, анимациями и развертыванием.

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

Курс сочетает теорию и практику: вы создадите два реальных приложения — клон Trello и сервис, похожий на Twitter. Особенность программы в том, что ключевая функциональность создаётся вручную, без готовых библиотек, что даёт глубокое понимание работы Svelte.

Понимание основ Svelte: реактивность, шаблоны, события, директивы.
Работа со Svelte Kit и маршрутизацией.
Использование жизненного цикла компонентов.
Создание собственных UI‑компонентов: модалки, snackbar, формы, пагинация.
Интеграция Firebase: Firestore, аутентификация, хранение данных, загрузка изображений.
Организация кода и архитектуры приложений на основе реальных задач.
Развертывание готового проекта на Vercel.

Подробное содержание курса

Работа с макетом и структурой приложения

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

Основы Svelte

Синтаксис шаблонов и встроенные конструкции.
Реактивные переменные и реактивные выражения.
Обработка событий и привязка значений.
Жизненный цикл: onMount, onDestroy.
Хранилища (stores) и работа со сложной реактивностью.

Создание UI‑функционала с нуля

Валидация форм и обработка ошибок.
Анимации и переходы для улучшения UX.
Построение модальных окон, всплывающих сообщений (snackbar), окон мессенджера.
Пагинация и ленивая загрузка контента.

Интеграция с Firebase

Инициализация и настройка Firebase/Firestore.
Хранение структурированных данных.
Создание аутентификации: вход, регистрация, выход.
Использование контекста и провайдеров для передачи данных в глубину приложения.
Загрузка изображений через Firebase Storage.

Работа над полноценным приложением

На практике вы реализуете ключевые функции Twitter‑подобного сервиса:

Создание и отображение "глайдов" (сообщений).
Функционал подписки на других пользователей.
Формирование ленты из глайдов авторов, на которых пользователь подписан.
Добавление подглайдов — ответов на сообщения.
Оптимизация загрузки данных при прокрутке.

Развертывание проекта

Завершающий этап — публикация вашего приложения на Vercel. Вы научитесь настраивать сборку, деплой и проверять готовность приложения к использованию.

Что вы получите в итоге

Глубокое понимание принципов Svelte и современного фронтенда.
Навыки разработки приложений с Firebase.
Два полноценных проекта в портфолио.
Уверенность в создании собственных приложений с нуля.

Этот курс подойдёт всем, кто знаком с основами JavaScript и хочет перейти на новый уровень разработки, изучив Svelte в максимально практическом и понятном формате.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:08:45
Introduction
Урок 2. 00:05:52
How to get a help
Урок 3. 00:05:25
Github repo tricks
Урок 4. 00:06:30
Init Project
Урок 5. 00:04:21
Coding Editor Setup
Урок 6. 00:09:22
Folder Structure
Урок 7. 00:07:23
Src Folder
Урок 8. 00:04:09
Layout
Урок 9. 00:07:48
Tailwind
Урок 10. 00:03:41
Tailwind Correction
Урок 11. 00:03:58
Additional CSS Improvements
Урок 12. 00:03:06
New Route
Урок 13. 00:06:11
More about layouts
Урок 14. 00:04:22
Sub Page
Урок 15. 00:01:59
Cleanup
Урок 16. 00:03:37
Svelte Reactivity
Урок 17. 00:04:04
Reactive statement
Урок 18. 00:02:20
Reactive declarations
Урок 19. 00:05:02
Copy/Paste Layout
Урок 20. 00:05:23
Task Item
Урок 21. 00:04:02
Task List
Урок 22. 00:08:05
Props
Урок 23. 00:04:21
Formatting Options
Урок 24. 00:04:21
Task List Data
Урок 25. 00:07:31
Each Loop
Урок 26. 00:04:24
Iterate Tasks
Урок 27. 00:03:50
Editable Component
Урок 28. 00:04:30
If Block
Урок 29. 00:02:39
Button Formatting
Урок 30. 00:03:19
Editing Mode
Урок 31. 00:05:45
Value binding
Урок 32. 00:04:16
Default Value
Урок 33. 00:06:23
Bind to Component
Урок 34. 00:04:21
Dispatch Event
Урок 35. 00:01:45
Rename event
Урок 36. 00:04:00
Pass Data in Events
Урок 37. 00:10:21
Stores
Урок 38. 00:08:01
Sub to Store
Урок 39. 00:05:27
Update Store
Урок 40. 00:07:46
Unsub
Урок 41. 00:05:03
Auto Subscription
Урок 42. 00:05:03
Start Function
Урок 43. 00:05:22
Stop Function
Урок 44. 00:04:27
Readable Store
Урок 45. 00:02:45
Task List Store Data
Урок 46. 00:05:56
Event Forwarding
Урок 47. 00:02:58
Revert Update Task
Урок 48. 00:07:04
Pass List Index
Урок 49. 00:05:34
Find Task Idx
Урок 50. 00:04:03
Update Task
Урок 51. 00:03:30
Return subscribe only
Урок 52. 00:08:44
Move update to store
Урок 53. 00:01:59
Add List Prep
Урок 54. 00:04:59
Add new list
Урок 55. 00:01:24
Allow X Scrolling
Урок 56. 00:05:30
Add Task
Урок 57. 00:01:26
Make list full height
Урок 58. 00:02:45
Drag Start
Урок 59. 00:04:27
Drop Item
Урок 60. 00:10:02
Event data transfer
Урок 61. 00:02:22
Move code to store
Урок 62. 00:05:51
Move Item
Урок 63. 00:02:44
Refactor Props
Урок 64. 00:03:49
List Hover Id
Урок 65. 00:06:17
Hovering Effect
Урок 66. 00:08:19
Script Module
Урок 67. 00:11:06
Crossfade Transition
Урок 68. 00:03:45
Animate Flip
Урок 69. 00:08:11
More Transitions
Урок 70. 00:08:04
Persistence
Урок 71. 00:05:01
Store Data
Урок 72. 00:04:11
Remove item function
Урок 73. 00:03:54
Remove Task
Урок 74. 00:03:16
Remove List
Урок 75. 00:04:09
Editable List
Урок 76. 00:05:54
Update List Name
Урок 77. 00:04:38
Load Function
Урок 78. 00:17:36
SSR + CSR
Урок 79. 00:13:08
Prerendering
Урок 80. 00:04:26
Fan with Scrollbar
Урок 81. 00:05:13
Project 2 Layout
Урок 82. 00:02:13
Bottom Menu
Урок 83. 00:02:21
Home Page
Урок 84. 00:00:35
Format Document
Урок 85. 00:04:05
Sidebars Components
Урок 86. 00:03:10
Trends data
Урок 87. 00:03:52
Each Loop Trend
Урок 88. 00:06:45
Nav Links Data
Урок 89. 00:04:00
Render Links
Урок 90. 00:08:21
Create Shared Layout
Урок 91. 00:04:14
Api Endpoint
Урок 92. 00:07:45
Provide data to Layout
Урок 93. 00:05:44
Create glide - simple
Урок 94. 00:03:16
Provide more data to Glide
Урок 95. 00:05:08
Glide post component
Урок 96. 00:05:03
Login and Register Page
Урок 97. 00:11:42
Route Grouping
Урок 98. 00:07:17
Auth layout component
Урок 99. 00:07:47
Error page
Урок 100. 00:04:45
Path Alias
Урок 101. 00:04:31
Fix Intelisense
Урок 102. 00:04:00
Popup component
Урок 103. 00:03:59
Wrap bottom menu in popup
Урок 104. 00:01:57
Logout Menu
Урок 105. 00:04:53
Before Update and after update
Урок 106. 00:05:25
Close popup
Урок 107. 00:05:26
Clean event listener
Урок 108. 00:09:40
Popup Bottom Position
Урок 109. 00:09:34
Portal
Урок 110. 00:04:34
Adjust popup left position
Урок 111. 00:02:21
Adjust while resizing
Урок 112. 00:07:29
Close on outside click only
Урок 113. 00:05:12
Actions
Урок 114. 00:07:30
Handle popup close in action
Урок 115. 00:06:00
UI Context
Урок 116. 00:07:33
Set context
Урок 117. 00:02:37
Get context abstraction
Урок 118. 00:05:53
Set screen size
Урок 119. 00:04:18
Helper size variables
Урок 120. 00:03:58
Svelte window component
Урок 121. 00:02:55
Simplify Ui context
Урок 122. 00:04:00
Display icon conditionally
Урок 123. 00:04:37
Check for loading UI
Урок 124. 00:03:05
CSR
Урок 125. 00:06:18
Auth Context
Урок 126. 00:04:13
Simulate Authentication
Урок 127. 00:02:58
Loader Component
Урок 128. 00:04:28
Conditional Auth
Урок 129. 00:06:53
Redirect if authenticated
Урок 130. 00:03:17
Main layout component
Урок 131. 00:05:01
Main pages redirect
Урок 132. 00:02:50
Move forms to components
Урок 133. 00:03:21
Bind login data
Урок 134. 00:03:14
Bind register data
Урок 135. 00:06:11
Validate action
Урок 136. 00:02:53
Add alias for actions and stores
Урок 137. 00:04:04
Form Handler Store
Урок 138. 00:09:24
Add state to form store
Урок 139. 00:07:00
Create store separately
Урок 140. 00:07:18
createStore lifecycle
Урок 141. 00:05:27
Input event handlers
Урок 142. 00:07:09
Check Validity Preparation
Урок 143. 00:04:53
Errors store
Урок 144. 00:03:38
Update Errors
Урок 145. 00:03:48
Random validator
Урок 146. 00:05:05
Max length validator
Урок 147. 00:05:57
Max length validator rework
Урок 148. 00:03:49
Detach validator
Урок 149. 00:03:32
Loop validators
Урок 150. 00:07:32
First uppercase validator
Урок 151. 00:04:21
Errors array
Урок 152. 00:03:31
Form Errors Component
Урок 153. 00:04:04
Pass errors as props
Урок 154. 00:05:30
More validators
Урок 155. 00:03:25
Pass custom values to validators
Урок 156. 00:08:39
Nice name function
Урок 157. 00:05:41
Submit function
Урок 158. 00:06:41
Remove form store
Урок 159. 00:07:25
Validate on submit
Урок 160. 00:08:05
Submit only when valid
Урок 161. 00:05:25
Pass form to validator
Урок 162. 00:04:34
Compare with validator
Урок 163. 00:03:52
On Input validation
Урок 164. 00:02:37
Login form validation
Урок 165. 00:09:04
Firebase Intro
Урок 166. 00:04:31
Add firebase config
Урок 167. 00:08:08
Create Users in DB
Урок 168. 00:04:49
Register callback
Урок 169. 00:03:29
Api folder
Урок 170. 00:05:03
Register user firebase
Урок 171. 00:10:22
Create user in collection
Урок 172. 00:08:08
Check auth state in callback
Урок 173. 00:06:01
Refactor auth state
Урок 174. 00:04:01
Logout user
Урок 175. 00:04:08
Login User
Урок 176. 00:04:26
Reactive redirects
Урок 177. 00:10:59
Auth Store
Урок 178. 00:07:48
Loading auth state
Урок 179. 00:06:52
Get user from Firestore
Урок 180. 00:05:50
Display user data in bottom menu
Урок 181. 00:06:34
Messenger component
Урок 182. 00:04:26
Snackbar Start
Урок 183. 00:04:02
Snackbar in context
Урок 184. 00:05:10
Snackbar Objects
Урок 185. 00:04:28
Add snackbar
Урок 186. 00:06:13
Remove snackbar
Урок 187. 00:03:18
Remove snackbar from store
Урок 188. 00:08:34
Auto hide snack
Урок 189. 00:05:17
Progress bar
Урок 190. 00:03:34
Snackbar transitions
Урок 191. 00:02:20
Snackbar on authentication
Урок 192. 00:03:51
Create glide store
Урок 193. 00:08:12
Create glide in Messenger
Урок 194. 00:03:39
Disable messenger when adding glide
Урок 195. 00:07:47
Glides API
Урок 196. 00:02:27
Try catch
Урок 197. 00:07:42
Store glide in FS
Урок 198. 00:07:09
Add new glide reactively
Урок 199. 00:02:01
Fetch glides prep
Урок 200. 00:06:44
Fetch glides
Урок 201. 00:04:19
Store glides
Урок 202. 00:05:23
Attach glide user to glide
Урок 203. 00:03:22
Data loader indicator
Урок 204. 00:07:39
Order data with constraints
Урок 205. 00:08:44
Change glides to pages
Урок 206. 00:05:00
Display Pages
Урок 207. 00:04:57
Rework add glide
Урок 208. 00:02:07
Paginated glides component
Урок 209. 00:10:17
Add treshold to load glides
Урок 210. 00:08:05
Last glide doc
Урок 211. 00:09:29
Load more glides
Урок 212. 00:07:20
Loading stop condition
Урок 213. 00:05:35
Profile page
Урок 214. 00:06:45
Page store
Урок 215. 00:05:11
Load users
Урок 216. 00:04:16
Fetch users from firestore
Урок 217. 00:04:16
User item and loading
Урок 218. 00:04:48
Fetch all but logged in user
Урок 219. 00:08:54
Follow user preparations
Урок 220. 00:09:46
Follow User Update in FS
Урок 221. 00:07:57
Filter out followed users
Урок 222. 00:04:48
Disable button while following
Урок 223. 00:07:38
Update auth user after follow
Урок 224. 00:04:41
Throw error if following user
Урок 225. 00:05:51
Remove following user from list
Урок 226. 00:02:55
Display message when no users
Урок 227. 00:13:02
Display glides from followed users
Урок 228. 00:10:48
Subscribe to new glides
Урок 229. 00:04:33
Get glide raw data
Урок 230. 00:02:13
Get glides from documents
Урок 231. 00:07:04
Store fresh glides
Урок 232. 00:03:30
Button to display more glides
Урок 233. 00:07:05
Display glides - duplicate keys
Урок 234. 00:09:56
Resub to glides
Урок 235. 00:04:11
Autosize text area
Урок 236. 00:11:24
Add Lookup
Урок 237. 00:03:49
Return lookup from extract function
Урок 238. 00:05:06
Glide detail screen
Урок 239. 00:02:13
Get route params
Урок 240. 00:05:42
Navigate to detail page
Урок 241. 00:07:22
Get glide lookup from user
Урок 242. 00:02:48
Get glide data
Урок 243. 00:04:33
Glide Id store
Урок 244. 00:03:04
Loading State in Detail
Урок 245. 00:05:44
Provide glide post and messenger
Урок 246. 00:05:21
Back Button
Урок 247. 00:05:42
Fetch subglides
Урок 248. 00:05:40
Pass glide lookup to messenger
Урок 249. 00:13:17
Add glide in correct collection
Урок 250. 00:06:00
Pass glide lookup to fetch subglides
Урок 251. 00:04:06
Fetch subglides from lookup
Урок 252. 00:03:35
Add paginated to detail page
Урок 253. 00:04:21
Increment glide count in FS
Урок 254. 00:03:14
Update subglide count in real time
Урок 255. 00:02:43
Add glide to subglides list
Урок 256. 00:06:09
Handle refetch case
Урок 257. 00:04:50
Refetch glide
Урок 258. 00:02:25
On glide loaded callback
Урок 259. 00:06:06
Reset pagination
Урок 260. 00:05:54
Subglides pagination
Урок 261. 00:04:48
Check for no glides
Урок 262. 00:05:15
Modal start
Урок 263. 00:02:08
Open modal conditionaly
Урок 264. 00:05:42
Named slot
Урок 265. 00:02:24
Opener slot
Урок 266. 00:04:46
Slot props
Урок 267. 00:03:48
Close on click outside
Урок 268. 00:04:56
Messenger and disable scroll
Урок 269. 00:09:20
Global Glide
Урок 270. 00:05:58
Global on glide posted callback.mov
Урок 271. 00:03:07
Close modal when glide posted
Урок 272. 00:03:08
Handle image selection
Урок 273. 00:07:53
Get image bytes
Урок 274. 00:07:12
Preview image
Урок 275. 00:03:56
Upload image function
Урок 276. 00:06:19
Upload image working
Урок 277. 00:06:12
Attach image to glide
Урок 278. 00:03:21
Fix issue with pagination
Урок 279. 00:08:22
Github Repo
Урок 280. 00:03:40
Deployment to Vercel
Урок 281. 00:06:33
Testing App & Finish

Автор - udemy

udemy

Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.

+197

Комментарии