- Yinka - @yinkakun
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.
Live Demo: https://medusa-starter-monster.vercel.app
Video Demo: https://youtu.be/SBDtyHtv9xU
- Properly documented
- Smooth Scrolling with Lenis
- Animated page transitions with Framer Motion
- 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
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
Navigate to the
serverfolder and run
.env.examplefile at the root of the folder to
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 Bucketsection. As the plugin is already installed, you just need to add the environment variables to the
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
# 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
.envfile - 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
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
.envfile - The default Redis URL on localhost is
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.
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
Log in with the medusa server login credentials created above.
monster-products.csvfile 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.
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
Productspage in the admin dashboard and click on the
Collectionstab. Click on the
Create Collectionbutton and create a collection with the names:
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
- Navigate to the
storefrontfolder and install dependencies with
- While the medusa server is running, start the storefront dev server with