Analysis & Comparison
Comparative analysis of leading electronics online stores. Identification of UX patterns and architectural approaches.
Bachelor's Thesis · 2025
Development of TechVolt
Electronics Online Store
Розробка інтернет-магазину електроніки TechVolt
Research and practical implementation of a modern e-commerce solution using HTML5, CSS3 and JavaScript with a focus on UX/UI design principles, accessibility and responsiveness.
HTML5
CSS3
JavaScript
UX/UI
e-commerce
Responsive Design
Topic Relevance
The rapid growth of e-commerce in Ukraine and globally creates significant demand for quality web solutions for online retail. Research shows the e-commerce market grows 20–30% annually, confirming the relevance of developing effective online stores.
Modern consumers expect fast loading times, intuitive navigation, cross-device responsiveness and accessibility for people with disabilities. These requirements define the technical and design direction of this research.
The thesis covers the full development cycle of an e-commerce platform's client side — from architecture planning to performance optimization and SEO.
5
website pages
16
catalogue items
100%
responsive design
WCAG
accessibility standard
Research Goal
To develop and research a fully functional static electronics online store using modern web technologies.
-
Analysis of Existing Solutions
Study of leading e-commerce platforms, identifying advantages and drawbacks of existing approaches to electronics online store development.
-
Architecture Design
Development of the project structure, component interface model, and page interaction schema for the store.
-
Interface Implementation
Development of a responsive, accessible and SEO-optimized interface using HTML5, CSS3 and Vanilla JavaScript.
-
Shopping Cart Implementation
Implementation of a cart management system with state persistence via the browser's localStorage API.
-
Testing & Optimization
Cross-browser compatibility checks, code validation, performance optimization and WCAG 2.1 compliance verification.
Research Methodology
Design Thinking
Applying the Design Thinking methodology: empathy, define, ideate, prototype, test.
Iterative Development
Step-by-step feature implementation using GitHub Flow: feature branches, pull requests, code review, merge to main.
Quality Testing
HTML/CSS validation via W3C Validator, accessibility checking with axe DevTools, performance audit via Google Lighthouse.
Tech Stack
HTML5
CSS3
JavaScript ES6+
localStorage API
CSS Grid
Flexbox
CSS Custom Properties
Google Fonts
Git / GitHub
GitHub Pages
Schema.org
Open Graph
Expected Results
Fully Functional Website
Multi-page electronics online store with catalog, filtering, cart, about and contact pages.
Responsive Design
Correct display on all devices: desktop, tablet, mobile. Supports screens from 320px to 2560px.
WCAG 2.1 Accessibility
Semantic markup, ARIA attributes, keyboard navigation and screen reader support. Level AA compliance.
High Performance
Optimized code with no unnecessary dependencies. Target Lighthouse Performance Score — 90+.
SEO Optimization
Meta tags, Schema.org, Open Graph, sitemap.xml, robots.txt, semantic heading structure h1–h6.
Documentation
Detailed code documentation, README, lab reports and documented Git project history.
Contact Information
Author
University Student
University
University Name
Speciality
Computer Science