A beautiful NextJS storefront for a Medusa store (The opensource alternative to Shopify)

Overview

medusa-starter-monster

medusa-starter-monster

About

Participants

Description

Medusa Storefronts don't have to be boring. This starter is an elegant and beautiful NextJS Storefront for Medusa. Styled using TailwindCSS, animations with Framer Motion, and deployed on Vercel.

Demo

Live Demo: https://medusa-starter-monster.vercel.app

Video Demo: https://youtu.be/SBDtyHtv9xU

Features

  • Properly documented
  • Smooth Scrolling with Lenis
  • Animated page transitions with Framer Motion
  • TypeScript
  • Responsive
  • Beautiful by default
  • ESLint — To find and fix problems in your code
  • Prettier — Code Formatter for consistent style
  • Path Mapping — Import components or images using the @ prefix

Local Development

Clone the repository and navigate to the directory.

# clone repository
git clone https://github.com/yinkakun/medusa-starter-monster.git

# navigate to the directory
cd medusa-starter-monster

Setup Medusa Server

  1. Navigate to the server folder and run yarn install

  2. Rename the .env.example file at the root of the folder to .env

  3. Set up AWS S3 Bucket. Follow this tutorial to set up an AWS S3 Bucket for Medusa S3 File Plugin up until the end of the Create S3 Bucket section. As the plugin is already installed, you just need to add the environment variables to the .env file.

  4. Setup Postgres Database On Your Computer:

    • If you don't have Postgres installed, follow these tutorials to install it on macOS, Linux, and Windows

    • Create a database from the command line with psql:

      # connect to postgres
      psql postgres
      
      # create user
      CREATE USER medusa_starter_monster_admin WITH PASSWORD 'medusa_starter_monster_admin_password';
      
      # create database
      CREATE DATABASE medusa_starter_monster OWNER medusa_starter_monster_admin;
      
      # grant privileges
      GRANT ALL PRIVILEGES ON DATABASE medusa_starter_monster TO medusa_starter_monster_admin;
      
      # exit
      quit;
    • Add database URL to the .env file - The URL should be in the format postgres://<username>:<password>@<host>:<port>/<database>. The default port is 5432. So the URL for the database created above would be postgres://medusa_starter_monster_admin:[email protected]:5432/medusa_starter_monster

  5. Setup Local Redis Cache:

    • If you don't have Redis installed already, This tutorial explains how to install Redis

    • Start Redis if it's not already running in the background. Read more about starting Redis here

      # macOS
       brew services start redis
      
       # Linux
       sudo systemctl start redis
    • Add Redis URL to the .env file - The default Redis URL on localhost is redis://localhost:6379

  6. Start the medusa server:

    # run migrations to instantiate the medusa schemas
    medusa migrations run
    
    # create a medusa admin user
    medusa user -e [email protected] -p medusa-admin-password
    
    # start server.
    yarn start

Setup the Medusa Admin Dashboard

Since the Admin dashboard repo isn't modified, it's not included in this repo.

  1. Clone the medusa-admin repo and install dependencies:

      # clone the medusa admin repo
      git clone https://github.com/medusajs/admin medusa-admin
      cd medusa-admin
    
      # install dependencies
      yarn install
    
      # start the admin dashboard dev server (while the medusa server is running)
      yarn start
  2. Log in with the medusa server login credentials created above.

  3. Import the monster-products.csv file from the project's root folder using the admin dashboard. This will create products in the database that can be used to test the store.

  4. At the time of writing, there seems to be a bug with Product Collection creation from imported products. To fix this, we have to create Product collections manually. Fo to the Products page in the admin dashboard and click on the Collections tab. Click on the Create Collection button and create a collection with the names: Monster Classic, Monster Ultra, Monster Hydro, Juice Monster and Java Monster. Then group the imported products into their respective collections.

  • Create at least one region. Medusa requires that to be able to create cart.

Setup the NextJS Storefront

  1. Navigate to the storefront folder and install dependencies with yarn install
  2. While the medusa server is running, start the storefront dev server with yarn dev

Resources

You might also like...

An e-commerce storefront starter built with Qwik and Vendure

Vendure Qwik Storefront Starter️ An e-commerce storefront for Vendure built with Qwik & Qwik City. 👉 qwik-storefront.vendure.io To do Cart ✅ Checkout

Nov 18, 2022

A plugin starter for medusa pre-configured and using typescript

A plugin starter for medusa pre-configured and using typescript

