https://github.com/sanidhyy/ecommerce-app
E-commerce app using next.js, sanity and stripe payments.
https://github.com/sanidhyy/ecommerce-app
css ecommerce js nextjs react reactjs sanity
Last synced: 6 months ago
JSON representation
E-commerce app using next.js, sanity and stripe payments.
- Host: GitHub
- URL: https://github.com/sanidhyy/ecommerce-app
- Owner: sanidhyy
- License: mit
- Created: 2022-06-17T14:30:15.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-07T05:30:20.000Z (6 months ago)
- Last Synced: 2025-04-13T08:08:28.127Z (6 months ago)
- Topics: css, ecommerce, js, nextjs, react, reactjs, sanity
- Language: JavaScript
- Homepage: https://ecommerce-app-next.vercel.app/
- Size: 2.84 MB
- Stars: 11
- Watchers: 1
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# E-COMMERCE WEB APPLICATION USING NEXT JS
[](https://github.com/Technical-Shubham-tech)
[](https://github.com/Technical-Shubham-tech/ecommerce-app/commits/main)
[](https://github.com/Technical-Shubham-tech/ecommerce-app/blob/main/LICENSE.md)
[](https://github.com/Technical-Shubham-tech/ecommerce-app/branches)
[](https://github.com/Technical-Shubham-tech/ecommerce-app/commits/)
[](https://ecommerce-app-next.vercel.app/)
[](https://github.com/Technical-Shubham-tech/ecommerce-app/issues)
## 📌 How to setup this App?
1. Make sure **Git** and **NodeJS** is installed
2. **Yarn** is faster than Npm. So use [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/).
3. To get started, create .env file in root folder.
4. Contents of `.env` file
```
NEXT_PUBLIC_SANITY_PROJECT_ID=xxxxxxxx
NEXT_PUBLIC_SANITY_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxx
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxx
NEXT_PUBLIC_STRIPE_SECRET_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxx
```
5. Clone this **repository** to your local computer.
6. Open **terminal** in root directory. Run `npm install` or `yarn install`
7. Now, `cd sanity-ecommerce-app`. Run `npm install` or `yarn install` again.
8. Now all required packages are installed, let's setup sanity.
9. Create an account in [sanity](https://www.sanity.io/)
10. In terminal, type `sanity init` to initialize our sanity project.
11. Type `sanity start` to start sanity studio on localhost. URL will be shown in terminal.
12. After going to localhost, login in with your account. Now, your account is connected with this project.
13. To get `NEXT_PUBLIC_SANITY_PROJECT_ID` and `NEXT_PUBLIC_SANITY_TOKEN`, go to [sanity](https://www.sanity.io).
14. Copy your **project id** as shown below:
15. Under **API Tab**, go to **tokens** section and create a token. You can name it whatever you want. Just Don't fotget
to copy your project token. You will not be able to copy later.
16. Now, you add products and banner from http://localhost:3333 to your project through sanity.
**NOTE:** If you want to use same images as mine, you can find all images in **public/assets** folder. You can use your own images as well, but make sure they are in .webp format or you have to define your own images format in **pages/api/stripe.js**
17. After sanity is setup successfully, it's time to setup online payments with stripe.
18. Create an account in [Stripe](https://stripe.com). Make sure **test mode** is enabled.
19. On account dashboard, you can simply get your `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` and `NEXT_PUBLIC_STRIPE_SECRET_KEY`.
**NOTE:** Don't share these keys publicaly.
20. You can also create custom shipping rates, to create one, go to: **Products** > Shipping rates > Create shipping rate.
21. After creating shipping rate, you can copy **shipping rate id** and paste it in **pages/api/stripe.js**
22. Now everything has been setup. You can start this app using `npm start` or `yarn start`.
## 📃 Built with
[
](https://www.javascript.com/)
[
](https://reactjs.org/)
[
](https://nextjs.org/)
[
](https://stripe.com/)
## 🔧 Stats
## 🙌🏼 Contribute
You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.
## Buy Me a Coffee 🍺
[
](https://www.buymeacoffee.com/sanidhy "Buy me a Coffee")
## 🚀 Follow Me
[](https://github.com/Technical-Shubham-tech)
[](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2FTechnical-Shubham-tech%2Fmedical-chat-app)
[](https://www.youtube.com/channel/UCNAz_hUVBG2ZUN8TVm0bmYw)
## Give A Star ⭐
You can also give this repository a star to show more people and they can use this repository.