Skip to main content

Quick Start Guide

Welcome to DADDO! This guide will walk you through setting up your account, logging in, creating your first product, and viewing your public catalog.
1

Create Your Account

Start by creating a new DADDO account. Navigate to the registration page and provide the following information:Required Information:
  • Name: Your full name
  • Business Name: The name of your business (displayed in your catalog)
  • Email: Your email address for login
  • Phone: Contact phone number
  • Password: Secure password for your account
Optional:
  • Business Logo: Upload a logo image for your business
// Registration form submission (from src/Redux/actions/Auth/create_user.js)
const formData = new FormData();
formData.append("name", userData.name);
formData.append("businessName", userData.businessName);
formData.append("email", userData.email);
formData.append("phone", userData.phone);
formData.append("password", userData.password);
if (logoFile) {
  formData.append("logo", logoFile);
}

const response = await api.post("/user", formData, {
  headers: { "Content-Type": "multipart/form-data" }
});
Your business name will be displayed on your public catalog, so choose a name that represents your brand well.
2

Log In to Your Account

After creating your account, log in using your email and password.Login Features:
  • Email and password authentication
  • “Remember me” option to stay logged in
  • JWT token-based authentication for secure sessions
  • Forgot password recovery option
// Login action (from src/Redux/actions/Auth/login.js:8)
const { data } = await api.post("/user/login", credentials);

// Store authentication based on "remember me" preference
const storage = rememberMe ? localStorage : sessionStorage;
storage.setItem("token", data.token);
storage.setItem("user", JSON.stringify(data.userdata));
Once logged in, you’ll see the Home Dashboard with three main modules:

Productos

Manage your inventory, prices, and variants

Ventas

Record and track sales transactions

Estadísticas

View business analytics and performance
Use the “Remember me” option if you’re on a trusted device to avoid logging in every time.
3

Create Your First Product

Now let’s create your first product in the catalog.From the home screen, click “Productos”“Crear Producto” or navigate to /createProd.

Product Information

Fill in the product details:Basic Information:
  • Name: Product name
  • Description: Detailed product description
  • Price: Selling price
  • Buy Price: Your purchase/cost price (optional)
  • Stock: Available quantity
  • Category: Select or create a category
Images: Upload product images (supports multiple images via Cloudinary)
// Image upload handling (from src/Views/createProduct.jsx)
const handleImageChange = (e) => {
  const files = Array.from(e.target.files);
  setPreviews((prev) => [
    ...prev,
    ...files.map((file) => URL.createObjectURL(file))
  ]);
  setImages((prev) => [...prev, ...files]);
};

Product Variants (Optional)

Create variants for products with multiple options:
Variant Properties:
  • Color: Color name/description
  • Size: Size designation (S, M, L, XL, etc.)
  • Stock: Variant-specific stock quantity
  • Price: Override the base price (optional)
  • Buy Price: Variant-specific cost (optional)
  • Images: Variant-specific images
// Variant structure (from src/Views/createProduct.jsx:85)
const addVariant = () => {
  setProduct((prev) => ({
    ...prev,
    variants: [...prev.variants, {
      color: "",
      size: "",
      stock: 0,
      price: null,
      buyPrice: null,
      images: []
    }]
  }));
};
Example: A t-shirt with sizes S, M, L in colors Red, Blue, Green would have 9 variants.

Submit the Product

Click “Crear Producto” to save. The product will be added to your catalog and inventory.
Ensure all required fields are filled before submitting. Images are uploaded to Cloudinary and may take a few seconds to process.
4

View Your Catalog

Your public catalog is now live! You can share it with customers.

Access Your Catalog

Navigate to “Ver Catálogo” from the home screen or use the MyCatalogLink component.

Catalog URL Structure

/catalog/:userId?category=<categoryName>&showBusiness=1&showPhone=1
URL Parameters:
  • category: Filter by specific category
  • showBusiness=1: Display your business name
  • showPhone=1: Display your phone number

Catalog Features

Responsive Grid

Mobile-optimized product grid (2-4 columns)

Image Carousel

Multiple product images with navigation

Variant Display

Show product variants with color/size options

QR Code

Generate QR codes for easy sharing
// Catalog fetching (from src/Redux/actions/Products/catalog_actions.js:3)
export const fetchCatalogByUser = (userId, category) => async (dispatch) => {
  dispatch({ type: FETCH_CATALOG_REQUEST });
  
  try {
    const url = category 
      ? `/products/catalogs/${userId}?category=${category}`
      : `/products/catalogs/${userId}`;
    
    const response = await api.get(url);
    dispatch({ 
      type: FETCH_CATALOG_SUCCESS, 
      payload: response.data 
    });
  } catch (error) {
    dispatch({ 
      type: FETCH_CATALOG_FAILURE, 
      payload: error.message 
    });
  }
};

Share Your Catalog

Copy the catalog URL and share it with customers via:
  • WhatsApp/SMS
  • Social media
  • Email
  • QR code (for in-store use)
Enable showBusiness and showPhone parameters to make it easy for customers to contact you directly.

Next Steps

Manage Inventory

Learn how to update stock, edit products, and organize your catalog

Process Sales

Record sales transactions and track your revenue

View Analytics

Explore your business dashboard with sales analytics

Share Catalog

Advanced catalog sharing options and customization

Tech Stack Overview

  • React 18.2 with functional components and hooks
  • Redux 5.0 with Redux Thunk for state management
  • React Router v7 for navigation
  • Tailwind CSS for styling
  • Vite 5 for fast development and builds
  • Axios - HTTP client for API requests
  • Cloudinary - Image upload and management
  • Recharts - Analytics charts
  • QRCode.react - QR code generation
  • date-fns - Date formatting
  • react-toastify - Toast notifications

Common Routes

RoutePurposeAuthentication
/Login pagePublic
/createUser registrationPublic
/catalog/:userIdPublic catalog viewPublic
/homeUser dashboardProtected
/createProdCreate productProtected
/productsView all productsProtected
/createSellRecord new saleProtected
/sellsView sales historyProtected
/dashAnalytics dashboardProtected
/profileUser profileProtected
Protected routes require authentication. Unauthenticated users will be redirected to the login page.

Build docs developers (and LLMs) love