By Maruja E-commerce is an open-source e-commerce template for the "by maruja" brand, built as a monorepo that combines a Next.js web application with a Sanity Studio content management system and deployed on Vercel. The codebase uses TypeScript with fp-ts for typed functional programming, and includes Jest and Enzyme for unit testing.
What is By Maruja E-commerce?
By Maruja E-commerce is a full e-commerce project that pairs a Next.js frontend (in the /Web directory) with a Sanity Studio backend (in the /Studio directory) for managing products and content. It runs on Node and npm, and its deployment target is Vercel. The repository is maintained publicly on GitHub with 23 stars, and its architecture is documented in an included diagram.
Key Features
- Next.js framework — The storefront application is built with Next.js, giving you server-side rendering, routing, and API routes out of the box.
- Sanity CMS integration — The /Studio folder contains a fully configured Sanity Studio, allowing editors to manage products, inventory, and other content independently of the web app.
- TypeScript with fp-ts — The entire codebase is typed, and it uses fp-ts for functional programming constructs like Option, Either, and Task, enabling predictable error handling and data flow.
- Jest and Enzyme testing — Unit tests are written with Jest and Enzyme, so you can test components and logic as you develop.
- Monorepo structure — The repository separates the web application (/Web) and Sanity Studio (/Studio) into two distinct projects under one repo, each with its own npm install.
- Vercel deployment — The project is designed to deploy on Vercel, which integrates easily with Next.js and supports continuous deployment from the GitHub repository.
- Code style tooling — The setup requires the Prettier and ESLint Visual Studio Code extensions, and includes npm scripts for installing dependencies in each subproject.
Who is it for?
By Maruja E-commerce is intended for developers who need a starter e-commerce site for a small brand or boutique, and who want a clean separation between the storefront and a headless CMS. It also suits teams that prefer typed functional programming in TypeScript, since fp-ts is a core part of the codebase. If you're building a store for a fashion label or artisan business, this template gives you both the customer-facing shop and an admin content editor in one repository.
What can you do with it?
- Boutique store owners: launch a brand storefront with Next.js that pulls product data from Sanity, and manage products without touching code.
- Developers: use it as a reference for combining Next.js, Sanity, and TypeScript with fp-ts in a production-style setup, including Jest tests.
- Vercel users: deploy the /Web application directly to Vercel, with the /Studio project ready to host separately or as a subpath.
How does it work?
The repository is split into two projects: /Web (the Next.js application) and /Studio (Sanity Studio). After cloning, you install the Prettier and ESLint extensions, then run npm install in each project and start them separately. The web app reads content from Sanity, and Studio provides the editing interface.
FAQ
Is By Maruja E-commerce free to use?
The repository is public on GitHub, so you can clone and use the code freely. The project itself has no licensing restrictions mentioned in the README, but you will need your own Sanity and Vercel accounts to run it.
What is the tech stack?
The stack is Next.js, TypeScript with fp-ts, Jest, Enzyme, Sanity (CMS), and Vercel (hosting). It uses a monorepo layout with separate web and studio folders.
How do I set it up locally?
Install Node and npm, clone the repository, install the Prettier and ESLint VS Code extensions, then run npm install in each project (in /Web and /Studio). The README lists these steps as requirements.
Where is the Sanity Studio?
Sanity Studio lives in the /Studio directory. The /Web directory contains the storefront application. The two projects are independent under one repository.
