{"id":25037526,"url":"https://github.com/ozematt/shop-app","last_synced_at":"2026-04-06T08:01:50.980Z","repository":{"id":257588388,"uuid":"858728038","full_name":"ozematt/shop-app","owner":"ozematt","description":"Final Project - CodersLab Bootcamp","archived":false,"fork":false,"pushed_at":"2024-12-11T09:56:15.000Z","size":1375,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T21:28:56.461Z","etag":null,"topics":["ci-cd","docker","fake-store-api","material-ui","playwright","react","react-hook-form","react-testing-library","redux-toolkit","rest-api","supabase","tanstack-react-query","typescript","vitest"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ozematt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-17T12:37:02.000Z","updated_at":"2025-01-20T08:20:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"6dd21144-1010-4439-81af-f50cb99fa8c5","html_url":"https://github.com/ozematt/shop-app","commit_stats":null,"previous_names":["ozematt/shop-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ozematt/shop-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ozematt%2Fshop-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ozematt%2Fshop-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ozematt%2Fshop-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ozematt%2Fshop-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ozematt","download_url":"https://codeload.github.com/ozematt/shop-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ozematt%2Fshop-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31464102,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T21:22:52.476Z","status":"online","status_checked_at":"2026-04-06T02:00:07.287Z","response_time":112,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ci-cd","docker","fake-store-api","material-ui","playwright","react","react-hook-form","react-testing-library","redux-toolkit","rest-api","supabase","tanstack-react-query","typescript","vitest"],"created_at":"2025-02-06T01:49:36.362Z","updated_at":"2026-04-06T08:01:50.956Z","avatar_url":"https://github.com/ozematt.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# shop-app\n\n\n\n## Opis projektu\n\n**shop-app** to aplikacja e-commerce zbudowana z użyciem React i TypeScript, oferująca funkcjonalny sklep internetowy z katalogiem produktów, zarządzaniem koszykiem, procesem zakupu oraz pulpitem użytkownika. Aplikacja korzysta z **Fake Store API** do pobierania produktów. Zaimplementowane zostały funkcje takie jak obsługa motywów, filtrowanie i sortowanie produktów, oraz integracja z API do obsługi logowania.\n\nTechnologie użyte w projekcie obejmują **React**, **Material-UI (MUI)** oraz inne nowoczesne narzędzia, takie jak **TanStack Query**, **Redux Toolkit** oraz **Docker**.\n\n\n\n### Funkcjonalności\n\n\n### 1. Obsługa motywów\n\n- Użytkownik ma możliwość przełączania między **jasnym** a **ciemnym** motywem.\n- Motywy zostały zaprojektowane z uwzględnieniem dostępności, czytelności i estetyki, co gwarantuje komfort użytkowania w obu wersjach.\n\n### 2. Uwierzytelnianie użytkowników\n\n- Po zalogowaniu, użytkownicy mogą dodawać produkty do koszyka i składać zamówienia.\n\n### 3. Katalog produktów\n\n- Aplikacja wyświetla produkty wraz z ich zdjęciami, opisami, cenami i kategoriami.\n- Funkcje **filtrowania** oraz **sortowania** produktów (np. według ceny, kategorii).\n- **Lazy-loading** produktów poprawia wydajność ładowania strony.\n\n### 4. Wyszukiwanie produktów\n\n- Wyszukiwarka produktów pozwala użytkownikom na wyszukiwanie według słów kluczowych, kategorii oraz innych atrybutów.\n\n### 5. Koszyk\n\n- Użytkownicy mogą:\n  - Dodawać produkty do koszyka.\n  - Aktualizować ilość produktów.\n  - Usuwać produkty z koszyka.\n- Koszyk został zaprojektowany tak, aby maksymalnie ułatwić proces zakupowy.\n\n### 6. Proces realizacji zakupu\n\n- Użytkownicy przechodzą przez cały proces zakupu, który obejmuje:\n  1. Logowanie.\n  2. Wprowadzenie informacji o adresie wysyłki.\n  3. Wybór metody płatności.\n  4. Podsumowanie i potwierdzenie zamówienia.\n\n### 7. Pulpit użytkownika\n\n- Użytkownik ma dostęp do swojego pulpitu z **historią zamówień**.\n\n\n\n## Technologia\n\n\n- **React** – JavaScriptowy framework do budowy interfejsów użytkownika.\n- **TypeScript** – Superset JavaScriptu, który zapewnia statyczne typowanie, co poprawia niezawodność i stabilność aplikacji.\n- **Material-UI (MUI)** – Framework CSS do stylizowania komponentów.\n- **React-Router** – Biblioteka do zarządzania trasami w aplikacji React.\n- **React Hook Forms** – Biblioteka do zarządzania formularzami i ich walidacją.\n- **TanStack Query** – Narzędzie do zarządzania stanem danych z API.\n- **Redux Toolkit** – Biblioteka do globalnego zarządzania stanem aplikacji.\n- **Vitest** i **React Testing Library** – Narzędzia do testów jednostkowych.\n- **Playwright** – Narzędzie do testów end-to-end (E2E).\n- **Docker** – Narzędzie do konteneryzacji aplikacji.\n- **Fake Store API** – Zewnętrzne API, które dostarcza dane produktów, takie jak opisy, ceny, zdjęcia i kategorie (dokumentacja: [https://fakestoreapi.com/](https://fakestoreapi.com/)).\n- **API REST** – Obsługa danych przez endpointy API, m.in. `/auth/login`, `/products`.\n- **Supabase** – Baza danych histori zamówien użytkowników.\n\n## Zrzuty ekranu\n\n### Widok główny\n![Widok główny - motyw jasny](./app/screenshots/MainPage_light.png)\n![Widok główny - motyw ciemny](./app/screenshots/MainPage_dark.png)\n\n### Widok koszyka zakupowego\n![Koszyk zakupowy](./app/screenshots/CartView.png)\n\n### Widok procesu zakupowego\n![Proces zakupowy](./app/screenshots/Buy.png)\n\n\n### Widok historii zakupów użytkownika \n![Historia zakupów](./app/screenshots/History.png)\n\n\n\n\n## Instalacja\n\n\n### Opcja 1: Uruchamianie lokalnie\n\n1. **Sklonuj repozytorium:**\n   ```sh\n   git clone https://github.com/ozematt/shop-app.git\n   ```\n2. **Przejdź do katalogu projektu:**\n   ```sh\n   cd shop-app\n   ```\n3. **Zainstaluj zależności:**\n   Upewnij się, że masz zainstalowany Node.js i npm. Następnie uruchom poniższą komendę, aby zainstalować wszystkie zależności projektu.\n   ```sh\n   npm install\n   ```\n4. **Uruchom aplikacje:**\n   ```sh\n   npm run dev\n   ```\n   Aplikacja będzie dostępna pod adresem: http://localhost:3000/\n\n\n### Opcja 2: Uruchamianie w kontenerze (Docker)\n\n#### Uruchomienie w trybie developerskim\n\n1. **Upewnij się, że masz zainstalowany Docker.**\n2. **Sklonuj repozytorium:**\n   ```sh\n   git clone https://github.com/ozematt/shop-app.git\n   ```\n3. **Przejdź do katalogu projektu:**\n   ```sh\n   cd shop-app\n   ```\n4. **Uruchom kontener w trybie developerskim za pomocą Docker Compose:**\n   ```sh\n   ./startdev.sh\n   ```\n4. **Zainstaluj zależności:**\n   ```sh\n   npm install\n   ```\n5. **Uruchom aplikacje:**\n   ```sh\n   npm run dev\n   ```\n   Aplikacja będzie dostępna pod adresem: http://localhost:3000/\n\n   \n#### Uruchomienie w trybie produkcyjnym\n\n1. **Sklonuj repozytorium:**\n   ```sh\n   git clone https://github.com/ozematt/shop-app.git\n   ```\n2. **Zbuduj obraz Docker::**\n   ```sh\n   docker build -t shop-app .\n   ```\n3. **Uruchom aplikację z zbudowanego obrazu::**\n   ```sh\n   docker run -p 3000:3000 shop-app\n   ```\n   Aplikacja będzie dostępna pod adresem: http://localhost:3000/\n   \n\n\n## Użycie\n\n\n- **Zmiana motywu** – Przycisk do przełączania motywów znajduje się w prawym górnym rogu interfejsu.\n- **Logowanie** – Użyj formularza logowania, aby uzyskać dostęp do funkcji zakupowych. Dane do logowania dostępne w dokumentacji Fake Shop API(https://fakestoreapi.com).\n- **Katalog produktów** – Przeglądaj produkty, korzystając z filtrów, sortowania i wyszukiwania.\n- **Koszyk** – Dodawaj produkty do koszyka, zarządzaj nimi i realizuj zakupy.\n\n\n\n## Konteneryzacja\n\n\nAplikacja shop-app jest konteneryzowana przy użyciu **Docker** i automatycznie budowana oraz publikowana do **GitHub Container Registry** (GHCR) przy użyciu **GitHub Actions** w ramach procesu CI/CD.\n\n\n \n### CI/CD i automatyczne tworzenie obrazu produkcyjnego\n\n\nKażdy pull request i merge do gałęzi main i develop powoduje automatyczne zbudowanie obrazu aplikacji, który jest publikowany w sekcji **Packages** repozytorium na GitHubie. \n\n\n\n### Obraz Docker\n\n\nNajnowszy obraz aplikacji jest dostępny w sekcji **Packages** w repozytorium na GitHubie. Możesz go znaleźć tutaj:\n\n[GitHub Packages - shop-app](https://github.com/ozematt/shop-app/packages)\n\n\n\n### Pobieranie i uruchamianie obrazu Docker\n\n\nObraz aplikacji można pobrać bezpośrednio z GitHub Container Registry (GHCR) za pomocą poniższej komendy:\n\n```sh\ndocker pull ghcr.io/ozematt/shop-app:refs-pull-88-merge\n```\n\nAby uruchomić aplikację w trybie produkcyjnym na porcie 3000, użyj następującej komendy:\n\n```sh\ndocker run -p 3000:3000 ghcr.io/ozematt/shop-app:refs-pull-88-merge\n```\n\nPo uruchomieniu, aplikacja będzie dostępna pod adresem http://localhost:3000\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fozematt%2Fshop-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fozematt%2Fshop-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fozematt%2Fshop-app/lists"}