Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cosmicjs/unft-marketplace
A digital art marketplace built using Next.js, Stripe, and Cosmic.
https://github.com/cosmicjs/unft-marketplace
cms cosmicjs ecommerce headlesscms nextjs react reactjs stripe
Last synced: about 1 month ago
JSON representation
A digital art marketplace built using Next.js, Stripe, and Cosmic.
- Host: GitHub
- URL: https://github.com/cosmicjs/unft-marketplace
- Owner: cosmicjs
- License: mit
- Created: 2022-06-06T18:07:55.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-08T07:30:33.000Z (9 months ago)
- Last Synced: 2024-04-18T09:51:05.062Z (8 months ago)
- Topics: cms, cosmicjs, ecommerce, headlesscms, nextjs, react, reactjs, stripe
- Language: JavaScript
- Homepage: https://cosmic-nextjs-marketplace.vercel.app
- Size: 8.77 MB
- Stars: 46
- Watchers: 3
- Forks: 31
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Next.js Marketplace
Now updated to connect to the new dashboard and [Cosmic JavaScript SDK](https://www.npmjs.com/package/@cosmicjs/sdk). [Read the article](https://www.cosmicjs.com/blog/4-steps-to-update-the-nextjs-marketplace-template) to learn about the latest updates.
The Next.js Marketplace is a template that you can use to start your own digital art marketplace. Download for free.
## Technology used
This template uses the following technologies:
- [Next.js](https://nextjs.org/) - scalable and high-performance **React.js** framework for modern web development. Provides a large set of features, such as hybrid rendering, route prefetching, automatic image optimization, and internationalization, out of the box.
- [Cosmic](https://www.cosmicjs.com/) - fast, fully managed [headless CMS](https://www.cosmicjs.com/headless-cms) that enables us to quickly manage and create website content including UGC (user-generated content).
- [Stripe](https://stripe.com/) - payments infrastructure that provides API tools to receive one-time and subscription payments.
### Links
- [View the live demo](https://c-marketplace-cosmicjs.vercel.app/)
- [Install the template](https://www.cosmicjs.com/marketplace/templates/nextjs-marketplace)
- [Read how it was built](https://www.cosmicjs.com/articles/build-a-digital-art-marketplace-with-nextjs-cosmic-and-stripe)
## Getting started
1. First, install the [template](https://www.cosmicjs.com/marketplace/templates/unft-marketplace) into your Cosmic account to get the demo content ready.
2. Then download and install the code on your machine.
```bash
git clone https://github.com/cosmicjs/unft-marketplace
cd unft-marketplace
pnpm install
# or
yarn
# or
npm install
```
### Environment variables
You'll need to create a `.env` file in the root of the project and add the access keys for Cosmic and Stripe. This can be done by copying the `.env.example`.
```bash
cp .env.example .env
```
**Cosmic**: Go to [Cosmic](https://app.cosmicjs.com/) and from the Bucket that you installed the app template go to _Bucket Settings > API Access_ and get your API access keys.
**Stripe**: Log in to [Stripe](https://dashboard.stripe.com/) and get your keys in the **for developers** section.
Add your keys to the `.env` file like so:
```bash
# .env
NEXT_PUBLIC_COSMIC_BUCKET_SLUG=your_cosmic_slug
NEXT_PUBLIC_COSMIC_READ_KEY=your_cosmic_read_key
COSMIC_WRITE_KEY=your_cosmic_write_key
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_key
STRIPE_SECRET_KEY=your_stripe_secret_key
```
### Then run the development server
```bash
pnpm dev
# OR
yarn dev
# OR
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Deploy on Vercel
Use the following button to deploy to Vercel. You will need to add your environment variables before deployment.
Check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
## License
This project is published under the [MIT](LICENSE) license.