Plantito

Plantito is a fully functioning e-commerce web app for plants, built with Next.js, Sanity, SCSS, and Stripe, and deployed live at plantito.vercel.app.

What is Plantito?

Plantito is a complete storefront for selling plants online, with a responsive design and Stripe payment integration. It uses Next.js as the React framework, Sanity as the content management system for product and site content, and SCSS for styling. The project is marked as complete and is publicly accessible at plantito.vercel.app, so you can browse products and test the checkout flow.

The app takes product data from Sanity and serves it through Next.js pages and API routes. It produces a shoppable catalog with Stripe-powered checkout. The codebase is structured around the standard Next.js layout with a pages directory, including pages/index.js as the entry point and pages/api/ for serverless API routes.

Key Features

• Responsive design — The layout adapts to different screen sizes, making the store usable on mobile, tablet, and desktop.
• Stripe payment integration — Checkout is handled through Stripe, allowing customers to pay for plant orders.
• Sanity CMS — Product information and content are managed through Sanity, a headless CMS, letting the store owner update products without editing code.
• SCSS styling — Styles are written in SCSS, providing variables, mixins, and nesting for maintainable CSS.
• Next.js framework — Uses the React-based Next.js framework with file-based routing and API routes in the pages/api directory.
• Deployed on Vercel — The live site is hosted on Vercel, the platform built by the Next.js team, and can be redeployed from the GitHub repository.
• Complete status — The project is marked as finished, meaning the core storefront, product browsing, and payment flow are implemented.

Who is it for?

• Plant shops and nurseries — Use Plantito as a starting point to launch an online store for selling plants and accessories.
• Developers learning e-commerce — Study a real e-commerce codebase that combines Next.js, Sanity, SCSS, and Stripe to understand how a storefront fits together.
• Freelancers building storefronts — Customize the template for client projects that need a responsive plant or general product store with card payments.

What can you do with Plantito?

• Sell plants online: Set up a catalog of plants where visitors can view products and complete purchases through Stripe.
• Manage products via Sanity: Update inventory, prices, and descriptions in the Sanity CMS so changes appear on the site without redeploying.
• Learn Next.js API routes: Explore the pages/api directory to see how serverless endpoints work in a real storefront context.

How does Plantito work?

Clone the repository and run npm run dev (or yarn dev) to start the development server on http://localhost:3000. Edit pages/index.js to change the homepage; the page auto-updates as you save. API routes in pages/api are mapped to /api/* and can be accessed on http://localhost:3000/api/hello as a starting example.

FAQ

What technology stack does Plantito use?

Plantito uses Next.js as the React framework, Sanity as the content management system, SCSS for styling, and Stripe for payment processing. The project also follows Next.js conventions with a pages directory and API routes.

Is Plantito deployed?

Yes, the project is deployed at plantito.vercel.app, and the repository is available on GitHub. The deployment platform is Vercel, which is designed for Next.js applications.

Can I use Plantito for my own store?

Since the project is open source and marked as complete, you can clone the repository and customize it. You will need to connect your own Sanity dataset and Stripe account to manage products and accept real payments.

What is the status of Plantito?

The project status is listed as complete, meaning the core functionality of the e-commerce app — including responsive design and Stripe payment implementation — is fully implemented.