DEV Community

Cover image for Simple Tailwind & Stripe eCommerce

Posted on • Originally published at

Simple Tailwind & Stripe eCommerce

Hello Coders! This article presents Rocket eCommerce, a simple yet powerful CMS Starter, that aims to help small businesses sell physical and digital products online with minimal effort and costs using Stripe as the payment processor and Tailwind for styling.

👉 LIVE Demo: Rocket eCommerce

NOTE: The source code can be downloaded from GitHub (public repository) for those interested in trying the product before buying.

The advantages of using this product compared with the classic ones like Shopify, WooCommerce or Medusa are simplicity, low costs, and the possibility to extend the core features via a custom development effort that any developer can do.

Rocket eCommerce - the HOMEpage.

How it works

The source code (published on GitHub) needs to be connected to the Stripe Service via the API keys and the first step is to import the products using the ADMIN account:

Rocket eCommerce - Stripe Products Import

Each Stripe product can be mapped to a local product and published on the website by adding local properties, more images, a complete description, and tags.

Rocket eCommerce - Edit Local Product

Besides the MAIN image pulled from Stripe, the user can upload other 5 images and also edit each one using a simple image editor:

Rocket eCommerce - Crop, edit Images

The ADMIN is also able to manage all users and reset their passwords using a simple UI as shown below:

Rocket eCommerce - ADMIN, edit users.

Site Settings

Being ADMIN, you can also customize other things like site name, and copyright, both visible in the page titles and footer.

The social links (Facebook, Instagram, and Twitter) once edited, are visible in the website footer:

Rocket eCommerce - ADMIN, site Settings

The effect of these settings is visible in the service footer:

Rocket eCommerce - ADMIN, social links.

The content pages like Terms & Conditions, Privacy, and Help are editable using a visual HTML editor:

Rocket eCommerce - ADMIN, edit content pages.

Product Screens

Rocket eCommerce - Product Page.

Rocket eCommerce - Search Page

Rocket eCommerce - Search Page.

Rocket eCommerce - Checkout Page

Rocket eCommerce - Search Page

The payment flow can be tested by using a Stripe Test Card information 4242 4242 4242 4242 as shown below.

Rocket eCommerce - Payment Page (powered by Stripe)

The product is continuously updated based on the user's feedback and issues reported on GitHub.

Thanks for reading! For more starters and support, feel free to access:

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.