Habaneras de Lino

Table of Contents

• Description
  • What is Habaneras de Lino?
  • Tech Stack and Components
• Installation
• Screenshots of the Frontend
• Screenshots of the Backend Admin

Description

Visit the new version of the store at habanerasdelino.com

What is Habaneras de Lino?

Habaneras de Lino is an online store to buy linen and cotton clothes that offer an experience of comfort, luxury ,and modernity. The clients can filter the clothing by category, collection, and other characteristics, as well as customize the products (set color, size, sleeve cut, ...). It uses Stripe for managing the payments.

Tech Stack and Components

The main components of Habaneras de Lino are:

• Next.js and React.js store Frontend (GitHub repo): The store UI that is visible to the clients was created using Next.js which connects to the Django API when making API calls and to Cloudinary when fetching the products', collections', and categories' images. It is contained in this repo.
• Django and Django_Rest_Framework (This repo):
  • API(store_app folder): For managing user requests such as making CRUD operations over the store Cart and making payments and orders. The code for this API can be found inside the store_app folder of the Backend WebApp. Link of the GitHub repo for the backend.
  • The store administration (admin_app folder): Intended to be used by the store administrator. It is different from Django's Admin, and it allows advanced filtering and CRUD operations over products, collections, configs, orders, payments, ... . Link of the GitHub repo for the backend.
• Stripe SDK (Third Party): For managing payments. It is accessed by Django when the user makes a purchase. Link to Stripe.
• Cloudinary for storing images and as CDN (Third Party): Used for storing all images uploaded using the Django custom store administration. The images can be seen at the store's admin and in the store frontend by clients. Link to Cloudinary.
• PostgreSQL as database (Third Party): Connected to the Django API. Contains all the information about the store administration.

Note: The Installation and the Useful Links sections contain more-in-detail information about each component.

Installation

1. Clone the repo:

   git clone https://github.com/Ceci-Aguilera/habaneras-de-lino-frontend-v2.git

2. Install dependencies:

   npm install

3. Configure the environment variables: Create an .env.local file inside the root folder and set up the following environment variables:

   NEXT_PUBLIC_API_URL (The url of the backend, for example, https://backend_api.com/)
   

4. Run the app

   npx next dev

5. Congratulations =) !!! the app should be running in localhost:3000

Screenshots of the Frontend

Should be updated soon

Screenshots of the custom Admin

Should be updated soon