- Мета створення проєкту | Purpose of the Project
- Навігація | Navigation on README:
- Команда | Team
- Технології | Technologies
- Дизайн | Design
- Структура | Structure of the project
- Функціонал кожного з додатків | Functionality of each application
- Як встановити та запустити проєкт? | How to install and run the project?
- Висновок | Conclusion
Мета створення проєкту — розробити веб-додаток для онлайн-генерації QR-кодів із системою користувацьких акаунтів та підписок. Користувачі мають можливість створювати, кастомізувати, зберігати та керувати QR-кодами, які прив’язані до їхнього профілю.
У проєкті реалізовано три тарифні плани (Free, Standart, Pro), що відрізняються кількістю доступних QR-кодів і терміном їх дії. Після завершення підписки окремі QR-коди стають недоступними для використання.
Проєкт включає розробку дизайну в Figma, адаптивну верстку, систему реєстрації та авторизації з підтвердженням email, можливість кастомізації QR-кодів (розмір, колір, логотип), сторінку керування створеними кодами з фільтрацією, а також систему керування підписками з імітацією оплати.
Веб-додаток реалізовано з використанням Django та сучасних веб-технологій і він демонструє архітектурні рішення, які можуть бути застосовані у масштабніших комерційних проєктах.
Project goal is to develop an online QR code generator with an account and subscription system. Users can generate, customize, store, and manage QR codes linked to their profiles. The system supports three subscription plans (Free, Standard, Pro) with limits on the number of QR codes and their availability period. After a subscription expires, some QR codes become inaccessible.
The project includes UI/UX design in Figma, responsive layout, user authentication with email confirmation, QR code customization (size, color, logo), filtering and management of created codes, and subscription management with simulated payments.
The application is built using Django and modern web technologies and is designed to demonstrate architectural, UI, and backend solutions applicable to larger commercial projects.
Прим. Частину дизайн-артефактів проєкту було безповоротньо видалено з початкового репозиторію одним із колишніх учасників команди. Це рішення було ухвалене одноосібно, без попереднього обговорення, що призвело до втрати частини історії та напрацювань проєкту.
Lost Artifacts Some design artifacts of the project were permanently removed from the original repository by a former team member. This decision was made unilaterally, without prior discussion, resulting in the loss of part of the project’s history and design materials.
graph TB;
A[QRcodeMaker]
subgraph QRcodeMaker
B[QRcodeMaker]
B --> B1[__init__.py]
B --> B2[asgi.py]
B --> B3[settings.py]
B --> B4[urls.py]
B --> B5[wsgi.py]
end
subgraph core
C[core]
C --> C1[__init__.py]
C --> C2[admin.py]
C --> C3[apps.py]
C --> C4[tests.py]
C --> C5[urls.py]
C --> C6[vies.py]
end
subgraph qrcode_app
D[qrcode_app]
D --> D1[__init__.py]
D --> D2[admin.py]
D --> D3[apps.py]
D --> D4[models.py]
D --> D5[tests.py]
D --> D6[urls.py]
D --> D7[views.py]
end
subgraph user
E[user]
E --> E1[__init__.py]
E --> E2[admin.py]
E --> E3[apps.py]
E --> E4[models.py]
E --> E5[tests.py]
E --> E6[urls.py]
E --> E7[views.py]
end
A --> QRcodeMaker
A --> core
A --> qrcode_app
A --> user
style B fill:#ffdddd,stroke:#ff5555,stroke-width:2px;
У цьому додатку зосереджено основні сторінки системи, зокрема головна сторінка та сторінка контактів. На головній сторінці користувачі можуть переглядати та змінювати свій тарифний план. Сторінка контактів надає можливість надсилати повідомлення зворотного зв’язку до служби підтримки.
Переглянути структуру та логіку додатку
This application contains the main pages of the system, including the Home page and the Contacts page. On the Home page, users can view and manage their subscription plans. The Contacts page allows users to send feedback messages to the support team.
View application structure and logic
Цей додаток відповідає за створення, відображення та видалення QR-кодів. Усі згенеровані QR-коди прив’язуються до користувача та керуються відповідно до його підписки.
Переглянути структуру та логіку додатку
This application is responsible for creating, displaying, and deleting QR codes. It handles all QR code–related functionality, including linking QR codes to users and managing their lifecycle.
View application structure and logic
У цьому додатку реалізовано реєстрацію та авторизацію користувачів. Він забезпечує безпечний доступ до функціоналу системи через механізми входу та керування сесіями.
Переглянути структуру та логіку додатку
This application manages user registration and authentication. It includes login, signup, and session handling to ensure secure access to the system.
View application structure and logic
Для Windows | For Windows
Для Windows | For Windows- 1️⃣ Завантажте та налаштуйте Python: Перейдіть на офіційний сайт Python, знайдіть вкладку "Downloads" і завантажте версію Python відповідно до вашої операційної системи. Під час налаштування обов’язково оберіть опцію "Add python.exe to PATH".
- 1️⃣ Download and install Python: Go to the official Python website, open the "Downloads" tab, and download the Python version for your operating system. When installing, make sure to check the box that says "Add python.exe to PATH".
- 2️⃣ Завантажте та налаштуйте Git: Перейдіть на офіційний сайт Git і завантажте версію Git відповідно до вашої операційної системи.
- 2️⃣ Download and install Git: Go to the official Git website and download the version of Git for your operating system.
- 3️⃣ Завантажте та налаштуйте Visual Studio Code: Перейдіть на офіційний сайт Visual Studio Code
- 3️⃣ Download and install Visual Studio Code: Go to the official Visual Studio Code website and download the version for your operating system.
- 4️⃣ Відкрийте Visual Studio Code, створіть або відкрийте необхідну папку в якій буде знаходитися проєкт.
-
4️⃣ Open Visual Studio Code, then create or open the folder where your project will be.
-
Відкрийте термінал, оберіть "Git Bash"
-
Open the terminal and choose "Git Bash"
-
Скопіюйте команду у відкритий термінал:
-
Copy the command into the open terminal:
git clone https://github.com/JuliaOvcharenko/QRcodeMaker
Перейдіть до папки з проектом | Go to the project folder.
cd QRcodeMakerЗавантажте залежності
pip install -r requirements.txt
Перейдіть до головної папки сайту
cd QRcodeMakerЗапустіть скрипт через manage.py
python manage.py runserver
-
Для MacOS | For MacOS
Для MacOS | For MacOS- 1️⃣ Завантажте та налаштуйте Python: Перейдіть на офіційний сайт Python, знайдіть вкладку "Downloads" і завантажте версію Python відповідно до вашої операційної системи. Під час налаштування обов’язково оберіть опцію "Add python.exe to PATH".
- 1️⃣ Download and install Python: Go to the official Python website, open the "Downloads" tab, and download the Python version for your operating system. When installing, make sure to check the box that says "Add python.exe to PATH".
- 2️⃣ Завантажте та налаштуйте Git: Перейдіть на офіційний сайт Git і завантажте версію Git відповідно до вашої операційної системи.
- 2️⃣ Download and install Git: Go to the official Git website and download the version of Git for your operating system.
- 3️⃣ Завантажте та налаштуйте Visual Studio Code: Перейдіть на офіційний сайт Visual Studio Code
- 3️⃣ Download and install Visual Studio Code: Go to the official Visual Studio Code website and download the version for your operating system.
- 4️⃣ Відкрийте Visual Studio Code, створіть або відкрийте необхідну папку в якій буде знаходитися проєкт.
-
4️⃣ Open Visual Studio Code, then create or open the folder where your project will be.
- Відкрийте термінал, оберіть "Git Bash"
- Open the terminal and choose "Git Bash"
-
Скопіюйте команду у відкритий термінал:
-
Copy the command into the open terminal:
git clone https://github.com/JuliaOvcharenko/QRcodeMaker
- Встановіть необхідні бібліотеки в віртуальне оточення з файлу requirements.txt
-
Install the required libraries into the virtual environment from the requirements.txt file
pip install -r requirements.txt
-
Перейдіть у папку QRcodeMaker, в якій знаходиться файл manage.py якщо ви не там
-
Go to the folder social_network where the manage.py file is, if you are not there yet
cd QRcodeMaker
- Проведіть міграції ___ - Run the migrations ```sh python3 manage.py migrate- Запустіть сервер
-
Run the project
python3 manage.py runserver
- Натисніть на посилання
- Click on link
-
5️⃣ Вітаємо! Ви локально запустили проєкт!
- 5️⃣ Congratulations! You have successfully run the project locally!
У процесі виконання проєкту було розроблено веб-додаток «QRcodeMaker», який забезпечує повний цикл роботи з QR-кодами — від їх створення та кастомізації до збереження й управління доступом на основі підписки. Реалізовано систему користувацьких акаунтів із підтвердженням електронної пошти, адаптивний дизайн інтерфейсу та зручну навігацію між основними сторінками застосунку.
Під час розробки було застосовано сучасні технології веб-програмування, зокрема Django, HTML, CSS, JavaScript, а також інструменти проєктування інтерфейсів Figma. Проєкт дозволив поглибити знання з архітектури веб-додатків, роботи з базами даних, реалізації бізнес-логіки підписок і принципів UI/UX-дизайну.
Створений продукт може бути використаний як основа для подальшого розвитку, зокрема підключення реальних платіжних систем, розширення можливостей кастомізації QR-кодів та впровадження аналітики використання. Отриманий досвід є цінним для реалізації більш складних комерційних веб-рішень.
The QRcodeMaker project demonstrates a full-cycle development of a modern web application, combining UI/UX design, frontend implementation, backend logic, and system architecture. It integrates essential features such as user authentication, subscription management, QR code generation, customization, storage, and access control based on subscription status.
The project not only focuses on functionality but also emphasizes scalability, clean architecture, and real-world development practices. By using Django and modern web technologies, the application models solutions that are applicable to larger commercial platforms and SaaS systems.
This project helped develop practical skills in teamwork, version control with GitHub, system design, API integration, and full-stack development. It serves as a strong foundation for future projects involving digital services, subscription-based platforms, and complex web applications, demonstrating both technical competence and structured development workflow.