Стильный современный fashion-стартер

Fashion E-commerce Starter for Medusa 2.0

The Fashion E-commerce Starter is a modern, customizable e-commerce template built with Medusa 2.0. Designed around the concept of the sustainable furniture brand Sofa Society, this starter showcases the power of new Medusa 2.0 version. With its focus on cutting-edge design, sustainability, and personalization, Sofa Society offers users an elegant shopping experience where they can explore customizable collections, product options, and a streamlined checkout flow.

This starter kit is an ideal solution for developers who need to set up a professional, feature-rich fashion e-commerce store quickly. It comes with a sleek and modern design, customizable collections, an Inspiration page, an About page, and a streamlined checkout process. The storefront is fully responsive and optimized for mobile, tablet, and desktop devices.

Table of Contents

• Features
• Roadmap
• Screenshots
• Prerequisites
• Quickstart
  • Medusa
  • Storefront
  • Meilisearch

Features

• Sleek, Modern Design: The storefront boasts a minimalist, contemporary design that perfectly reflects Sofa Society's commitment to modern aesthetics and sustainability.
• Dynamic Materials and Colors: Add richness to your product offerings by defining materials and colors for each product. Colors will be displayed using their corresponding hex codes, and each material can have multiple color options. Customers first select a material, then a color, with dynamic pricing based on their choices.
• Customizable Collections: Easily customize the content and images for each collection. Each product page also features images and a CTA for the collection it belongs to, which can be personalized as well, creating a fully branded shopping experience.
• Premade Inspiration Page: A beautiful, ready-to-use inspiration page helps customers explore the latest trends and styles, showcasing Sofa Society's furniture in real-world settings.
• About Page: Share your brand’s story, values, and commitment to sustainability with a pre-built about page that captures the essence of Sofa Society.
• Streamlined Checkout Flow: The checkout process is designed to be fast, intuitive, and frictionless, providing a seamless shopping experience for your customers from start to finish.
• Fully Responsive Design: Optimized for mobile, tablet, and desktop devices, ensuring a smooth, consistent experience across all platforms.
• Stripe Integration for Payments: Accept payments effortlessly by integrating Stripe. Simply add your Stripe API key to medusa/.env and the publishable key to storefront/.env to get started.
• Full E-commerce Functionality: The starter includes all the essential e-commerce features you need, including product pages, a shopping cart, a checkout process, and order confirmation.
• Next.js and Tailwind CSS: Built with Next.js v15 app router and Tailwind CSS, the starter is highly performant, customizable, and easy to extend with additional features.

Roadmap

• Figma Design Template: This will enable you to easily customize the design of the storefront to match your brand. View template.
• Search: Integration with Meilisearch for a powerful search experience.
• 404 Page: Custom 404 page for a better user experience.
• Account Management: Allow customers to create accounts, view order history, and manage their personal information.
• Cart Drawer: Cart drawer that slides in from the side where customers can view and edit their cart items.
• Email Templates: Customizable email templates for order confirmation, shipping updates, and more.
• Infinite Scroll Pagination: Improve the product discovery experience with infinite scroll pagination on store and collection pages.
• Resend Integration: Integration with Resend for sending transactional emails.

Screenshots

Prerequisites

• Node >= 20
• Yarn >= 3.5 for Medusa, Yarn v1 for Storefront
• Docker and Docker Compose
• Stripe account (for payments)
• httpie

Quickstart

git clone git@github.com:Agilo/fashion-starter.git

Medusa

1cd medusa
2
3# Create the .env file
4cp .env.template .env
5
6# Install dependencies
7yarn
8
9# Spin up the database and Redis
10docker-compose up -d
11
12# Build the project
13yarn build
14
15# Run the migrations
16yarn medusa db:migrate
17
18# Seed the database
19yarn seed
20
21# Create an user
22yarn medusa user -e "admin@medusa.local" -p "supersecret"
23
24# Start the development server
25yarn dev

At this point, you should be able to access the Medusa admin at http://localhost:9000/app with the credentials you just created. After logging in, you should go to http://localhost:9000/app/settings/publishable-api-keys, copy the publishable key, and paste it into the NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY env variable in the storefront/.env.local file.

Storefront

1cd storefront
2
3# Create the .env.local file
4cp .env.template .env.local
5
6# Install dependencies
7yarn
8
9# Start the development server
10yarn dev

You should now be able to access the storefront at http://localhost:8000.

Meilisearch

1# Get search api key
2http --auth "yoursecretmasterkey" --auth-type bearer GET http://localhost:7700/keys

You should go to storefront/.env.local file and paste obtained key into the NEXT_PUBLIC_SEARCH_API_KEY env variable. Also, go to the backend/.env file and paste admin key into MEILISEARCH_API_KEY