Бакалаврська робота · 2025

Розробка інтернет‑магазину
електроніки TechVolt

Development of TechVolt Electronics Online Store

Дослідження та практична реалізація сучасного e‑commerce рішення на основі HTML5, CSS3 та JavaScript з урахуванням принципів UX/UI дизайну, доступності та адаптивності.

HTML5 CSS3 JavaScript UX/UI e-commerce адаптивний дизайн

Дізнатись більше GitHub

Актуальність теми

Стрімкий розвиток електронної комерції в Україні та світі формує значний попит на якісні веб-рішення для онлайн-торгівлі. За даними досліджень, обсяг ринку e-commerce щороку зростає на 20–30%, що підтверджує актуальність розробки ефективних інтернет-магазинів.

Сучасний споживач очікує від онлайн-магазину швидкого завантаження, зручної навігації, адаптивності на всіх пристроях та доступності для людей з особливими потребами. Ці вимоги визначають технічний та дизайнерський напрямок дослідження.

Робота досліджує весь цикл розробки клієнтської частини e-commerce платформи — від проєктування архітектури до оптимізації продуктивності та SEO.

сторінок сайту

товарів у каталозі

100%

адаптивний дизайн

WCAG

стандарт доступності

Мета дослідження

Розробити та дослідити повнофункціональний статичний інтернет-магазин електроніки з використанням сучасних веб-технологій.

Аналіз існуючих рішень

Дослідження провідних e-commerce платформ, виявлення переваг та недоліків існуючих підходів до розробки інтернет-магазинів електроніки.
Проєктування архітектури

Розробка структури проєкту, компонентної моделі інтерфейсу та схеми взаємодії між сторінками магазину.
Реалізація інтерфейсу

Розробка адаптивного, доступного та SEO-оптимізованого інтерфейсу з використанням HTML5, CSS3 і Vanilla JavaScript.
Реалізація функціоналу кошика

Впровадження системи управління кошиком покупок із збереженням стану через localStorage браузера.
Тестування та оптимізація

Перевірка кросбраузерної сумісності, валідація коду, оптимізація швидкодії та перевірка відповідності стандартам WCAG 2.1.

Методологія дослідження

Аналіз та порівняння

Порівняльний аналіз існуючих інтернет-магазинів електроніки: Rozetka, Foxtrot, Comfy. Виявлення UX-патернів та архітектурних підходів.

Дизайн-мислення

Застосування методології Design Thinking для проєктування інтерфейсу: емпатія, визначення, генерація ідей, прототипування, тестування.

Ітеративна розробка

Покрокова реалізація функціоналу з використанням GitHub Flow: feature-гілки, pull requests, code review, злиття в main.

Тестування якості

Валідація HTML/CSS через W3C Validator, перевірка доступності через axe DevTools, аудит продуктивності через Google Lighthouse.

Технологічний стек

HTML5

CSS3

JavaScript ES6+

localStorage API

CSS Grid

Flexbox

CSS Custom Properties

Google Fonts

Git / GitHub

GitHub Pages

Schema.org

Open Graph

Очікувані результати

Повнофункціональний сайт

Багатосторінковий інтернет-магазин електроніки з каталогом, фільтрацією, кошиком та сторінками про компанію і контакти.

Адаптивний дизайн

Коректне відображення на всіх пристроях: desktop, планшет, мобільний. Підтримка екранів від 320px до 2560px.

Доступність WCAG 2.1

Семантична розмітка, ARIA-атрибути, підтримка клавіатурної навігації та скрін-рідерів. Відповідність рівню AA.

Висока продуктивність

Оптимізований код без зайніх залежностей. Цільовий показник Lighthouse Performance Score — 90+.

SEO-оптимізація

Метатеги, Schema.org, Open Graph, sitemap.xml, robots.txt, семантична структура заголовків h1–h6.

Документація

Детальна документація коду, README, звіт з лабораторних робіт та задокументована Git-історія проєкту.

Контактна інформація

Автор

Студент університету

Університет

Назва університету

Спеціальність

Комп'ютерні науки

student@university.edu

Розробка інтернет‑магазину електроніки TechVolt