{"id":18519526,"url":"https://github.com/typeofweb-org/sklep","last_synced_at":"2025-04-09T08:32:16.952Z","repository":{"id":42712667,"uuid":"291972336","full_name":"typeofweb-org/sklep","owner":"typeofweb-org","description":"Sklep internetowy zbudowany na Next.js i Node.js. Projekt edukacyjny.","archived":false,"fork":false,"pushed_at":"2022-12-11T17:56:52.000Z","size":1582,"stargazers_count":22,"open_issues_count":26,"forks_count":3,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-03-24T04:06:57.876Z","etag":null,"topics":["hacktoberfest","hapijs","nextjs","prisma","stripe","typescript"],"latest_commit_sha":null,"homepage":"https://www.typeof.shop","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/typeofweb-org.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-01T10:54:50.000Z","updated_at":"2023-11-17T14:39:30.000Z","dependencies_parsed_at":"2022-08-27T21:21:24.514Z","dependency_job_id":null,"html_url":"https://github.com/typeofweb-org/sklep","commit_stats":null,"previous_names":["typeofweb-org/sklep"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typeofweb-org%2Fsklep","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typeofweb-org%2Fsklep/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typeofweb-org%2Fsklep/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typeofweb-org%2Fsklep/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/typeofweb-org","download_url":"https://codeload.github.com/typeofweb-org/sklep/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248003328,"owners_count":21031772,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["hacktoberfest","hapijs","nextjs","prisma","stripe","typescript"],"created_at":"2024-11-06T17:16:38.514Z","updated_at":"2025-04-09T08:32:16.559Z","avatar_url":"https://github.com/typeofweb-org.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sklep Type of Web\n\nProjekt edukacyjny. Licencja: [AGPL](./LICENSE)\n\n## Uruchomienie\n\n1. Aby uruchomić API będziesz potrzebować dockera (polecenie `docker-compose` musi być dostępne, port 5432 musi być wolny).\n2. Skopiuj plik `apps/api/.env-sample` do `apps/api/.env`.\n3. Uruchom frontend i backend jedną komendą `yarn dev`. Automatycznie zostaną zainstalowane też potrzebne zależności.\n4. Do pliku `/etc/hosts` (lub `c:\\Windows\\System32\\Drivers\\etc\\hosts`) dodaj dwie linijki:\n\n```\n127.0.0.1 api.sklep.localhost\n127.0.0.1 www.sklep.localhost\n```\n\n5. Aplikacja będzie dostępna pod adresem http://www.sklep.localhost:3000/ a API pod http://api.sklep.localhost:3002/\n\n6. Rejestracja nowego użytkownika w bazie danych:\n\n- idź do `http://api.sklep.localhost:3002/documentation#`\n- klikasz w `POST ​/auth​/register`\n- następnie `Try it out`\n- w:\n\n```\n{\n  \"email\": \"string\",\n  \"password\": \"string\"\n}\n```\n\nwpisujesz dowolny adres e-mail oraz hasło, np:\n\n```\n{\n  \"email\": \"twoj_adres_email@gmail.com\",\n  \"password\": \"twoje_haslo1123\"\n}\n```\n\npamiętaj by hasło nie było zbyt łatwe oraz aby adres e-mail był poprawny.\n\n- klikasz w `execute`\n- otwierasz nowy terminal i wpisujesz:\n\n```\ndocker exec -it api_typeofweb_sklep_1 psql -U postgres\n\npotem:\n\n\\c sklep\n\nnastępnie:\n\nUPDATE \"User\" SET role = 'ADMIN';\n\nA na koniec: \\q żeby wyjść\n```\n\n- otwierasz `http://www.sklep.localhost:3000/admin/login` aby się zalogować, jeżeli wszystko będzie w porządku to w prawym górnym rogu zobaczysz \"Logowanie udane\" i zostaniesz przekierowany na stronę `http://www.sklep.localhost:3000/admin/products` gdzie możesz dodawać produkty.\n\nJeśli będziesz chciał wyczyścić bazę danych to w folderze `apps/api` w terminalu wpisz `docker-compose down`\n\n## Zasady\n\n### Zarys architektury\n\nAplikacja dzieli się na 2 części:\n\n1. Odpowiedzialną za zarządzanie produktami, dodawanie, edycję, ustalanie cen – nazwiemy ją Admin\n2. Sklep z perspektywy klienta: przeglądanie produktów, dodawanie do koszyka, zakup – nazwiemy ją Klient\n\n### Stack\n\n- Admin\n  - API:\n    - Node.js\n    - [Hapi](https://hapi.dev)\n    - [Prisma](https://www.prisma.io/docs/getting-started/quickstart)\n    - [PostgreSQL](https://www.postgresql.org/)\n    - TypeScript\n  - WWW:\n    - [Next.js](https://nextjs.org) bez SSG ani SSR (nie potrzebujemy tego w Adminie)\n    - ~[React Hook Form](https://react-hook-form.com) do obsługi formularzy~ nie działało to zbyt dobrze z Carbon\n    - [React Final Form](https://final-form.org/react) do obsługi formularzy\n    - [Carbon Design System](https://www.carbondesignsystem.com/components/overview) (gotowe komponenty)\n    - TypeScript\n    - SCSS\n- Klient\n  - API:\n    - To samo API, tylko inne endpointy\n  - WWW:\n    - [Next.js z SSG](https://nextjs.org/docs/basic-features/data-fetching) do większości elementów.\n      - Incremental Static Regeneration\n      - ~Warto rozważyć bezpośrednie wbicie się do bazy z poziomu `getStaticProps`~\n      - [React Query](https://react-query.tanstack.com/docs/overview) dobrze [działa z SSR](https://react-query.tanstack.com/docs/guides/ssr)\n    - TypeScript\n    - TailwindCSS\n    - SCSS\n\n### Styleguide\n\n- Strony (Pages)\n\n```tsx\nexport default function AdminHome() {\n  return \u003cdiv\u003eAdminHome\u003c/div\u003e;\n}\n```\n\n- Komponenty\n\n```tsx\nexport const ProductList = React.memo\u003cProps\u003e((props) =\u003e {\n  return \u003cdiv\u003eProductList\u003c/div\u003e;\n});\nProductList.displayName = 'ProductList';\n```\n\n### Współpraca\n\n- Pracujemy w repo na branchach, których nazwy odpowiadają numerom tasków.\n- Robimy pull requesty do brancha `develop`.\n\n### Tablica zadań\n\n- \u003chttps://github.com/typeofweb/sklep/projects/1\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftypeofweb-org%2Fsklep","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftypeofweb-org%2Fsklep","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftypeofweb-org%2Fsklep/lists"}