{"id":19084476,"url":"https://github.com/serifcolakel/shopify-nextjs","last_synced_at":"2026-06-19T19:32:15.489Z","repository":{"id":107317138,"uuid":"458630034","full_name":"serifcolakel/Shopify-NextJS","owner":"serifcolakel","description":null,"archived":false,"fork":false,"pushed_at":"2022-02-15T14:30:09.000Z","size":268,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-11T19:34:24.602Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"serif-shopify.vercel.app","language":"JavaScript","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/serifcolakel.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":"2022-02-12T20:19:34.000Z","updated_at":"2022-08-17T17:59:46.000Z","dependencies_parsed_at":"2023-07-05T06:31:27.131Z","dependency_job_id":null,"html_url":"https://github.com/serifcolakel/Shopify-NextJS","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/serifcolakel/Shopify-NextJS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serifcolakel%2FShopify-NextJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serifcolakel%2FShopify-NextJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serifcolakel%2FShopify-NextJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serifcolakel%2FShopify-NextJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/serifcolakel","download_url":"https://codeload.github.com/serifcolakel/Shopify-NextJS/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serifcolakel%2FShopify-NextJS/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34546192,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-19T02:00:06.005Z","response_time":61,"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":[],"created_at":"2024-11-09T02:51:34.124Z","updated_at":"2026-06-19T19:32:15.466Z","avatar_url":"https://github.com/serifcolakel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/serifcolakel\"\u003e\n    \u003cimg src=\"https://i.hizliresim.com/a27dhrh.jpg\" alt=\"Logo\" width=\"80\" height=\"80\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\n      \u003ca href=\"#about-the-project\"\u003eAbout The Project\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#built-with\"\u003eBuilt With\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#prerequisites\"\u003ePrerequisites\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#roadmap\"\u003eRoadmap\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contact\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## About The Project\n\nIn this project, products were obtained using GraphQL from the store created due to the back-end convenience provided by the Shopify.com platform and presented to users on the front-end. It has been tried to prepare the ground for large e-commerce projects that can be created in the future. In addition, the products added to the cart without any authentication with localstorage are set to be used on the next visit as long as chrome provides. Apart from the good experience I had, it offered the opportunity to apply the back-end methods I learned.\n\n\u003cdetails\u003e\n  \u003csummary\u003eImage of Project\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\n    \u003cp\u003eHome Page\u003c/p\u003e\n      \u003cdiv align=\"center\"\u003e\n        \u003ca href=\"https://github.com/serifcolakel\"\u003e\n            \u003cimg src=\"https://i.hizliresim.com/702zzk0.jpg\" alt=\"Logo\" width=\"375px\" height=\"100%\"\u003e\n        \u003c/a\u003e\n    \u003c/div\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n    \u003cp\u003eHome Page Responsive\u003c/p\u003e\n     \u003cdiv align=\"center\"\u003e\n        \u003ca href=\"https://github.com/serifcolakel\"\u003e\n            \u003cimg src=\"https://i.hizliresim.com/gi53reu.jpg\" alt=\"Logo\" width=\"375px\" height=\"auto\"\u003e\n        \u003c/a\u003e\n    \u003c/div\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n    \u003cp\u003eProduct Page\u003c/p\u003e\n     \u003cdiv align=\"center\"\u003e\n        \u003ca href=\"https://github.com/serifcolakel\"\u003e\n            \u003cimg src=\"https://i.hizliresim.com/35ushs0.jpg\" alt=\"Logo\" width=\"375px\" height=\"100%\"\u003e\n        \u003c/a\u003e\n    \u003c/div\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n    \u003cp\u003eProduct Page Responsive\u003c/p\u003e\n     \u003cdiv align=\"center\"\u003e\n        \u003ca href=\"https://github.com/serifcolakel\"\u003e\n            \u003cimg src=\"https://i.hizliresim.com/4a11rn4.jpg\" alt=\"Logo\" width=\"375px\" height=\"100%\"\u003e\n        \u003c/a\u003e\n    \u003c/div\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n    \u003cp\u003eCart Page \u003c/p\u003e\n     \u003cdiv align=\"center\"\u003e\n        \u003ca href=\"https://github.com/serifcolakel\"\u003e\n            \u003cimg src=\"https://i.hizliresim.com/kwfg4xw.jpg\" alt=\"Logo\" width=\"375px\" height=\"100%\"\u003e\n        \u003c/a\u003e\n    \u003c/div\u003e\n    \u003c/li\u003e\n    \u003cp\u003eCart Page Responsive\u003c/p\u003e\n     \u003cdiv align=\"center\"\u003e\n        \u003ca href=\"https://github.com/serifcolakel\"\u003e\n            \u003cimg src=\"https://i.hizliresim.com/e2jrw53.jpg\" alt=\"Logo\" width=\"375px\" height=\"100%\"\u003e\n        \u003c/a\u003e\n    \u003c/div\u003e\n    \u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n### Built With\n\nIn this section, the technologies used in the construction of the project are included.\n\n- [Next.js](https://nextjs.org/) - The Next.js framework is used for the front-end development.\n- [GraphQL](https://graphql.org/) - The GraphQL framework is used for the back-end development.\n- [SASS](https://sass-lang.com/) - (CSS preprocessor)\n- [TailwindCSS](https://tailwindcss.com/docs/installation) - for the front-end\n- [Shopify](https://shopify.dev/) - for the back-end\n- [Headlessio](https://headlessui.dev/) - for the Transition Effect \u0026 Animation\n- [Swiper - React ](https://swiperjs.com/react) - for the carousel\n- [Vercel](https://vercel.com/) - for Deployment\n\n\u003c!-- GETTING STARTED --\u003e\n\n## Getting Started\n\nIn this section, the steps for the cloning of the project and the improvements to be made by you are shown.\n\n### Prerequisites\n\nBy following the steps below, your project can be run after the local installation.\n\n- npm\n  ```sh\n  npm install npm@latest -g\n  ```\n\n### Installation\n\n_Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services._\n\n1. Clone the repo\n   ```sh\n   git clone https://github.com/serifcolakel/Shopify-NextJS.git\n   ```\n2. Install NPM packages\n   ```sh\n   npm install\n   ```\n3. Enter your API in `.env`\n   ```.env\n   SHOPIFY_STOREFRONT_ACCESTOKEN=\"ENTER YOUR SHOPIFY_STOREFRONT_ACCESTOKEN\"\n   SHOPIFY_STORE_DOMAIN=\"ENTER YOUR SHOPIFY_STORE_DOMAIN\"\n   ```\n4. Run the app\n   ```sh\n   npm run dev\n   ```\n\n\u003cdiv align=\"right\"\u003e\n  \u003ca href=\"#top\"\u003e\n      \u003cimg src=\"https://i.hizliresim.com/oxq9b8i.png\" alt=\"Logo\" width=\"40px\" height=\"40px\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003c!-- USAGE EXAMPLES --\u003e\n\n## Usage\n\nIn this section, you can access the documentation of the libraries used during the creation of the project.\n\n_For more examples, please refer to the [Shopify Documentation](https://shopify.dev/), [Next.js Documentation](https://nextjs.org/), [SASS Documentation](https://sass-lang.com/documentation), [Swiper - React Documentation](https://swiperjs.com/react), [Headlessio Documentation](https://headlessui.dev/)._\n\n\u003c!-- ROADMAP --\u003e\n\n## Roadmap\n\n- [x] Home Page with (Responsive)\n- [x] Product Page Dynamic with (Responsive)\n- [x] Recommendation Component with (Responsive)\n- [x] Product Cart Page \u0026 Checkout Page with (Responsive)\n- [x] Product Other Attributes (Color, Size, Material, etc.) chosen by the user\n\nSee the [open issues](https://github.com/serifcolakel/Shopify-NextJS/issues) for a full list of proposed features (and known issues).\n\n\u003c!-- CONTRIBUTING --\u003e\n\n## Contributing\n\nContributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\nIf you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag \"enhancement\".\nDon't forget to give the project a star! Thanks again!\n\n\u003c!-- CONTACT --\u003e\n\n## Contact\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"mailto:serifcolakel0@gmail.com\"\u003e\n        \u003cimg alt=\"Email\" src=\"https://img.shields.io/badge/Email-serifcolakel0@gmail.com-green style=flat\u0026logo=gmail\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.linkedin.com/in/serifcolakel/\" target=\"_blank\"\u003e\n        \u003cimg alt=\"LinkedIn\" src=\"https://img.shields.io/badge/LinkedIn-@serifcolakel-blue?style=flat\u0026logo=linkedin\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.instagram.com/serifcolakell/\"\u003e\n        \u003cimg alt=\"Instagram\" src=\"https://img.shields.io/badge/Instagram-serifcolakell-red?style=flat-square\u0026logo=instagram\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\nProject Link: [Shopify-NextJS](https://github.com/serifcolakel/Shopify-NextJS)\n\n\u003cdiv align=\"right\"\u003e\n  \u003ca href=\"#top\"\u003e\n      \u003cimg src=\"https://i.hizliresim.com/oxq9b8i.png\" alt=\"Logo\" width=\"40px\" height=\"40px\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserifcolakel%2Fshopify-nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fserifcolakel%2Fshopify-nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserifcolakel%2Fshopify-nextjs/lists"}