cosmicjs / unft-marketplace

A digital art marketplace built using Next.js, Stripe, and Cosmic.

Next.js Marketplace

Now updated to connect to the new dashboard and Cosmic JavaScript SDK. Read the article 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 - 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 - fast, fully managed headless CMS that enables us to quickly manage and create website content including UGC (user-generated content).
• Stripe - payments infrastructure that provides API tools to receive one-time and subscription payments.

Links

• View the live demo
• Install the template
• Read how it was built

Getting started

1. First, install the template into your Cosmic account to get the demo content ready.
2. Then download and install the code on your machine.

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.

cp .env.example .env

Cosmic: Go to Cosmic 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 and get your keys in the for developers section.

Add your keys to the .env file like so:

# .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

pnpm dev
# OR
yarn dev
# OR
npm run dev

Open 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 for more details.

License

This project is published under the MIT license.

unft-marketplace's Issues

ERESOLVE unable to resolve dependency tree

When I am trying to install packages before running the app it is giving error while resolving dependencies.

Any thoughts ?

src error

Hi, I just bumped into this error when cloned the repository:

Error: Image is missing required "src" property. Make sure you pass "src" in props to the next/image component. Received: {"width":256,"height":120}

Thank you for your time and consideration !