1. ELARTU — Інституційний репозитарій ТНТУ імені Івана Пулюя
  2. Роботи студентів
  3. Бакалавр
  4. 122 — Компʼютерні науки (бакалаври)
霂瑞霂��撘����迨��辣: http://elartu.tntu.edu.ua/handle/lib/49617
Title: Розробка інтернет-магазину косметики Lorena засобами Next.js, Stripe, Tailwind CSS та MongoDB
Other Titles: Development of the Lorena Cosmetics Online Store Using Next.js, Stripe, Tailwind CSS, and MongoDB
Authors: Тарас, Христина Іванівна
Taras, Khrystyna Ivanivna
Affiliation: ТНТУ ім. І. Пулюя, Факультет комп’ютерно-інформаційних систем і програмної інженерії, Кафедра комп’ютерних наук, м. Тернопіль, Україна
Bibliographic description (Ukraine): Тарас Х. І. Розробка інтернет-магазину косметики Lorena засобами Next.js, Stripe, Tailwind CSS та MongoDB : робота на здобуття кваліфікаційного ступеня бакалавра : спец. 122 - комп’ютерні науки / наук. кер. Л. П. Дмитроца. Тернопіль : Тернопільський національний технічний університет імені Івана Пулюя, 2025. 82 с.
Issue Date: 28-六月-2025
Submitted date: 28-六月-2025
Date of entry: 7-七月-2025
Publisher: ТНТУ ім. І.Пулюя, ФІС, м. Тернопіль, Україна
Country (code): UA
Place of the edition/event: Тернопіль
Supervisor: Дмитроца, Леся Павлівна
UDC: 004.4
Keywords: 122
веброзробка
електронна комерція
інтернет-магазин
clerk
e-commerce
mongoDB
next.js
online store
stripe
tailwind css
web development
Page range: 82
Abstract: Кваліфікаційна робота присвячена дослідженню процесу створення сучасного інтернет-магазину косметики з використанням технологій веброзробки. У першому розділі кваліфікаційної роботи описано актуальні тенденції розвитку електронної комерції в Україні та світі. Висвітлено ключові вимоги до функціоналу сучасних онлайн-магазинів. Розглянуто аналоги та конкурентні рішення. Проаналізовано вибір технологій, необхідних для реалізації проєкту. У другому розділі кваліфікаційної роботи описано архітектуру застосунку, структуру даних, обрані технології та бібліотеки. Досліджено особливості реалізації клієнтської та адміністративної частин. Подано опис функціоналу, що забезпечує повноцінну роботу магазину. У третьому розділі кваліфікаційної роботи описано процес розгортання вебзастосунку, тестування інтерфейсу та перевірку продуктивності. Проаналізовано результати, отримані за допомогою інструментів оптимізації. Проведено перевірку на відповідність сучасним вимогам користувацького досвіду. Об’єкт дослідження: процес розробки вебзастосунку для електронної комерції. Предмет дослідження: технології створення функціонального інтернет-магазину з використанням Next.js, Tailwind CSS, MongoDB, Stripe та Clerk.
The qualification work is devoted to the study of the process of creating a modern online cosmetics store using web development technologies. The first chapter of the qualification work describes the current trends in the development of e-commerce in Ukraine and the world. The key requirements for the functionality of modern online stores are highlighted. Analogues and competitive solutions are considered. The choice of technologies required for project implementation is analyzed. The second section of the qualification work describes the application architecture, data structure, selected technologies, and libraries. The features of the client and administrative parts are investigated. A description of the functionality that ensures the full operation of the store is provided. The third chapter of the qualification work describes the process of deploying the web application, testing the interface, and checking its performance. The results obtained with the help of optimization tools are analyzed. The results obtained with the help of optimization tools are analyzed. Object of research: the process of developing a web application for e-commerce. The subject of research: technologies for creating a functional online store using Next.js, Tailwind CSS, MongoDB, Stripe, and Clerk
Description: Роботу виконано на кафедрі комп'ютерних наук Тернопільського національного технічного університету імені Івана Пулюя. Захист відбудеться 28.06.2025р. на засіданні екзаменаційної комісії №30 у Тернопільському національному технічному університеті імені Івана Пулюя
Content: ВСТУП 10 РОЗДІЛ 1. АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ПОСТАНОВКА ЗАВДАННЯ НА РОЗРОБКУ ІНТЕРНЕТ-МАГАЗИНУ КОСМЕТИКИ LORENA 11 1.1 Аналіз ринку інтернет-магазинів косметики та їх функціональних вимог 11 1.1.1 Сучасні тенденції у сфері електронної комерції косметики 11 1.1.2 Функціональні вимоги до сучасних e-commerce рішень 12 1.1.3 Роль адміністративної панелі в управлінні інтернет-магазином 14 1.2 Аналітичний огляд існуючих інтернет-магазинів косметики 15 1.3 Постановка завдання розробки інтернет-магазину косметики з адміністративною панеллю 18 1.3.1 Область застосування та призначення розробки інтернет-магазину Lorena 18 1.3.2 Вимоги до функціоналу сайту інтернет-магазину Lorena 19 1.3.3 Стадії та етапи розробки інтернет-магазину 20 1.4 Вибір та обґрунтування використаних технологій 22 1.4.1 Обґрунтування вибору фреймворку Next.js 22 1.4.2 Використання Tailwind CSS для UI 23 1.4.3 Вибір MongoDB в якості бази даних для інтернет-магазину 24 1.4.4 Інтеграція з платіжною системою Stripe 25 1.4.5 Обґрунтування використання Clerk для автентифікації 26 1.5 Висновок до першого розділу 27 РОЗДІЛ 2. ПРОЕКТУВАННЯ ТА РЕАЛІЗАЦІЯ ІНТЕРНЕТ-МАГАЗИНУ LORENA 29 2.1 Технологічні та архітектурні основи побудови вебзастосунку Lorena 29 2.1.1 Загальний опис архітектури інтернет-магазину 29 2.1.2 Структура файлової системи проекту 30 2.1.3 Бібліотеки, використані для розробки клієнтської частини проєкту 33 2.1.4 Бібліотеки, використані для розробки адміністративної частини проєкту 34 2.2 Моделювання бази даних 36 2.3 Реалізація функціональності клієнтської частини інтернет-магазину 38 2.3.1 Реєстрація користувачів та їх авторизація у системі 38 2.3.2 Структура головної сторінки та навігаційного меню 42 2.3.3 Додавання товарів у список бажань та перегляд сторінки продукту 44 2.3.4 Додавання товарів у кошик, оформлення та оплата замовлення 47 2.4 Огляд функціоналу адміністративної частини інтернет-магазину 50 2.4.1 Реєстрація користувачів та їх авторизація у системі 50 2.4.2 Інформаційна панель адміністратора 51 2.4.3 Управління колекціями та додавання нових товарів 52 2.4.4 Управління замовленнями та клієнтами 55 2.5 Огляд дизайну інтернет-магазину Lorena 57 2.5.1 Кольорова схема інтернет-магазину та логотипи 57 2.5.2 Розробка адаптивного дизайну за допомогою Tailwind CSS 59 2.6 Висновок до другого розділу 61 РОЗДІЛ 3. ПРАКТИЧНА РЕАЛІЗАЦІЯ ТА ТЕСТУВАННЯ ІНТЕРНЕТ-МАГАЗИНУ LORENA 62 3.1 Розгортання інтернет-магазину в Інтернеті 62 3.2 Валідація й тестування функціональності інтернет-магазину 63 3.2.1 Валідація розмітки інтерфейсу та форм 63 3.2.2 Перевірка інтернет-магазину на кросбраузерність і тестування його швидкості 64 3.3 Підтримка та подальший розвиток інтернет-магазину Lorena 66 3.4 Висновок до третього розділу 66 РОЗДІЛ 4. БЕЗПЕКА ЖИТТЄДІЯЛЬНОСТІ, ОСНОВИ ОХОРОНИ ПРАЦІ 68 4.1 Психологічні чинники небезпеки 68 4.2 Загальні вимоги безпеки з охорони праці для користувачів ПК 70 4.3 Висновок до четвертого розділу 72 ВИСНОВКИ 73 ПЕРЕЛІК ДЖЕРЕЛ 75 ДОДАТКИ
URI: http://elartu.tntu.edu.ua/handle/lib/49617
Copyright owner: © Тарас Христина Іванівна, 2025
References (Ukraine): 1. Online Cosmetics Market Size & Share Analysis - Growth Trends & Forecasts (2025 - 2030). Mordor Intelligence. [Електронний ресурс]. Режим доступу до ресурсу: https://www.mordorintelligence.com/industry-reports/online-cosmetics-market?.
2. The Beauty Category’s Dynamic Growth: A 2024 Mid-Year Update. NIQ. [Електронний ресурс]. 09.08.2024. Режим доступу до ресурсу: https://nielseniq.com/global/en/insights/commentary/2024/beauty-2024-mid-year-update/?
3. Струтинська, І. В., Дмитроца, Л. П., Сороківська, О. А., & Козбур, Г. В. (2024). Особливості цифрового розвитку малого і середнього бізнесу України, країн Європи та G7. In Трансформація бізнесу для сталого майбутнього: дослідження, цифровізація та інновації: монографія (pp. 411-427). : ФОП Паляниця В. А.
4. Beauty E-commerce Trends 2024: A Comprehensive Guide for Founders and Marketing Leaders. Peel. [Електронний ресурс]. 24.02.2025. Режим доступу до ресурсу: https://www.peelinsights.com/post/beauty-e-commerce-trends-2024-a-comprehensive-guide-for-founders-and-marketing-leaders?.
5. Струтинська, І. В., Дмитроца, Л. П., Козбур, Г. В., & Дмитрук, У. І. (2020). Ключові фактори, що сприяють розвитку цифрової економіки. Тези доповідей міжнародної науково-практичної конференції „Цифрова економіка як фактор інноваційного розвитку суспільства “, 43-45.
6. Струтинська, І. В., & Мельник, В. О. (2022). Роль автоматизованих систем керування замовленнями. Матеріали ⅩⅠ Міжнародної науково-практичної конференції молодих учених та студентів „Актуальні задачі сучасних технологій “, 133-134.
7. Moskvichova A. 30 Major Requirements for Ecommerce Websites: Checklist to Start a Store. Digitalsuits. [Електронний ресурс]. 20.08.2024. Режим доступу до ресурсу: https://digitalsuits.co/blog/10-major-requirements-for-e-commerce-website/?.
8. Shah P. E-Commerce System Requirements: A Comprehensive Guide. DhiWise. [Електронний ресурс]. 25.03.2025. Режим доступу до ресурсу: https://www.dhiwise.com/blog/requirement-builder/ecommerce-system-requirements.
9. Marzal R. Key Metrics to Track on Your Ecommerce Dashboard. NextScenario. [Електронний ресурс]. Режим доступу до ресурсу: https://nextscenario.com/ecommerce-dashboard/.
10. Shvetsova Y. Functional and Non-Functional Requirements of Online Shopping System: List & Examples. Elogic. [Електронний ресурс]. 08.06.2023. Режим доступу до ресурсу: https://elogic.co/blog/functional-and-non-functional-requirements-for-ecommerce-websites/?.
11. Pattamatta R. Ecommerce Admin Dashboard: Key Features, Benefits, and Best Practices. Databrain. [Електронний ресурс]. 08.05.2025. Режим доступу до ресурсу: https://www.usedatabrain.com/blog/ecommerce-admin-dashboard?.
12. Alferez A. Unveiling the Power of Admin Panels: A Comprehensive Guide. Ecommerce Next. [Електронний ресурс]. 26.08.2024. Режим доступу до ресурсу: https://www.ecommercenext.org/unveiling-the-power-of-admin-panels-a-comprehensive-guide/.
13. Kirvan P. What is a Waterfall model? Definition and guide. TechTarget. [Електронний ресурс]. 24.11.2024. Режим доступу до ресурсу: https://www.techtarget.com/searchsoftwarequality/definition/waterfall-model.
14. Jaja D. Routing in Next.js – How to Use App Router in your Next Apps. FreeCodeCamp. [Електронний ресурс]. 24.08.2023. Режим доступу до ресурсу: https://www.freecodecamp.org/news/routing-in-nextjs/.
15. Garg R. Next.js: The Ultimate Guide to SSR and SSG in React. Medium. [Електронний ресурс]. 07.07.2023. Режим доступу до ресурсу: https://medium.com/womenintechnology/next-js-the-ultimate-guide-to-ssr-and-ssg-in-react-245598d765c3.
16. Прус О. Next.js чи Angular: який фреймворк обрати замовнику для розробки?. Wezom. [Електронний ресурс]. 11.11.2024. Режим доступу до ресурсу: https://wezom.com.ua/ua/blog/author/aleksandr-prus.
17. Wili Rahmat M. How to deploy Next.js to Vercel with CI/CD Integration. Medium. [Електронний ресурс]. 12.05.2023. URL: https://medium.com/@wilirahmatm/how-to-deploy-next-js-to-vercel-with-ci-cd-integration-c2645cb77ff0.
18. Готович, В. А., & Мачужак, А. В. (2022). Застосування методології CI/CD для автоматизації процесів тестування та розгортання програмного забезпечення. Матеріали ⅩⅠ Міжнародної науково-практичної конференції молодих учених та студентів „Актуальні задачі сучасних технологій “, 131-132.
19. Sytnyk D. Використання CORS в Next.js для обробки cross-origin запитів. Medium. [Електронний ресурс]. 09.07.2023. Режим доступу до ресурсу: https://medium.com/@dmitry.sytnyk/%D0%B2%D0%B8%D0%BA%D0%BE%D1%80%D0%B8%D1%81%D1%82%D0%B0%D0%BD%D0%BD%D1%8F-cors-%D0%B2-next-js-%D0%B4%D0%BB%D1%8F-%D0%BE%D0%B1%D1%80%D0%BE%D0%B1%D0%BA%D0%B8-cross-origin-%D0%B7%D0%B0%D0%BF%D0%B8%D1%82%D1%96%D0%B2-d8fe2f8eae8a.
20. Hernandez I. Tailwind Vs. Bootstrap: Який CSS фреймворк вам потрібен?. DreamHost. [Електронний ресурс]. 29.05.2024. Режим доступу до ресурсу: https://www.dreamhost.com/blog/uk/tailwind-proti-bootstrap/.
21. Introduction to Tailwind CSS. GeeksForGeeks. [Електронний ресурс]. 07.10.2024. Режим доступу до ресурсу: https://www.geeksforgeeks.org/introduction-to-tailwind-css/.
22. Тарас Х. Дизайнерські компетенції програміста у контексті використання Tailwind CSS. VIII Міжнародна студентська науково-технічна конференція «Природничі та гуманітарні науки. Актуальні питання»., Тернопіль. Тернопільський національний технічний університет ім. І.Пулюя (м.Тернопіль, 24–25 квіт. 2025 р.), 2025. С. 204–206.
23. Bhaskar V. Tailwind CSS Best Practices for Performance Optimization. TailGrids. [Електронний ресурс]. 09.04.2025. Режим доступу до ресурсу: https://tailgrids.com/blog/tailwind-css-best-practices-and-performance-optimization.
24. Singh N. Understanding the Variances Between JSON and BSON in MongoDB. Medium. [Електронний ресурс]. 29.12.2023. Режим доступу до ресурсу: https://medium.com/@navneetskahlon/understanding-the-variances-between-json-and-bson-in-mongodb-258b39c169f7.
25. Kristbergsson E. S. The MongoDB and Next.js Stack for Beginners. Medium. [Електронний ресурс]. 09.01.2024. Режим доступу до ресурсу: https://medium.com/stackademic/the-mongodb-and-next-js-stack-for-beginners-b4394872f5bb.
26. Prisma ORM MongoDB database connector. Prisma /docs. [Електронний ресурс]. Режим доступу до ресурсу: https://www.prisma.io/docs/orm/overview/databases/mongodb.
27. Ramanayake B. What you need to know about MongoDB Atlas ?. Medium. [Електронний ресурс]. 08.07.2023. Режим доступу до ресурсу: https://medium.com/@bdhanushka65/what-you-need-to-know-about-mongodb-atlas-b4743727e7f1.
28. Stripe: найдорожча фінтех-компанія у Кремнієвій долині. Blog.imena.ua. [Електронний ресурс]. 05.06.2024. Режим доступу до ресурсу: https://www.imena.ua/blog/stripe/.
29. Security at Stripe. Stripe Docs. [Електронний ресурс]. Режим доступу до ресурсу: https://docs.stripe.com/security.
30. Nyabuto, M. G. M., Mony, V., & Mbugua, S. (2024). Architectural review of client-server models. International journal of scientific research and engineering trends, 10(1), 139-143.
31. Ansari K. Next.js App Router: Routing. Medium. [Електронний ресурс]. 19.04.2024. Режим доступу до ресурсу: https://medium.com/@kulsumansari4/next-js-app-router-routing-8d795dbe324c.
32. Salnik R. Опановуємо CRUD в Next.js. Поради для інтеграції та оптимізації. DOU.UA. [Електронний ресурс]. 17.12.2024. Режим доступу до ресурсу: https://dou.ua/forums/topic/51587/.
33. Колесніков Д. Що таке фреймворк: пояснюємо простими словами. Brainlab. [Електронний ресурс]. 02.03.2023. Режим доступу до ресурсу: https://brainlab.com.ua/uk/blog-uk/shho-take-frejmvork-poyasnyuyemo-prostymy-slovamy.
34. Колесніков Д. Що таке фреймворк: пояснюємо простими словами. Brainlab. [Електронний ресурс]. 02.03.2023. Режим доступу до ресурсу: https://brainlab.com.ua/uk/blog-uk/shho-take-frejmvork-poyasnyuyemo-prostymy-slovamy.
35. Rashkovits, R., & Lavy, I. (2021). Mapping common errors in entity relationship diagram design of novice designers. International Journal of Database Management Systems, 13(1), 1-19.
36. Shwetha, H., Prajwal, D., & Sridharan, S. (2024, April). From MongoDB to React: Unleashing the Power of MERN in E-commerce. In 2024 International Conference on Emerging Technologies in Computer Science for Interdisciplinary Applications (ICETCS) (pp. 1-6). IEEE.
37. <UserButton /> component. Clerk Docs. [Електронний ресурс]. Режим доступу до ресурсу: https://clerk.com/docs/components/user/user-button.
38. Nousiainen, A. (2024). The potential of WebAssembly in Edge Computing.
39. Gulshan N. Streamlining Your Code: Top Online HTML Validators for Web Developers. Medium. [Електронний ресурс]. 18.09.2023. Режим доступу до ресурсу: https://medium.com/@gulshan_n/streamlining-your-code-top-online-html-validators-for-web-developers-49182f1e2d5c.
40. Дмитроца, Л. П., & Старицький, О. Т. (2024). Оптимізація продуктивності та SEO при масштабуванні проєктів на основі React і Next. js. Збірник тез доповідей ⅩⅢ Міжнародної науково-практичної конференції молодих учених та студентів „Актуальні задачі сучасних технологій “, 465-466.
41. Безпека життєдіяльності: підручник / за ред. В. Г. Беспалька. – К.: Центр учбової літератури, 2012. – 384 с.
42. Золотарьова І. М. Психологія безпеки: навч. посіб. – Харків: НУЦЗУ, 2018. – 164 с.
43. Козяр М. М. Психологічні основи формування безпечної поведінки людини / М. М. Козяр // Вісник ЛНУ ім. Івана Франка. Серія: Психологія. – 2019. – № 6. – С. 112–118.
44. Яковлєв Є. О. Людський фактор в системі безпеки праці / Є. О. Яковлєв // Науковий вісник УкрДУЗТ. – 2020. – № 192. – С. 85–91.
45. Стельмах Л. В. Психологічні аспекти небезпеки в професійній діяльності / Л. В. Стельмах // Безпека життєдіяльності. – 2017. – № 2. – С. 21–25.
46. Гелетій М. М. Основи охорони праці: підручник / М. М. Гелетій, М. П. Лапчук, І. М. Гнатюк. – Львів: Новий Світ – 2000, 2020. – 352 с.
47. ДСТУ 8604:2015. Дизайн і ергономіка. Робоче місце для виконання робіт у положенні сидячи. Загальні ергономічні вимоги. – [Чинний від 01.07.2017]. – К.: ДП «УкрНДНЦ», 2017. – 10 с.
48. ДСТУ EN ISO 9241-5:2018. Ергономіка взаємодії людини і системи. Частина 5. Вимоги до робочих місць із дисплеями інформації. – К. : ДП «УкрНДНЦ», 2018. – 28 с.
49. ДСТУ 4196:2003. Освітлення робочих місць. Норми та методи вимірювань. – К. : ДП «УкрНДНЦ», 2003. – 22 с.
50. НПАОП 0.00-4.10-18. Організація робочих місць: загальні положення. – К., 2018. – 40 с.
51. Литвиненко О. М. Ергономіка та охорона праці при роботі з ПК / О. М. Литвиненко. – Харків: ХНАМГ, 2020. – 180 с.
52. Правила улаштування електроустановок (ПУЕ). – Харків: Видавництво ,,Форт,,, 2017. 760 с.
Content type: Bachelor Thesis
�蝷箔����:122 — Компʼютерні науки (бакалаври)

��辣銝剔�﹝獢�:
獢�獢� ��膩 憭批���撘� 
2025_KRB_SN-43_Taras_KI.pdfДипломна робота3,47 MBAdobe PDF璉�閫�/撘��
�蝷箸�辣摰蝥芸��


�DSpace銝剜�������★��������雿��.

蝞∠�極