Medusa is an open-source headless commerce engine that enables developers to create amazing digital commerce experiences. This project builds on top of it to bring it close to artists!

Prerequisites: To use the starter you should have a Medusa server running locally on port 9000. Check out medusa for a quick setup.

Changes over the Next.js starter:

• Site structure optimized for artists
• Dramatic color scheme
• SEO
• Email list integration through Mailchimp
• Carousel to display past works
• Separate page highlighting commissionable art by category

Going forward:

• Simplified admin panel
• Artist can update commissions page through admin panel, decreasing need for developer intervention
• Associate images with variant type at checkout for cleaner customer experience

Medusa for artists is built with:

• Next.js
• Tailwind CSS
• Typescript
• Medusa

Navigate into your projects directory and get your enviroment variables ready:

cd nextjs-starter-medusa/
mv .env.template .env.local

Use Yarn to install all dependencies.

yarn

You are now ready to start up your project.

yarn dev

Your site is now running at http://localhost:8000!

Edit /pages/index.tsx to see your site update in real-time!

By default this starter supports the following payment integrations

• Stripe
• Paypal

To enable the integrations you need to add the following to your .env.local file:

MEDUSA_PAYMENT_STRIPE_PUBLIC_KEY=<your-stripe-public-key>
MEDUSA_PUBLIC_PAYPAL_CLIENT_ID=<your-paypal-client-id>

You will also need to setup the integrations in your Medusa server. See the Medusa documentation for more information on how to configure Stripe and PayPal in your Medusa project.

This starter is configured to support using the medusa-search-meilisearch plugin out of the box. To enable search you will need to enable the feature flag in ./store-config.json, which you do by changing the config to this:

{
  "features": {
    "search": true
  }
}

Before you can search you will need to install the plugin in your Medusa server, for a written guide on how to do this – see our documentation.

The search components in this starter are developed with Algolia's react-instant-search-hooks-web library which should make it possible for you to seemlesly change your search provider to Algoli instead of MeiliSearch.

To do this you will need to add algoliasearch to the project, by running

yarn add algoliasearch

After this you will need to switch the current MeiliSearch SearchClient out with a Alogolia client. To do this update @lib/search-client.

import algoliasearch from "algoliasearch/lite"

const appId = process.env.NEXT_PUBLIC_SEARCH_APP_ID || "test_app_id" // You should add this to your environment variables

const apiKey = process.env.NEXT_PUBLIC_SEARCH_API_KEY || "test_key"

export const searchClient = algoliasearch(appId, apiKey)

export const SEARCH_INDEX_NAME =
  process.env.NEXT_PUBLIC_INDEX_NAME || "products"

After this you will need to set up Algolia with your Medusa server, and then you should be good to go. For a more thorough walkthrough of using Algolia with Medusa – see our documentation, and the documentation for using react-instantsearch-hooks-web.

• Website
• GitHub
• Documentation

• Website
• GitHub
• Documentation