Projekt zrealizowany w ramach kursu "Projekt zespołowy 1 - 1DI1522" oraz "Projekt zespołowy 2 - 1DI1622" na Politechnice Warszawskiej 2022/2023.
Sednem aplikacji jest możliwość kreowania dokumentów w formacie pdf na podstawie wprowadzonych danych w formularzach i wybranych szablonach spośród dostępnych. Wprowadzane przez nas dane są na bieżąco wyświetlane w podglądzie. Przygotowaliśmy w sumie 8 różnych szablonów, które różnią się względem siebie nie tylko wyglądem, ale także informacjami, które zawierają tak, by szablon był dostosowany do osobistych potrzeb. Każdy szablon ma przypisane możliwości personalizacji poprzez zmianę koloru. Każdy szablon posiada dwie wersje językowe: angielską i polską. Dodatkowo w każdym momencie możemy zmienić edytowany przez nas szablon, poprzez przygotowane przyciski zmiany szablonów zachowując przy tym wprowadzane dane w formularzu.
Prototyp graficzny:
Back-end:
- C# - ASP.NET Core Web API
- Swagger
- JWT
- PostgreSQL + Entity Framework
Front-end:
- React (m.in. react-router-dom, axios, jsPDF)
- localstorage
Konteryzacja:
- Docker
Trzy główne biblioteki do React’a, których użyliśmy w kreatorze to react-router, axios oraz jsPDF. Pierwsza React Router to biblioteka służąca do tworzenia nawigacji między widokami, wykorzystywana praktycznie we wszystkich większych aplikacjach. Druga biblioteka to Axios, która umożliwia komunikację między warstwą widoku a warstwą logiki. Pozwala na przesyłanie i odbieranie danych w protokole HTTP. Trzecią biblioteką jest jsPDF, która umożliwia generowanie plików PDF z naszych CV na podstawie podglądu na stronie.
Dodatkowo wykorzystaliśmy mechanizm localstorage, który jest dostępny w każdej nowoczesnej przeglądarce i służy do przechowywania danych otrzymywanych z API. W naszym przypadku przechowujemy w nim token JWT w celu utrzymania sesji. Dzięki temu możemy wyłączyć przeglądarkę lub zamknąć okno, a po ponownym uruchomieniu być automatycznie zalogowanym. Do implementacji tego mechanizmu wykorzystaliśmy również Context API, które pozwala na łatwe zarządzanie stanem w różnych komponentach bez konieczności przekazywania ich w sposób wodospadowy. Z tego samego powodu wykorzystaliśmy Context API do stworzenia mechanizmu dwujęzyczności aplikacji.
Zmiana szablonów, języka, koloru:
Uzupełnianie danych kontaktowych:
Uzupełnianie dalszej części informacji:
Generacja PDF:
