Merge pull request #26 from Qwizi/raport

Raport
Qwizi · Jun 20, 2024 · 7fa4cad · 7fa4cad
2 parents f1d5692 + 8ccae3c
commit 7fa4cad
Show file tree

Hide file tree

Showing 9 changed files with 140 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,40 @@
 # DealHub
+![PyPI - Python Version](https://img.shields.io/pypi/pyversions/Django)
+[![Create Release](https://github.com/Qwizi/DealHub/actions/workflows/release.yml/badge.svg)](https://github.com/Qwizi/DealHub/actions/workflows/release.yml)
+[![Publish Backend Docker image](https://github.com/Qwizi/DealHub/actions/workflows/docker.yml/badge.svg)](https://github.com/Qwizi/DealHub/actions/workflows/docker.yml)
 
 DealHub is a a web application that allow users to post deals on products and services.
 
+Build with
+- Django
+- DaisyUI
+- HTMX
+- Postgres
+- Docker
+
+## Live Demo
+[DealHub](https://dealhub.qwizi.ovh/)
+
+## Installation
+
+- ### Linux
+   #### Prerequisites
+  - Docker
+  - Curl
+
+   ```bash
+   curl -fsSL https://raw.githubusercontent.com/Qwizi/DealHub/master/scripts/install.sh | bash
+   ```
+
+- ### Windows (Powershell)
+   #### Prerequisites
+   - Docker Desktop
+
+   ```powershell
+   Invoke-Expression ((New-Object System.Net.WebClient).DownloadString("https://raw.githubusercontent.com/Qwizi/DealHub/master/scripts/install.ps1"))
+   ```
+
+
 ## Getting Started
 
 These instructions will get you a copy of the project up and running on your local machine for development and testing
@@ -88,20 +121,10 @@ purposes.
     ```shell
     ./scripts/run.sh
     ```
+### ShowCase
+![image 1](https://i.imgur.com/hEeWnNu.png)
+![image 2](https://i.imgur.com/kGsBR7j.png)
+![image 3](https://i.imgur.com/tM1HFvB.png)
 
-## Installation
-
-- ### Linux
-   ### Prerequisites
-  - Docker
-  - Curl
-
-   ```bash
-   curl -fsSL https://raw.githubusercontent.com/Qwizi/DealHub/master/scripts/install.sh | bash
-   ```
-
-- ### Windows (Powershell)
-
-```powershell
-Invoke-Expression ((New-Object System.Net.WebClient).DownloadString("https://raw.githubusercontent.com/Qwizi/DealHub/master/scripts/install.ps1"))
-```
+## Legal info
+© Copyright by Adrian Ciołek (@Qwizi), Mateusz Cyran (@Kuis03), Kamil Duszyński (@VirdisPl), Dawid Dymek (@dawiddymek1108), Nikodem Decewicz (Szimurka).
diff --git a/raport.md b/raport.md
@@ -0,0 +1,62 @@
+## Raport z Wykonania Projektu Portal ogłoszeniowy z systemem ocen i recenzji.
+
+## Cel Projektu
+DealHub to aplikacja internetowa, która pozwala użytkownikom publikować oferty dotyczące produktów i usług oraz daje możliwosc oceniania i recenzowania tych ofert.
+
+## Opis Projektu
+- Nazwa projektu: DealHub
+- Autorzy: Adrian Ciołek, Mateusz Cyran, Kamil Duszyński, Nikodem Decewicz, Dawid Dymek
+- Repozytorium: [DealHub](https://github.com/Qwizi/DealHub/)
+- Licencja: MIT
+
+## Technologie
+- Python 3.10+
+- Django
+- Django Allauth
+- Docker
+- PostgresSQL
+- HTMX
+- DaisyUI
+
+## Funkcjonalności
+- Rejestracja i logowanie użytkowników.
+- Dodawanie oraz wyświetlanie ofert.
+- Ocena i recenzja ofert.
+- Prowizoryczne "kupowanie" danego przedmotu z oferty.
+- **Łatwa instalacja aplikacji** wystarczy jedna komenda w terminalu aby uruchomic caly projekt :)
+
+## Realizacja
+Projekt został zrealizowany z wykorzystaniem frameworka Django. 
+Użyliśmy również biblioteki django Allauth do szybiej i prostej autoryzacji użytkownikow (logowanie/rejestracja).
+Do stworzenia interfejsu użytkownika użyliśmy HTMX oraz DaisyUI.
+Do przechowywania danych użyliśmy bazy danych PostgresSQL.
+Aplikacja została podzielona na moduły, które odpowiadają za konkretne funkcjonalności. Wszystkie moduły są ze sobą połączone i współpracują ze sobą. 
+Aplikacja została zaprojektowana w taki sposób, aby była łatwa w rozbudowie i modyfikacji oraz utworzony został skrypt instalacyjny w bashu, który pozwala na uruchomienie aplikacji w jednej komendzie.
+Zastosowalismy również bardzo przydatne github actions, które np. aktualizuja automatycznie wersja aplikacji, tworzą nowe release'y oraz buduja obraz dockera i wrzucaja go na dockerhub.
+
+## Napotkane Problemy
+- Problemy z instalacja poetry na windowsie.
+- Wiekszość z nas pierwszy raz korzystała z wyżej wymienionych technologii.
+- Troche problemow z deployem na serwer gdzie znajduje sie instancja coolify.
+
+## Propozycje Rozwoju
+- Zaimplementowanie płatności.
+- Dodanie możliwości komentowania recenzji.
+- Dodanie możliwości dodawania zdjęć do ofert zamiast linków.
+- Dodanie możliwości dodawania ofert do ulubionych.
+- Dodanie możliwości edycji ofert.
+- Wyswietlanie zakupionych ofert w panelu użytkownika.
+- Stworzenie panelu użytkownika mozliwoscia podgladu hisotrii zakupow oraz dodawania ofert.
+- Doddanie proponowanych ofert na podstawie ocen i recenzji.
+- Napisanie testów jednostkowych oraz integracyjnych.
+
+## Źródła
+- [Django docs](https://docs.djangoproject.com/en/5.0/)
+- [Django Allauth docs](https://docs.allauth.org/en/latest/)
+- [DaizyUI docs](https://daisyui.com/docs/install/)
+- [HTMX docs](https://htmx.org/docs/)
+- [TailwindCSS docs](https://tailwindcss.com/docs/installation)
+- Proste poradniki zrobione dla reszty czlonkow zespolu
+  - [Poradnik 1](https://youtu.be/GZgwMlA5QOI)
+  - [Poradnik 2](https://youtu.be/1NXbbKsPF7A)
+- Oczywiscie stackoverflow oraz github copilot :)
diff --git a/raport.pdf b/raport.pdf
diff --git a/src/templates/index.html b/src/templates/index.html
@@ -4,21 +4,21 @@
     <div class="hero min-h-fit bg-base-100 pb-10 shadow-2xl mt-10 m-4">
         <div class="min-w-full hero-content text-center flex flex-col ">
             <div>
-                <h1 class="text-5xl font-bold">Kategorie</h1>
+                <h1 class="text-3xl md:text-4xl font-bold">Kategorie</h1>
             </div>
             <div class="grid grid-cols-1 md:grid-cols-4 gap-1 min-w-full">
 
                 {% for category in categories %}
                     <a href="{% url "offers_list" %}?category={{ category.id }}"
-                       class="btn btn-primary text-white" hx-boost="true">{{ category.name }}</a>
+                       class="btn btn-primary text-white btn-block" hx-boost="true">{{ category.name }}</a>
                 {% endfor %}
             </div>
         </div>
     </div>
     <div class="hero min-h-full bg-base-100 pb-10 shadow-2xl m-4">
         <div class="min-w-full hero-content text-center flex flex-col">
             <div>
-                <h1 class="text-5xl font-bold">Ostatnie Ogloszenia</h1>
+                <h1 class="text-3xl md:text-4xl font-bold">Ostatnie Ogłoszenia</h1>
             </div>
             <div class="grid grid-cols-1 md:grid-cols-4 gap-4 min-w-full">
                 {% for offer in offers %}

diff --git a/src/templates/layout/header.html b/src/templates/layout/header.html
@@ -12,15 +12,10 @@
             </div>
             <ul tabindex="0"
                 class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
-                <li><a>Item 1</a></li>
+                <li><a href="{% url "offers_list" %}" hx-boost="true">Oferty</a></li>
                 <li>
-                    <a>Parent</a>
-                    <ul class="p-2">
-                        <li><a>Submenu 1</a></li>
-                        <li><a>Submenu 2</a></li>
-                    </ul>
+                    {% include "layout/theme_change.html" %}
                 </li>
-                <li><a>Item 3</a></li>
             </ul>
         </div>
         <a class="btn btn-ghost text-xl" href="{% url "index" %}">DealHub</a>
@@ -31,26 +26,11 @@
         </ul>
     </div>
     <div class="navbar-end gap-2" hx-boost="true">
-        <div class="form-control"
-             x-data="{ theme: $persist(document.documentElement.getAttribute('data-theme') || 'dark') }">
-            <span class="flex cursor-pointer gap-2">
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
-                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-            </svg>
-            <input type="checkbox" value="light" class="toggle theme-controller"
-                   x-bind:checked="theme === 'light'"
-                   x-on:change="theme = $event.target.checked ? 'light' : 'dark'; $nextTick(() => document.documentElement.setAttribute('data-theme', theme))"
-            />
-
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
-                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <circle cx="12" cy="12" r="5"/>
-                <path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/>
-            </svg>
-            </span>
+        <div class="hidden lg:block">
+            {% include "layout/theme_change.html" %}
         </div>
 
+
         {% if user.is_authenticated %}
             <div class="dropdown dropdown-end">
                 <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
@@ -70,8 +50,8 @@
                 </ul>
             </div>
         {% else %}
-            <a class="btn" href="{% url "account_login" %}">Zaloguj sie</a>
-            <a class="btn" href="{% url "account_signup" %}">Zarejestruj sie</a>
+            <a class="btn btn-xs md:btn-normal" href="{% url "account_login" %}">Zaloguj sie</a>
+            <a class="btn btn-xs md:btn-normal" href="{% url "account_signup" %}">Zarejestruj sie</a>
         {% endif %}
     </div>
 </div>
diff --git a/src/templates/layout/theme_change.html b/src/templates/layout/theme_change.html
@@ -0,0 +1,19 @@
+<div class="form-control"
+     x-data="{ theme: $persist(document.documentElement.getAttribute('data-theme') || 'dark') }">
+            <span class="flex cursor-pointer gap-2">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+            </svg>
+            <input type="checkbox" value="light" class="toggle theme-controller"
+                   x-bind:checked="theme === 'light'"
+                   x-on:change="theme = $event.target.checked ? 'light' : 'dark'; $nextTick(() => document.documentElement.setAttribute('data-theme', theme))"
+            />
+
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="5"/>
+                <path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/>
+            </svg>
+            </span>
+</div>
diff --git a/src/templates/offers/card.html b/src/templates/offers/card.html
@@ -1,5 +1,7 @@
-<div class="card w-46 h-96 bg-base-200 shadow-xl">
-    <figure><img src="{% if offer.get_images %}{{ offer.get_images.0 }}{% else %}https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg{% endif %}" alt="Shoes"/></figure>
+<div class="card w-46 h-96 bg-base-200 shadow-xl" hx-boost="true">
+    <figure>
+        <img src="{% if offer.get_images %}{{ offer.get_images.0 }}{% else %}https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg{% endif %}" alt="Offer image" class="transition ease-in duration-200"/>
+    </figure>
     <div class="card-body">
         <h2 class="card-title"><a href="{%url 'offer_detail' pk=offer.pk %}">{{offer.title}}</a></h2>
         <p>{{offer.description}}</p>

diff --git a/src/templates/offers/index.html b/src/templates/offers/index.html
@@ -26,15 +26,17 @@ <h2 class="menu-title text-white">Kategorie</h2>
                     </ul>
 
                 </div>
-                <div class="col-span-1 md:col-span-3 grid grid-cols-1 md:grid-cols-3 gap-4 w-full ">
+                <div class="col-span-1 md:col-span-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full ">
                     <div class="flex justify-end col-span-3">
                         <a href="{% url "create_offer" %}" class="btn btn-primary mb-4 text-white">Dodaj oferte</a>
                     </div>
+                <div class="col-span-1 md:col-span-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full">
                     {% for offer in offers %}
-                        <div class="col-span-1">
+
                             {% include "offers/card.html" with offer=offer %}
-                        </div>
+
                     {% endfor %}
+                </div>
 
                 </div>
             </div>

diff --git a/src/templates/offers/offer_detail.html b/src/templates/offers/offer_detail.html
@@ -52,7 +52,7 @@
 
   <div class="w-1/2 p-4">
     <h2 class="text-2xl">{{offer.title}}</h2>
-    <p class="text-sm text-gray-500">By {{offer.author}}</p>
+    <p class="text-sm text-gray-500">Przez @{{offer.author}}</p>
     <p class="text-xl font-bold">{{offer.price}} zł</p>
     <p>{{offer.description}}</p>
     {%if user.is_authenticated %}