Plugin starter (Typescript) Start to write your own plugin as quick as possible Getting started Installation git clone [email protected]:adrien2p/medusa-

Nov 9, 2022

Medusa + Next.js starter frontend UI project as a part of Open source contribution.

Medusa + Next.js starter frontend UI project as a part of Open source contribution.

Medusa Next.js Starter Medusa is an open-source headless commerce engine that enables developers to create amazing digital commerce experiences. Prere

Aug 22, 2022

medusa-plugin-webhooks

medusa-plugin-webhooks

Medusa Plugin Webhooks About Participants Anish De GitHub: @AnishDe12020 Twitter: @AnishDe12020 Discord: AnishDe12020#8442 (ID: 727047127271735387) De

Nov 21, 2022

An opensource 360° media viewer written in JavaScript using Electron and Marzipano

An opensource 360° media viewer written in JavaScript using Electron and Marzipano

open360viewer open360viewer is an opensource 360° media viewer. It is based on electron and marzipano. It currently supports opening equirectangular 3

Oct 9, 2022

Opensource Cross-platform Logitech® Litra Glow control

Opensource Cross-platform Logitech® Litra Glow control

Litra Opensource Cross-platform Logitech® Litra Glow control Requirements Linux sudo echo 'SUBSYSTEM=="usb", ATTR{idVendor}=="046d", ATTR{idProduct}==

Nov 19, 2022

An opensource platform to connect with awesome collaborators to work with your side-projects✨

An opensource platform to connect with awesome collaborators to work with your side-projects✨

ProStack 📑 An open-source platform 💻 to peep into some highly interesting and exciting projects & connect with those project's owner for collaborati

Jul 18, 2022

`raaghu-mfe` is an opensource micro front end framework built on top of `raaghu-elements`, Bootstrap 5 and Storybook offering highly customizable UI components and built-in pages

 `raaghu-mfe` is an opensource micro front end framework built on top of `raaghu-elements`, Bootstrap 5 and Storybook offering highly customizable UI components and built-in pages

`raaghu-mfe` is an opensource micro front end framework built on top of `raaghu-elements`, Bootstrap 5 and Storybook offering highly customizable UI components and built-in pages. Raaghu mfe can be used as a base to build complex components and UI layouts whilst maintaining a high level of reusability,flexibility with ease of maintenance.

Nov 23, 2022

An Opensource Peer-to-peer Social Network with Zero-Knowledge-Proof based authentication.

HexHoot This is an attempt to create an Opensource Peer-to-peer Social Network with Zero-Knowledge-Proof based authentication. The objective is to dem

Sep 17, 2022
Owner
Yinka Adedire
I like to build cool stuff
Yinka Adedire
Minimal E-Commerce Store built with NextJS using Shopify Storefront API

NextJS Shopify Store Minimal E-Commerce Store built with NextJS using Shopify Storefront API Usage: run: npm install && npm run dev OR If you have doc

Omar Magoury 3 May 31, 2022
A Gatsby storefront for a Shopify store.

Leah Gardner Storefront A Gatsby storefront for a Shopify store. Built as a learning project for Shopify and Gatsby integration. This project is boots

Yinka Adedire 14 Oct 10, 2022
NX workspace for running medusa backend, storefront and admin panel with marketplace functionalities

Medusa Marketplace Project status Assigned store_id to Order, Product to make them store specific Create and process payment for an order with multipl

Keith Hon 8 Nov 13, 2022
Medusa on steroid, take your medusa project to the next level with some badass features 🚀

medusa-extender Full documentation website Medusa on steroid, take your medusa project to the next level with some badass features ?? The extender pro

Adrien de Peretti 172 Nov 19, 2022
An unofficial, simplified version of the @Shopify/koa-shopify-auth middleware library.

simple-koa-shopify-auth https://www.npmjs.com/package/simple-koa-shopify-auth NOTE: This package is not maintained by or affiliated with Shopify. Desc

David 20 Nov 7, 2022
Forked from hayes0724/shopify-packer Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, compatible with Slate and existing websites.

Shopify Packer Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, comes with starter themes and com

Web & Mobile | eCommerce | Full-Stack Developer 4 Nov 24, 2022
Storex is a store management opensource API platform for web and mobile apps developers.

STOREXAPI STOREXAPI is a free online REST API that you can use whenever you need Pseudo-real data for your store management website, mobile applicatio

Abdullah Al Mamun 7 Aug 5, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 13 Jul 1, 2022