Read: About project, Parcel.

Проект Filmoteka

Фінальний проект по курсу JavaScript студентів потоку Full Stack Developer (IT school GoIT).

Developers

• Julia Golban
• Iryna Kholodenko
• Rudenko Serhii
• Heorgii Rushchak
• Dima Levchenko
• Semen Slipchenko
• Roman Kashirin
• Oleksandr Nehoda
• Roman Vikulov
• Oleh Hritsenko

Підготовка проекта

• Проект зібраний за допомогою parcel-project-template.
• Для HTTP-запитів використана бібліотека axios.
• Для бекенду використовуй публічний API сервісу The Movie Database API. Отримано свій унікальний ключ доступу і ознайомилися з документацією.
• Використовується синтаксис async/await.
• Всі паршали файлів js знаходяться в папці src/js та імпортуються в index.js для підключення до сторінки index.html та library.js для підключення до сторінки library.html.
• Всі паршали файлів стилів знаходяться в папці src/sass та імпортуються в загальний index.scss для підключення до сторінок index.html та library.html.
• Зображення та інші медійні файли знаходяться в папці src/images.

Макет та API service

Макет

API з фільмів

Технічне завдання

1. Зверстати хедер головної сторінки (мобілка, планшет, робочий стіл)
2. За натисканням на логотип/кнопку "Home" відображається головна сторінка
3. Занатисканням на кнопку "My Library" відображається бібліотека користувача
4. Верстка футера (мобілка, планшет, десктоп) (однаковий для двох сторінок)
5. Зверстати шаблон картки одного фільму
6. Зверстати контейнер головної сторінки для правильного позиціонування карток фільмів (мобілка, планшет, робочий стіл)
7. Реалізувати підвантаження популярних фільмів на головну (першу) сторінку
8. Зверстати чи підключити номери сторінок (пагінація) на головній сторінці
9. При переході на кожну сторінку малювати відповідну частину фільмів
10. Реалізувати пошук та відображення фільмів за ключовим словом
11. Зверстати контейнер сторінки "My Library" для правильного позиціонування карток фільмів (мобілка, планшет, робочий стіл)
12. Зверстати хедер для сторінки "My Library" (мобілка, планшет, робочий стіл)
13. Після натискання на логотип відображається головна сторінка
14. За натисканням на кнопку "Watched" показуються переглянуті фільми користувача
15. За натисканням на кнопку "Queue" показуються фільми додані в чергу користувача
16. Зверстати шаблон модалки одного фільму (мобілка, планшет, робочий стіл)
17. Після натискання на картку фільму на будь-якій сторінці повинна відкриватися модалка з динамічно підставленою інформацією про фільм
18. За натисканням на кнопку "Add to watched" фільм додається до переглянутих фільмів поточного користувача (local-storage)
19. За натисканням на кнопку "Add to queue" фільм додається до черги поточного користувача (local-storage)
20. Реалізувати закриття модалки за натисканням на клавішу ESC і за кліком поза межами модалки, не забути зняти слухачів
21. Підключити/зверстати Loader (spinner) для асинхронних запитів
22. Реалізувати реєстрацію/автентифікацію користувача через Firebase
23. Зверстати модалку (мобілка, планшет, десктоп) з інформацією про учасників вашої команди, яка відкриватиметься натисканням на текст "GoIT Students" у футері