DTC furniture eCommerce starter

Solace is a sleek and modern DTC furniture eCommerce starter built on Medusa 2.0 and Next.js 14. It offers a complete suite for launching an online store, including a product grid with filtering, user profiles, order history, multi-step checkout with Stripe integration, product search, and customizable product pages. Integrated with Strapi CMS, it offers pre-built content models for easy website editing.

Table of Contents

• Prerequisites
• Overview
  • Features
  • Demo
• Quickstart
• Resources
• Contributors

Prerequisites

• MedusaJS 2.0 backend. If this hasn't been set up yet, please use the following:
  • Our prepared repository: Medusa 2.0 API
  • Medusa 2.0 Documentation

    Important: If you're not using our prepared API repository, remember to:

    • Copy the folder from Repo Link and paste it to your API project
    • Copy the Middlewares file from Repo Link and paste it to your API project

    These files are required for the search engine and filter logic to work properly. Without them, the search and filtering functionality will not be available.

• A CMS management system like Strapi. If this hasn't been set up yet, please use the following:
  • Our prepared repository: Strapi
  • Strapi Documentation

    Important: After setting up Strapi, configure the revalidation webhook:

    1. Set STRAPI_WEBHOOK_REVALIDATION_SECRET in your Next.js .env (you can generate a secure value using node -e "console.log(require('crypto').randomBytes(32).toString('hex'))")
    2. In Strapi admin panel: Settings → Webhooks → Create new webhook
    3. Configure webhook:
       • URL: {your-frontend-url}/api/strapi-revalidate?secret={YOUR-STRAPI_WEBHOOK_REVALIDATION_SECRET}
         Example: http://localhost:8000/api/strapi-revalidate?secret=30747ea915627411fa275b9e3e6cafd199f9c5b221696b644509c02510ebe979
       • No additional headers needed
       • Enable Entry and Media events (Create, Update, Delete)

Overview

Features

The storefront has been designed to meet all the requirements of modern e-commerce stores.

• Full user profile functionality
  • Order history
  • Profile settings
  • Shipping details
  • Password resetting
• Shopping cart
  • Add/remove products
  • Apply promotional codes
• Checkout
  • A complete 3-step checkout process
  • Payment support via Stripe
  • Mail notifications after order placement
• About Us, Blog, Privacy Policy, and Terms and Conditions pages
  • Fully customizable through the CMS.
• Product search functionality based on keywords.
• Product pages
• Collections and categories
• Two themes support
  • Dark
  • Light
• Next.js 14 support

Demo

User Profile

Cart

Checkout

Search

Product Page

Quickstart

Clone the repository

git clone https://github.com/rigby-sh/solace-medusa-starter.git

Install packages

yarn install

Envs

Create a .env file and add environment variables listed below.

NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY=YOUR_MEDUSA_PUBLISHABLE_KEY
NEXT_PUBLIC_MEDUSA_BACKEND_URL=YOUR_MEDUSA_BACKEND_URL
NEXT_PUBLIC_DEMO_MODE=BOOLEAN_VALUE
NEXT_PUBLIC_STRAPI_URL=YOUR_STRAPI_URL
NEXT_PUBLIC_STRAPI_READ_TOKEN=YOUR_STRAPI_READ_TOKEN
NEXT_PUBLIC_CDN_SPACE_DOMAIN=YOUR_CDN_SPACE_DOMAIN
NEXT_PUBLIC_SPACE_DOMAIN=YOUR_SPACE_DOMAIN
NEXT_PUBLIC_SPACE_ENDPOINT=YOUR_SPACE_ENDPOINT
STRAPI_WEBHOOK_REVALIDATION_SECRET=YOUR_STRAPI_WEBHOOK_REVALIDATION_SECRET

Develop

Start your application with autoReload enabled

yarn dev

Build

Build the project to generate the production version preview

yarn build

Start

Run the preview version of the project

yarn start

Deploying the project with Vercel

Deploying your application on Vercel is a quick and straightforward process that allows for easy management and scaling of your project. To deploy your project, click the button below to start the process. Vercel will guide you through the configuration steps and connect to your repository.

Resources

Learn more about Medusa

• Website
• GitHub
• Medusa 2.0 Documentation

Learn more about Next.js

• Website
• GitHub
• Documentation

Learn more about Strapi

• Website
• GitHub
• Documentation

[!IMPORTANT] Image Usage Disclaimer: The images used in this starter are for preview purposes only. They are licensed exclusively for use within this demo and cannot be used in any commercial applications or redistributed. If you intend to use this starter for your own store, please replace all images with assets that are appropriately licensed for your project.

Contributors