search

DominikSk0rka / Kebapp-admin

Administrative website dealing with management of kebabs in Legnica
https://kebapp-five.vercel.app
1 stars 0 forks source link

readme

Dominik Skórka 42086 Kebapp, STRONA ADMINA

NPM Version React Version Next.js Version TypeScript Version Cypress Open Issues Closed Issues

Admin website Strona Administartora
ComfyUI Witaj w panelu administracyjnym Kebapp! Ta strona została zaprojektowana, aby ułatwić zarządzanie informacjami o kebabach w Legnicy. Znajdziesz tu wszystkie niezbędne narzędzia do dodawania, edytowania oraz usuwania kebabów, a także do przeglądania ich lokalizacji na interaktywnej mapie.
Nr Wymaganie funkcjonalne panelu administratora
1 Administrator zarządza bazą kebabów poprzez dedykowany panel administracyjny
2 Przy pierwszym logowaniu administrator musi stworzyć sobie hasło
3 Administrator widzi listę zgłoszonych sugestii i akceptuje je lub odrzuca
4 Administrator ma możliwość dodawania, edytowania i usuwania kebabów z bazy danych
5 Administrator może przeglądać szczegółowe informacje o każdym kebabie, w tym dane podstawowe i dodatkowe
6 Administrator może przeglądać i zarządzać linkami do social media dla każdego kebaba
7 Administrator może modyfikować statusy kebabów (otwarte, zamknięte, planowane)
8 Każdy kebab powinien mieć przypisane informacje podstawowe:
8.1 - Logo
8.2 - Nazwę
8.3 - Adres
8.4 - Koordynaty geograficzne
8.5 - Rok otwarcia i zamknięcia (jeżeli informacje są znane)
9 Każdy kebab powinien mieć przypisane informacje dodatkowe:
9.1 - Godziny otwarcia w poszczególnych dniach tygodnia
9.2 - Dostępne rodzaje mięs (kurczak, wołowina, baranina, falafel itp.)
9.3 - Dostępne sosy (czosnkowy, ostry itp.)
9.4 - Informację nt. statusu (punkt 3 OPZ)
9.5 - Informację, czy kebab jest "kraftowy"
9.6 - Informację, czy kebab jest ulokowany w nieruchomości, czy w "budzie"
9.7 - Informację, czy kebab jest oddziałem sieci kebabów
9.8 - Informację, jak można zamówić kebab (telefon, Pyszne, Glovo, Uber Eats, własna aplikacja/strona)

Proces Planowania Issue

Zagadnienia (issues) zostały zaimplementowane w celu efektywnego zarządzania rozwojem aplikacji Kebapp. Dzięki nim możliwe było:

Nr Issue Issue Status
1 Initialize Next.js project ✅
2 Create Admin Layout ✅
3 Create "Add kebab" view page ✅
4 Create "Map" page with Leafet ✅
5 Create a kebab management page with all the necessary components (Tabels Buttons) ✅
6 Create "Logs" view page ✅
7 Create Login form ✅
8 Create "Admin Messages" View page ✅
9 Create Edit form for kebabs ✅
10 Connected login to API ✅
12 Connect Add page to API ✅
13 Connect Manage page with API & Pagination ✅
14 Connect Map page with API ✅
15 Protect admin & logout API & create middleware ✅
16 Connect Api to log page & display logs ✅
17 Connect Edit form to API ✅
18 Connect Admin Messages page to API ✅
19 Frist Login create password ⏳
20 Perform a test with Cypress ⏳
21 Deploy website on Vercel ✅

Widok Strony Administartora

Obrazek Opis
Obrazek 1 Widok głównej strony administratora na której administrator może akceptować bądź odrzucać zgłoszone sugestie
Obrazek 2 Widok strony zarządzania kebabami
Obrazek 3 Widok formularza edycji kebaba na którym administrator może edytować wszystkie dane o kebabie
Obrazek 4 Widok mapy z zaznaczonymi kebabami z bazy danych
Obrazek 5 Widok logów, rejestrowane są operacje takie jak (Dodawanie, edytowanie, likowanie itp), zarówno na stronie jak i w aplikacji
Obrazek 5 Widok strony dodawania kebabów do bazy danych

Biblioteki i Frameworki użyte w projekcie

Biblioteka/Framework Opis Link
Next.js Framework React do budowania aplikacji renderowanych po stronie serwera. Next.js
React Biblioteka JavaScript do budowania interfejsów użytkownika. React
Leaflet Biblioteka JavaScript do interaktywnych map. Leaflet
js-cookie Prosty interfejs API JavaScript do obsługi ciasteczek. js-cookie
React Hook Form Biblioteka do zarządzania formularzami w aplikacjach React. React Hook Form
React Hot Toast Biblioteka do wyświetlania powiadomień typu toast w React. React Hot Toast
Axios Używany do wykonywania żądań HTTP do API w celu pobierania, usuwania oraz modyfikowania wiadomości. Axios
Tailwind CSS Framework CSS typu utility-first do tworzenia niestandardowych projektów. Tailwind CSS
TypeScript Używany do dodania statycznego typowania w projekcie, co pozwala na wcześniejsze wykrywanie błędów podczas kompilacji. Dzięki niemu łatwiej zarządzać typami danych, np. w hookach useState, które w tym przypadku przyjmują typy number i any[], co poprawia czytelność i bezpieczeństwo kodu. TypeScript

Testowanie

Do przeprowadzenia testów został wykorzystany Cypress

Wymagania wstępne

Aby uruchomić testy, upewnij się, że masz zainstalowane:

Instalacja

  1. Sklonuj repozytorium
  2. Przeprowadz testy w trybie headless: npx cypress run, w trype graficznym npx cypress open

image

Wdrożenie

Projekt został wdrożony na platformie Vercel, ponieważ jest to idealne rozwiązanie dla aplikacji opartych na Next.js. Vercel oferuje automatyczne wdrożenia, łatwą integrację z GitHub oraz natywną obsługę funkcji Next.js, takich jak SSR (Server-Side Rendering) i SSG (Static Site Generation). ver

Inne Repozytoria

1. Aplikacja mobilna (Kotlin) (Paweł Wyszyński 42094 & Michał Turowski 42088)

2. API (Laravel) (Kacper Preyzner 42084)

Jak uruchomić projekt

Aplikacja mobilna:

  1. Skopiuj repozytorium na swoje lokalne środowisko.
  2. Otwórz projekt w Android Studio.
  3. Zsynchornizuj wszystkie niezbędne zależności.
  4. Uruchom aplikację na emulatorze lub fizycznym urządzeniu.

API:

  1. Skopiuj repozytorium na swoje lokalne środowisko.
  2. Skonfiguruj plik .env z odpowiednimi danymi bazy danych.
  3. Zainstaluj niezbędne zależności za pomocą composer install
  4. Uruchom migracje bazy danych: php artisan migrate
  5. Uruchom serwer: php artisan serve

Strona admina:

  1. Skopiuj repozytorium na swoje lokalne środowisko.
  2. Wpisz komende npm install`
  3. Uruchom serwer w środowisku lokalnym za pomocą komendy npm run dev
  4. Wejdz na http://localhost:3000 żeby skorzystać z panelu administratora

<p align="center"">

2020 meme