Project "Drones - e-shop with drones and thermal imagers - Frontend" | Проєкт "Drones - онлайн магазин з дронами та тепловізорами - Frontend."
- Структура | Structure of the project
- Стиль написання коду | Code writing style
- Деталі роботи у команді | Details of teamwork
- Опис сторінок | Pages description
- Як встановити та запустити проєкт? | How to install and run the project?
- Висновок | Conclusion
-
Код розподіляється за логічними шарами:
- Entry points — файли, з яких починається виконання застосунку.
- assets — статичні ресурси (зображення, іконки, шрифти, звуки тощо).
- components — UI-компоненти, що використовуються для побудови сторінок.
- pages — сторінки застосунку.
- shared — перевикористовувані ресурси (UI-компоненти, хуки, типи).
- Найменування файлів
- Імена файлів формуються через крапку, відповідно до їх призначення:
component.tsxpage.tsxlayout.tsxstyles.module.css
- Стилізація
- Для стилів використовується CSS.
- Назви класів мають бути зрозумілими.
- Класи застосовуються через обʼєкт
styles:
<div className = {styles['logo-container']}></div>- Для відступів використовується один Tab (4 пробіли).
Проєкт виконувався у складі команди з двох осіб. Співпраця була побудована на взаємодопомозі та спільному пошуку рішень.
Ключові аспекти роботи:
-
Розподіл задач відбувався природньо, відповідно до поточних потреб проєкту та взаємних домовленостей.
-
Ми спільно обговорювали архітектуру, планували реалізацію та узгоджували підходи до написання коду, щоб уникнути конфліктів та забезпечити цілісність проєкту.
Незважаючи на складні умови та обмежений час, обидва учасники активно працювали над кодом, вели проєкт від початку до кінця. Завдяки спільним зусиллям, комунікації та взаємодопомозі вдалося успішно закрити дедлайн та отримати робочий результат.
Ключові навички, застосовані в командній роботі:
-
Планування та декомпозиція задач.
-
Контроль версій (Git) та вирішення конфліктів.
-
Взаємодія в парі (pair programming elements).
-
Дотримання дедлайнів.
The project was carried out as part of a two-person team. Our collaboration was built on mutual assistance and joint problem-solving.
Key aspects of the work:
- Task distribution occurred naturally, according to the project's current needs and our mutual agreements.
- We jointly discussed the architecture, planned the implementation, and agreed on coding approaches to avoid conflicts and ensure the project's integrity.
Despite challenging conditions and limited time, both team members actively worked on the code, steering the project from start to finish. Thanks to our joint efforts, communication, and mutual support, we successfully met the deadline and achieved a working result.
Key skills applied in the teamwork:
- Planning and task decomposition.
- Version control (Git) and conflict resolution.
- Pair interaction (pair programming elements).
- Meeting deadlines.
Головна сторінка | Main Page
Головна сторінка проєкту. На сторінці представлені нові та популярні товари магазину, за допомогою яких користувач може швидко та зручно дізнатися про вміст.
The project's home page. The page presents new and popular store products, allowing the user to quickly and conveniently learn about the content.
Сторінка Каталогу товарів. | Catalog Page
Сторінка каталогу товарів. Тут користувач може переглянути список доступних товарів і їхні ціни. За бажанням він може додати товар до кошика або натиснути на картку та перейти на сторінку товару.
Here the user can see the list of available products and their prices. If they want, they can add a product to the cart or click on the card to go to the product page.
Сторінка контактів магазину | Shop Contacts Page
На цій сторінці користувач може переглянути контактні дані магазину та, за бажанням, надіслати листа на електронну пошту.
On this page, the user can see the store’s contact information and, if they want, send an email message.
Сторінка "Про нас" | About Us Page
- Сторінка описує команду магазину. | The page describes the store's team.
Ми — команда фахівців, що з 2022 року постачає дрони й тепловізори для професійного, цивільного та волонтерського використання. Працюємо з перевіреною технікою, консультуємо з власного досвіду та підтримуємо клієнтів на кожному етапі — від вибору до застосування.Сторінка товару | Product Page
На цій сторінці представлена повна характеристика конкретного товару. Користувач можете додати продукт до кошика.
On this page, the full description of a specific product is presented. The user can add the product to the cart.
Сторінка замовлення | Order Page
На цій сторінці користувач оформлює замовлення через кошик. Є можливість вибору різних видів доставки і оплати.
On this page, the user places an order through the cart. There is an option to choose different delivery and payment methods.
Сторінка Кабінету | Account Page
Сторінка кабінету користувача. Тут у користувача є можливість переглянути на редагувати власні дані, змінювати кастомні адреса та переглядати замовлення.
Here the user can view and edit their personal information, change saved addresses, and see their orders.
Сторінка Not Found | Not Found Page
Сторінку не знайдено. Можливо, вона була видалена, переміщена або ви перейшли за неправильним посиланням. Перевірте адресу або поверніться на головну сторінку, щоб продовжити роботу з сайтом
Page not found. Possibly, it was removed, moved, or you went for the wrong order. Flip the address or turn to the main page to continue using the site
Сторінка реєстрації | Registration Page
Тут користувач може зареєструватися, вказавши ім’я, електронну пошту та пароль.
Here the user can register by entering their name, email, and password.
Сторінка аутентифікації | Login Page
Тут користувач може увійти до свого акаунта або скинути пароль через електронну пошту, на яку зареєстрований обліковий запис.
Here the user can log in to their account or reset the password via the email that was used for registration.
For any OS
For any OS- Перед початком переконайтесь, що на вашому компʼютері встановлено:
- Node.js (рекомендовано LTS-версію)
- Перевірка:
node -v
- Перевірка:
- Git
- Перевірка:
git --version
- Перевірка:
-
Склонуйте репозиторій з GitHub. | Clone the repository from GitHub:
git clone https://github.com/JuliaOvcharenko/DronesFront
-
Перейдіть в папку проєкту | Go to the project folder:.
cd DronesFront -
Встановіть залежності. | Install dependencies.
npm i
-
Запуск проєкту | Start the project:
npm start
-
Вітаємо! Ви локально запустили проєкт!
Done! You have successfully run the project locally.
Робота над цим проєктом стала першим досвідом створення односторінкового застосунку (SPA) з використанням бібліотеки React. Обидва учасники команди успішно опанували ключові концепції React, такі як компонентний підхід, маршрутизація, робота з хуками та управління станом на стороні клієнта.
Незважаючи на стислі терміни та виклики, пов'язані з першим знайомством з технологією, нам вдалося розробити повністю функціональний застосунок з чіткою структурою та зрозумілим інтерфейсом. Спільне проєктування архітектури, розподіл задач та постійна комунікація дозволили уникнути типових помилок новачків, таких як конфлікти в коді або порушення цілісності проєкту.
Особливу увагу було приділено організації коду: логічне розділення на шари (компоненти, сторінки, ресурси), зрозуміла система іменування файлів, використання модульних стилів. Це заклало основу для підтримуваності та масштабованості проєкту в майбутньому.
Ключовим результатом стало не лише створення робочого продукту, а й здобуття практичних навичок командної роботи в умовах реального проєкту. Ми навчилися домовлятися про єдині стандарти коду, ефективно використовувати Git для спільної роботи, вирішувати конфлікти та допомагати одне одному знаходити оптимальні рішення. Цей досвід став міцним фундаментом для подальшого професійного розвитку кожного з учасників.
Working on this project was our first experience developing a single-page application (SPA) using the React library. Both team members successfully mastered key React concepts, such as the component-based approach, routing, working with hooks, and client-side state management.
Despite the tight deadlines and the challenges associated with first getting acquainted with the technology, we managed to develop a fully functional application with a clear structure and an understandable interface. Collaborative architecture design, task distribution, and constant communication allowed us to avoid common beginner mistakes, such as code conflicts or compromising the project's integrity.
Special attention was paid to code organization: logical separation into layers (components, pages, assets), a clear file naming system, and the use of modular styles. This laid the foundation for the project's maintainability and scalability in the future.
The key outcome was not only the creation of a working product but also gaining practical teamwork skills in a real project environment. We learned to agree on unified coding standards, use Git effectively for collaboration, resolve conflicts, and help each other find optimal solutions. This experience has become a solid foundation for the future professional development of each team member.