Habaneras De Lino Frontend V2 is an open-source ecommerce storefront template for linen and cotton clothing, built with Next.js 12.2.3, Bootstrap 5.2.0, Django 4.0.6, and Django REST Framework 3.13.1.
What is Habaneras De Lino Frontend V2?
Habaneras De Lino Frontend V2 is the Next.js and React.js frontend of an online store selling linen and cotton clothes. It takes product, collection, and category data from a Django REST API and images from Cloudinary, and produces a customer-facing shopping experience with product filtering and customization. The storefront calls the Django backend for cart CRUD operations, orders, and Stripe payments, and is created by Ceci-Aguilera, with a live version at habanerasdelino.com.
Key Features
- Next.js 12.2.3 storefront — The React-based UI in this repository renders the store and makes API calls to the Django backend.
- Django 4.0.6 REST API — The separate backend repository (habaneras-de-lino-drf-api) manages cart operations, payments, and orders through the store_app folder.
- Custom Bootstrap admin panel — A store administration interface built with Bootstrap 5.2.0, distinct from Django's default admin, offering advanced filtering and CRUD over products, collections, configs, orders, and payments.
- Stripe SDK integration — Payments are handled by Stripe, accessed by Django when a customer makes a purchase.
- Cloudinary image CDN — All product, collection, and category images are stored on Cloudinary and served both to the admin and the storefront.
- PostgreSQL database — Connected to the Django API, PostgreSQL stores all store administration information.
- Product filtering and customization — Customers can filter clothing by category, collection, and other characteristics, and customize options such as color, size, and sleeve cut.
- Separate frontend and backend repositories — The Next.js frontend lives in this repository, while the Django API and admin panel are maintained in their own repository, allowing independent deployment.
Who is it for?
- Clothing store owners who want a ready-made ecommerce site for linen and cotton apparel, including a custom admin to manage products and orders.
- Full-stack developers looking for a working Next.js and Django REST Framework reference implementation that integrates Stripe, Cloudinary, and PostgreSQL.
- Developers who prefer a custom admin over Django's default admin, thanks to the Bootstrap-based interface with advanced filtering.
What can you do with Habaneras De Lino Frontend V2?
- Launch a linen and cotton store: Set up the frontend, connect it to the Django API, and let customers filter by category, customize sizes and colors, and check out with Stripe.
- Manage the store catalog: Use the custom Bootstrap admin to perform advanced filtering and CRUD operations on products, collections, configs, orders, and payments.
- Learn a full-stack ecommerce architecture: Study how a Next.js storefront calls a Django REST API, stores images on Cloudinary, uses PostgreSQL, and processes payments through Stripe.
How does it work?
Clone the repository, run npm install, create an .env.local file with the NEXT_PUBLIC_API_URL environment variable pointing to the backend URL, then launch the development server with npx next dev. The app runs at localhost:3000. In production, the Next.js frontend communicates with the Django backend, which handles business logic and payment processing.
Pros and cons
- Pros: Public open-source code on GitHub, a modern Next.js and Django stack, a custom Bootstrap admin, and Stripe payment integration.
- Cons: The README notes that screenshots of the frontend and custom admin should be updated soon, so visual documentation is incomplete.
Alternatives
- Saleor — an open-source ecommerce platform with a GraphQL API and a different admin interface.
- Medusa — an open-source headless commerce platform with a Node.js backend.
FAQ
Is Habaneras De Lino Frontend V2 free?
The code is publicly available on GitHub, but the README does not specify a software license. You can browse and clone the repository without cost.
What payments does it support?
It uses the Stripe SDK for managing payments. When a user makes a purchase, Django accesses Stripe to process the transaction.
Where is the backend code?
The backend, including the Django REST API and the custom admin panel, is in a separate GitHub repository named habaneras-de-lino-drf-api, linked from this README.
How do I run it locally?
After cloning the frontend repository, install dependencies with npm install, create an .env.local file with the NEXT_PUBLIC_API_URL variable, and run npx next dev. The app will be available at localhost:3000.
What database does it use?
PostgreSQL is connected to the Django API and contains all information about the store administration.
