Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/serifcolakel/shopify-nextjs
https://github.com/serifcolakel/shopify-nextjs
Last synced: 6 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/serifcolakel/shopify-nextjs
- Owner: serifcolakel
- Created: 2022-02-12T20:19:34.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-02-15T14:30:09.000Z (almost 3 years ago)
- Last Synced: 2024-11-09T02:52:35.651Z (2 months ago)
- Language: JavaScript
- Homepage: serif-shopify.vercel.app
- Size: 262 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Table of Contents
## About The Project
In 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.
Image of Project
-
Home Page
-
Home Page Responsive
-
Product Page
-
Product Page Responsive
-
Cart Page
Cart Page Responsive
### Built With
In this section, the technologies used in the construction of the project are included.
- [Next.js](https://nextjs.org/) - The Next.js framework is used for the front-end development.
- [GraphQL](https://graphql.org/) - The GraphQL framework is used for the back-end development.
- [SASS](https://sass-lang.com/) - (CSS preprocessor)
- [TailwindCSS](https://tailwindcss.com/docs/installation) - for the front-end
- [Shopify](https://shopify.dev/) - for the back-end
- [Headlessio](https://headlessui.dev/) - for the Transition Effect & Animation
- [Swiper - React ](https://swiperjs.com/react) - for the carousel
- [Vercel](https://vercel.com/) - for Deployment
## Getting Started
In this section, the steps for the cloning of the project and the improvements to be made by you are shown.
### Prerequisites
By following the steps below, your project can be run after the local installation.
- npm
```sh
npm install npm@latest -g
```
### Installation
_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._
1. Clone the repo
```sh
git clone https://github.com/serifcolakel/Shopify-NextJS.git
```
2. Install NPM packages
```sh
npm install
```
3. Enter your API in `.env`
```.env
SHOPIFY_STOREFRONT_ACCESTOKEN="ENTER YOUR SHOPIFY_STOREFRONT_ACCESTOKEN"
SHOPIFY_STORE_DOMAIN="ENTER YOUR SHOPIFY_STORE_DOMAIN"
```
4. Run the app
```sh
npm run dev
```
## Usage
In this section, you can access the documentation of the libraries used during the creation of the project.
_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/)._
## Roadmap
- [x] Home Page with (Responsive)
- [x] Product Page Dynamic with (Responsive)
- [x] Recommendation Component with (Responsive)
- [x] Product Cart Page & Checkout Page with (Responsive)
- [x] Product Other Attributes (Color, Size, Material, etc.) chosen by the user
See the [open issues](https://github.com/serifcolakel/Shopify-NextJS/issues) for a full list of proposed features (and known issues).
## Contributing
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
If 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".
Don't forget to give the project a star! Thanks again!
## Contact
Project Link: [Shopify-NextJS](https://github.com/serifcolakel/Shopify-NextJS)