Dokumentacja Techniczna
Technical Documentation
Kompletna aplikacja webowa łącząca studenta z korepetytorem — z systemem rezerwacji lekcji, płatnościami online i dwujęzycznym interfejsem. Zbudowana na solidnym stosie technologicznym w architekturze kontenerowej.
A complete web application connecting students with a tutor — featuring a lesson booking system, online payments, and a bilingual interface. Built on a solid technology stack using a containerized architecture.
Stos technologiczny
Technology stack
Backend aplikacji oparty na Django z Django REST Framework. Obsługa modeli danych, autentykacji JWT, systemu rezerwacji, panelu administracyjnego oraz logiki biznesowej aplikacji.
Application backend based on Django with Django REST Framework. Handles data models, JWT authentication, booking system, admin panel, and all core business logic.
Frontned zbudowany w Vue 3 z Composition API i Vite jako narzędziem buildowym. Reaktywny interfejs użytkownika z dynamicznym przełączaniem widoków i obsługą stanu aplikacji przez Pinia.
Frontend built with Vue 3 using the Composition API and Vite as the build tool. Reactive user interface with dynamic view transitions and application state managed through Pinia.
Interaktywny kalendarz rezerwacji z widokami miesięcznym, tygodniowym i dziennym. Responsywny — na urządzeniach mobilnych automatycznie przełącza się na widok dzienny lub tygodniowy. Obsługuje locale pl i en.
Interactive booking calendar with monthly, weekly, and daily views. Responsive — on mobile devices it automatically switches to daily or weekly view. Supports pl and en locales.
Relacyjna baza danych dla wszystkich danych aplikacji — użytkownicy, rezerwacje, płatności, dostępność terminów. Uruchamiana jako osobny serwis w Docker Compose.
Relational database for all application data — users, bookings, payments, and available time slots. Runs as a separate service within Docker Compose.
Asynchroniczne zadania w tle: wysyłka maili z potwierdzeniami rezerwacji, przypomnień przed lekcją oraz powiadomień po odbyciu lekcji próbnej. Redis pełni rolę brokera wiadomości.
Asynchronous background tasks: sending booking confirmation emails, pre-lesson reminders, and notifications after trial lessons. Redis serves as the message broker.
Obsługa płatności online za pełne lekcje. Integracja przez Stripe Payment Intent z modelem autoryzacji karty bez natychmiastowego pobierania środków — opłata pobierana dopiero po potwierdzeniu rezerwacji.
Online payment handling for full lessons. Integrated via Stripe Payment Intent with card authorization without immediate charge — funds are captured only after booking confirmation.
Całość aplikacji uruchamiana jako zestaw kontenerów: backend Django, frontend Vue/Nginx, PostgreSQL, Redis, Celery worker. Jeden plik docker-compose.yml dla środowisk dev i produkcji.
The entire application runs as a set of containers: Django backend, Vue/Nginx frontend, PostgreSQL, Redis, and a Celery worker. A single docker-compose.yml file covers both dev and production environments.
Dwujęzyczność PL/EN w całej aplikacji. Język przechowywany w Pinia store i localStorage — przełącznik reaguje natychmiastowo bez przeładowania strony. FullCalendar automatycznie zmienia locale.
PL/EN bilingual support throughout the application. Language is stored in Pinia store and localStorage — the switcher responds instantly without page reload. FullCalendar automatically updates its locale.
Bezstanowa autentykacja oparta na tokenach JWT. Access token przechowywany w pamięci (Pinia), refresh token w httpOnly cookie. Vue Router chroni trasy wymagające logowania przez navigation guard.
Stateless authentication based on JWT tokens. Access token stored in memory (Pinia), refresh token in an httpOnly cookie. Vue Router protects auth-required routes via navigation guards.
Architektura
Architecture
Przepływ użytkownika
User flow
Rozwiązania techniczne
Technical solutions
Trasa /calendar chroniona przez meta: { requiresAuth: true }. Guard sprawdza stan Pinia store — niezalogowany użytkownik trafia na /login z parametrem redirect, po zalogowaniu wraca na właściwą stronę.
The /calendar route is protected via meta: { requiresAuth: true }. The guard checks Pinia store state — unauthenticated users are redirected to /login with a redirect parameter, then returned to the correct page after login.
Przy rezerwacji środki są blokowane na karcie studenta, ale pobierane dopiero po potwierdzeniu terminu. W razie odwołania — automatyczny zwrot bez dodatkowych działań administracyjnych.
During booking, funds are held on the student's card but only captured after slot confirmation. If cancelled, an automatic refund is issued without any manual admin action required.
Locale kalendarza jest wyliczanym computed property zależnym od languageStore. Zmiana języka w navbarze natychmiastowo aktualizuje nazwy dni, miesięcy i przycisków nawigacji bez przeładowania komponentu.
The calendar locale is a computed property dependent on languageStore. Changing the language in the navbar instantly updates day names, months, and navigation button labels without reloading the component.
Model Booking w Django przechowuje typ lekcji (trial/standard). API rezerwacji lekcji próbnej sprawdza na poziomie backendu, czy dany użytkownik nie odbył już próbnej — zabezpieczenie niezależne od frontendu.
Django's Booking model stores the lesson type (trial/standard). The trial booking API endpoint checks at the backend level whether the user has already taken a trial — protection independent of the frontend.
ResizeObserver monitoruje szerokość kontenera kalendarza. Poniżej 768px initialView przełącza się na timeGridDay — sloty mają minimalną wysokość 44px, wygodną do obsługi palcem na ekranie dotykowym.
A ResizeObserver monitors the calendar container width. Below 768px, initialView switches to timeGridDay — slots have a minimum height of 44px, comfortable for touch interaction on mobile screens.
Wysyłka maili odbywa się w tle przez Celery, żeby nie blokować odpowiedzi API. Zadania: potwierdzenie rejestracji, potwierdzenie rezerwacji, przypomnienie 24h przed lekcją, powiadomienie po lekcji próbnej.
Emails are sent in the background via Celery so they don't block API responses. Tasks include: registration confirmation, booking confirmation, 24h pre-lesson reminder, and post-trial notification.